소개
Openai 에서 새로 나온 Agnet Builder(에이전트 빌더)를 가지고, 판매자라면 어떤 유용한 기능을 이용할까 상상해 보다가. 상품리스트 출력하는 것을 해보기로 했습니다.
처음 사용해보고, 서비스도 아직 불안정하지만 더듬더듬 탐험해 보고, 맘껏 실패를 해보고자 합니다. 참고로 해당 상품은 제 상품은 아니고, 저희 고객님 상품입니다.
목표는
Agent Builder로 나의 상품리스트를 Openai Storage(vector store)에 저장해 두고, 상품리스트를 조회하면 데이타를 가져와서 예쁘게 출력을 해야 합니다.
결과적으로 작업을 해보니 이런 그림이 그려집니다.
여기서 각각의 역할을 우리가 익히 아는 Web개발의 구조로 풀어보면 다음과 같습니다.
- ChatGPT: Front UI 사용자와 채팅하며 사용자의 요구를 받는 부분
- Agent Builder: Agent는 Backend 서비스에 가깝습니다. 사용자 요청에 대해 workflow를 진행하면 데이타를 검색하고 반환하는 역할을 합니다.
- Storage (File Search) : 데이타를 벡터로 저장하는 역할 담당 Storage (Vector Store) 에 저장됨
- Widget Builder: Agent에서 받아온 결과 값을 좀 더 예쁘게 보여주는 결과 UI 담당
진행방법
1. Agent Builder로 Workflow 만들기
https://platform.openai.com/agent-builder
에 접속해서 Agent Builder에 들어옵니다.
참 별거 없지요. 목표에 충실하기 위해 시나리오는 간단하게~! 😄
Start 노드 넣고, Agent 노드 끌어다 놓습니다.
2. Tool -> File Search 에 데이타 넣기
아래 내용을 상품.txt라고 저장하고 Agent Tool에 File Search에 추가 합니다.
{
bannerImage: "https://res.cloudinary.com/dkwgpkzj3/image/upload/v1763125273/kkokpng2_ni5ftp.png",
tracks: [
{
id: "419",
title: "소중한 너에게 꽃차",
sub_title"나비티백 3종 세트",
cover: "https://iloveflowertea.com/web/product/small/202504/ce025488dedf66179cb66e49bbbec547.jpg",
link:"https://iloveflowertea.com/product/detail.html?product_no=419",
},
{
id: "604",
title: "무드 포 러브",
sub_title"알디프 시그니처 블렌딩 티 8입",
cover: "https://iloveflowertea.com/web/product/small/202511/dfcb96962b607041367332eb05400f11.jpg",
link:"https://iloveflowertea.com/product/detail.html?product_no=604",
},
{
id: "601",
title: "낮의 차",
sub_title"알디프 라이프 블렌딩 티 8입",
cover: "https://iloveflowertea.com/web/product/small/202511/c83fb2875c4fb8e46d3915a417e9d057.jpg",
link:"https://iloveflowertea.com/product/detail.html?product_no=601",
},
{
id: "612",
title: "러블리 티 컬렉션 10종",
sub_title" 티 집게 선물세트 + 쇼핑백(대)",
cover: "https://iloveflowertea.com/web/product/small/202509/07a8b952ee50a5e5f016eed53656604c.jpg",
link:"https://iloveflowertea.com/product/detail.html?product_no=612",
},
],
}
3 Widget 설정
위젯파일은 처음 만들기가 좀 까다롭기는 한데, 아래 URL에서 만들 수 있습니다.
https://widgets.chatkit.studio/
저는 위의 1-1 에서 상품.txt의 내용을 그대로 copy해서 올려놓고, 아래와 같이 프롬프트해서 얻었습니다.
헌데 자기가 만들고도, 에러가 나서 download가 안되는 것들도 있더군요. 어려번 시도해서 만들었습니다.
product 위젯 공유
4. 테스트 해보기
원하는 결과가 나오는 것을 확인 할 수있습니다.
5. ChatKit으로 Front UI 만들기
Backend가 구성되었으니 이제 Front인 챗봇을 만들 시간입니다.
VSCode 에서 새 폴더 하나 만드시고, 터미널로 들어가서
git clone https://github.com/openai/openai-chatkit-starter-app
README에 나온 대로 작업을 하면 됩니다.
소스에서 제가 변경한 것은 딱 두 개~!
cp .env.example .env.local
1. .env.local 파일 만들고,
2. 그 파일에 OPENAI_API_KEY와 NEXT_PUBLIC_CHATKIT_WORKFLOW_ID 값을 제 정보로 넣은 것이 다입니다.
6. 배포하기
로컬에서 테스트해보고 이상이 없어서 제 Github에 올리고, 그다음 Vercel에서 새로운 프로젝트 생성하고 .env.local을 환경변수로 업로드하고 실행 했습니다.
7. 배포후 테스트
처음에 UI 채팅창이 뜨다가 사라져서 무슨 일인가 했더니,
https://platform.openai.com/settings/organization/security/domain-allowlist
여기에서 저의 vercel 도메인을 등록해야 하더구요.
등록하니 잘 뜹니다.
직접 해볼 수 있는 사이트 :
https://openai-chatkit-eight.vercel.app/
접속해서 "상품리스트" 라는 키워드 입력하시면 결과를 보실 수 있습니다.
결과와 배운 점
처음에 Agent Builder로 에러가 많이 나서 고생을 좀 했습니다.
아직도 잘되던게 안되는 경우가 있지만, OpenaI가 그려가는 chating의 OS화, UI/UX의 변화가 나름 신선했습니다.
위젯 빌더의 필요성도 Google Opal에서는 고민하지 않는 부분을 Opena ai에서는 고민한다는 느낌을 받았습니다.아직 서비스 초기라 MCP연동을 해도 자꾸 에러나는 것이 많아서 본격적인 탐색을 하기에 조금 제약이 있다고 보여집니다. 좀더 서비스가 안정화된다면 좋겠습니다.
