AgentKit 데모

OpenAI 구독자 1,760,000명

요약

Christina가 AgentKit를 활용해 코딩 없이 시각적 워크플로우 빌더를 이용해 에이전트를 8분 만에 구축하고 배포하는 과정을 보여줍니다. 세션 조회용 세션 에이전트와 일반 DevDay 에이전트를 만들고, 위젯과 가드레일을 추가해 사용자 경험과 보안을 강화합니다. 완성된 에이전트는 ChatKit을 통해 웹사이트에 바로 임베딩되어 실시간으로 세션 추천 기능을 제공합니다.

주요 키워드

AgentKit Workflow Builder Guardrails Widget Builder ChatKit 카테고라이징 에이전트 세션 에이전트 퍼블리시 PII 보호 에이전트 오케스트레이션

하이라이트

🚀 AgentKit으로 8분 만에 에이전트를 시각적으로 설계하고 배포하는 과정을 시연했습니다.
🔧 워크플로우 빌더에서 노드를 드래그 앤 드롭해 복잡한 에이전트 로직을 코드 작성 없이 구성했습니다.
⚙️ 세션 요청을 분류하는 카테고라이징 에이전트를 도입해 사용자 의도를 자동으로 라우팅합니다.
🎨 위젯 빌더를 활용해 세션 스케줄을 시각적으로 표시하는 인터랙티브 컴포넌트를 추가했습니다.
🛡️ 사전 구성된 가드레일을 통해 PII(개인식별정보) 보호, 환각 방지, 콘텐츠 모더레이션을 적용했습니다.
💻 퍼블리시 버튼 한 번으로 프로덕션 환경에 완전 배포된 에이전트를 생성했습니다.
🔗 ChatKit 리액트 컴포넌트를 통해 워크플로우 ID만 삽입해 웹페이지에 쉽게 챗봇 UI를 임베딩했습니다.
📊 실시간 프리뷰와 평가(Eval) 기능으로 출시 전 동작을 검증할 수 있습니다.

용어 설명

AgentKit

시각적 워크플로우 빌더와 도구 모음으로 에이전트를 빠르게 제작할 수 있는 플랫폼

Workflow Builder

노드 기반으로 에이전트 로직을 설계하는 시각적 인터페이스

Guardrails

에이전트의 환각(hallucination) 방지, PII 차단, 모더레이션 정책을 자동으로 적용하는 보안 장치

Widget Builder

사용자 인터페이스 요소(위젯)를 시각적으로 생성·관리하는 도구

ChatKit

OpenAI 에이전트를 웹사이트에 임베딩하기 위한 React 기반 챗 UI 컴포넌트

Christina가 자신과 AgentKit 팀을 소개하며, DevDay 웹사이트를 정적 페이지에서 AI 에이전트가 스케줄을 추천하는 인터랙티브 도구로 전환할 계획을 설명합니다.

[00:11] 크리스티나가 Agent Kit 팀을 소개하며 개발자들이 더 빠르게 에이전트를 만들 수 있도록 돕는 방법을 보여주겠다고 소개합니다.

[00:21] Dev Day 웹사이트는 현재 정적 페이지이지만, AI 기능을 추가하여 사용자에게 맞춤형 세션을 추천하는 기능을 구현하겠다고 제안합니다.

[00:42] 8분이라는 시간 제한을 두고 실시간으로 Agent Kit을 사용해 에이전트를 구축하고 배포하는 도전을 시작합니다.

타이머를 맞추고 OpenAI 플랫폼의 워크플로우 빌더를 열어 코드 대신 노드를 연결해 에이전트 설계를 시작합니다.

[01:07] OpenAI 플랫폼의 워크플로 빌더를 사용하여 코드 대신 시각적으로 노드를 연결하는 방식으로 에이전트를 구축하는 과정을 시작합니다.

[01:27] 파일 검색, MCP, 가드레일, 휴먼 인 더 루프 등의 도구들을 소개하며, 세션 정보를 제공하는 에이전트와 일반 개발 정보를 제공하는 에이전트 두 가지를 구축할 계획을 설명합니다.

메시지 분류용 카테고라이징 에이전트를 추가한 뒤, 세션 정보를 제공하는 세션 에이전트를 생성해 스케줄 문서를 연결합니다.

[01:43] 메시지 유형을 분류하는 에이전트로 시작하여 if-else 노드로 라우팅 로직을 구성하고, 세션 에이전트에 필요한 문서를 연결하는 과정을 보여줍니다.

[02:28] 일정 표시를 위한 시각적으로 흥미로운 위젯을 만들어 텍스트만이 아닌 인터랙티브한 경험을 제공하고자 하며, Fro를 위한 온보딩 세션 위젯을 예시로 소개합니다.

이미 디자인된 온보딩 세션 위젯을 위젯 갤러리에서 다운로드해 세션 에이전트의 출력 포맷으로 붙여넣고 프리뷰로 확인합니다.

[02:54] 골든 게이트 파크 세션 위젯을 다운로드하여 방금 만든 세션 에이전트에 출력 형식으로 첨부하는 과정을 진행합니다.

DevDay 전반 질문을 담당할 에이전트를 만들고, PII 차단 가드레일과 민감 정보 처리 에이전트를 추가해 보안을 강화합니다.

[03:34] 일반적인 개발자 데이 에이전트를 새로 생성하고, 프로그의 스타일로 말하도록 설정하며 개발자 데이에 대한 모든 정보가 담긴 파일을 첨부합니다.

[04:10] 에이전트의 신뢰성을 위해 미리 구축된 가드레일을 추가하여 개인정보 보호, 환각 방지, 조정 기능을 구현합니다.

[04:46] 민감한 정보가 포함된 질문을 처리하기 위한 추가 에이전트를 설정하고, 프로그 스타일을 유지하면서 보안 기능을 강화합니다.

[05:12] 완성된 워크플로우를 에이전트 빌더에서 직접 테스트하며, 에이전트 구축에 관한 질문에 대해 적절한 세션을 추천받는 과정을 확인합니다.

워프클로우 프리뷰에서 가드레일, 의도 분류, 도구 호출, 위젯 렌더링 과정을 점검한 뒤 Ask Froge라는 이름으로 실환경에 배포합니다.

[05:51] 개구리 에이전트가 완성되었다고 확인하며, 시간을 의식하며 작업을 마무리해야 한다고 언급합니다.

[05:56] 도구를 사용한 특화 에이전트 구축, 가드레일 추가, 위젯 커스터마이징, 미리보기 테스트까지 완료했으나 아직 완전한 평가는 하지 않았다고 설명합니다.

[06:16] 시간에 쫓겨 에이전트를 'ask froge'라는 이름으로 배포하며, 워크플로우 ID가 있는 완전한 프로덕션 에이전트가 준비되었다고 발표합니다.

[06:38] 코드 내보내기 옵션이 있지만 복잡하므로, 생성된 워크플로우 ID를 사용하여 자신의 개발자 데이 사이트로 이동한다고 설명합니다.

퍼블리시된 워크플로우 ID를 ChatKit 리액트 컴포넌트에 입력하고 디자인 커스터마이징을 거쳐 웹페이지 하단 시트 형태로 챗 UI를 통합합니다.

[06:55] 개발자 데이 사이트에서 챗킷 세션을 생성하고, 워크플로우 ID와 클라이언트 시크릿을 사용해 챗킷 리액트 컴포넌트를 추가한다고 설명합니다.

[07:11] 개구리 테마의 시각적 커스터마이징을 추가하여 'ask froge'라는 이름으로 설정하고, 바텀 시트 형태와 상단 링크를 구성한다고 설명합니다.

[07:35] 사이트에 구현된 'ask froge'를 테스트하며, '에이전트 구축을 배우기 위한 세션'에 대해 질문합니다.

[07:47] 에이전트가 방금 생성한 워크플로우를 통해 가드레일 확인, 메시지 분류, 파일 검색 도구 활용, 위젯 사용 등을 수행하며 개구리 스타일로 응답한다고 설명합니다.

49초 여유를 남기고 도전을 성공적으로 마무리하며, 새 도구·위젯·가드레일을 손쉽게 추가해 에이전트를 지속적으로 개선할 수 있음을 강조합니다.

[08:14] 49초를 남기고 에이전트가 완성되었으며, 비주얼 빌더에서 지속적으로 개선하고 코드 변경 없이 배포할 수 있다고 발표합니다.

[08:42] 몇 분 만에 에이전트 워크플로우를 시각적으로 설계, 도구와 위젯 추가, 미리보기, 배포, 테스트를 완료했으며 이제 모든 사용자가 활용할 수 있다고 요약합니다.

[00:11] 감사합니다, 샘. 안녕하세요, 저는 크리스티나입니다

[00:13] 그리고 Agent Kit을 구축하는 팀에서 일하고 있습니다.

[00:14] 오늘은 Agent Kit이 개발자들이 어떻게

[00:16] 그 어느 때보다 빠르게 에이전트를 만들 수 있도록

[00:18] 돕는지 보여드리고 싶습니다.

[00:21] 아마 여러분은 이미 우리 Dev Day

[00:24] 웹사이트를 보셨을 것입니다. 여러분 모두가

[00:26] 접근할 수 있는 사이트이고

[00:28] 오늘 일정에 대한 모든 것이 담겨있습니다. 하지만 지금은

[00:30] 단순한 정적 페이지일 뿐입니다. 만약 이것이

[00:33] 실제로 하루 일정을 안내하고

[00:35] 여러분에게 가장 관련성이 높은 세션을

[00:36] 가리켜 줄 수 있다면 어떨까요? 우리는 OpenAI입니다.

[00:39] 우리 Dev Day 웹사이트에는 AI가 있어야 합니다.

[00:42] 그래서 우리가 함께 구축할 것은

[00:43] Agent Kit으로 구동되는 에이전트입니다

[00:45] 바로 이 사이트 안에 배포될 것입니다.

[00:48] 그리고 이것을 흥미롭게 만들기 위해

[00:49] 저는 8분의 시간을 주고

[00:51] 여러분 앞에서 바로 여기서 에이전트를 구축하고

[00:53] 배포하겠습니다.

[00:57] 에이전트를 구축하는 것이 얼마나 어려운지

[00:59] 방금 들으셨죠. 그래서 이것은 좀

[01:01] 도전적인 일이 될 것입니다. 그리고

[01:02] 정직하게 하기 위해 지금 시계를 시작하겠습니다.

[01:05] 시계가 돌아가고 있습니다. 그래서 저는

[01:07] OpenAI 플랫폼의 워크플로 빌더에서 시작하고 있습니다.

[01:09] 그리고 코드로 시작하는 대신

[01:11] 실제로 노드들을 시각적으로 연결할 수 있습니다.

[01:13] Agent Builder는 정말

[01:15] 복잡한 워크플로를 쉽고 시각적인

[01:17] 방식으로 모델링하는 데 도움을 줍니다. 우리가

[01:20] 에이전트를 구축하면서

[01:21] 학습한 공통 패턴들을 사용해서 말입니다. 여기 왼쪽에는

[01:23] 이미 공통 구성 요소들을

[01:25] 추출해 놓았습니다. 예를 들어, 파일

[01:27] 검색과 MCP, 가드레일, 휴먼 인 더

[01:30] 루프, 그리고 다른 논리적 노드들 같은 도구들입니다.

[01:32] 오늘은 두 개의 전문화된

[01:33] 에이전트를 사용하는 워크플로를

[01:35] 구축할 계획입니다. 첫 번째는 세션

[01:37] 에이전트로, 일정에 대한 정보를

[01:39] 반환할 것이고, 두 번째는

[01:40] 더 일반적인 개발 정보 에이전트입니다.

[01:43] 그래서 분류 에이전트로 시작해서

[01:46] 들어오는 메시지의 유형을 라우팅하고

[01:48] 분류하는 데 도움을 줄 것입니다,

[01:49] 특정 세션에 대해 묻는 것인지

[01:51] 더 일반적인 것인지 말입니다. 그리고

[01:53] 그다음 if else 노드를 추가해서

[01:56] 해당 분류자를 기반으로 동작을 라우팅합니다.

[01:59] 다음으로, 세션 에이전트를 생성하겠습니다.

[02:01] 여기서 에이전트를

[02:03] 노드를 드래그 앤 드롭하겠습니다. 이것을 세션 에이전트라고 부르겠습니다.

[02:07] 세션에 대한 정보를 가져오는

[02:09] 컨텍스트를 제공하겠습니다.

[02:12] 그리고 여기에 다양한 도구들을

[02:14] 추가할 수 있습니다. 오늘 저는 이미

[02:16] 세션에 대한 모든 정보가 담긴 문서를

[02:18] 가지고 있습니다. 그래서 단순히

[02:20] 그것을 넣겠습니다. 이것을 세션이라고 부르고

[02:23] 연결하겠습니다. 이제 이 에이전트는

[02:25] 제 질문에 답하는 데 필요한 모든 정보를 가지고 있습니다.

[02:28] 하지만 일정을 보여주는 것도 재미있고

[02:30] 시각적으로 흥미로워야 합니다,

[02:31] 단순한 텍스트가 아니라 말입니다. 그래서

[02:33] 위젯도 만들겠습니다. 저는

[02:35] 위젯 빌더로 이동하겠습니다. 여기서

[02:37] 처음부터 위젯을 만들 수 있습니다.

[02:40] 갤러리를 둘러보며 다른 위젯들에 대해 배우고

[02:42] 재사용할 수 있습니다. 하지만 오늘은

[02:44] 실제로 이미 이 사용 사례에 대한

[02:46] 위젯을 디자인해 놓았습니다. 이 경우

[02:48] Fro를 위한 온보딩 세션 위젯입니다,

[02:51] 회장 주변에서 볼 수 있는

[02:52] Dev Day 친구들 중 한 명으로, 101 온보딩을 진행하고 있습니다

[02:54] 골든 게이트 파크에서의 세션입니다.

[02:57] 이제 이걸 다운로드하고

[03:00] 우리 에이전트로 돌아가 보겠습니다.

[03:04] 우리 에이전트로요.

[03:06] 그냥 첨부하면 되는데, 제가 다운로드를

[03:09] 클릭하지 않은 것 같네요. 다시 돌아가서

[03:11] 실제로 버튼을 클릭해 보겠습니다.

[03:14] 다운로드.

[03:18] 됐네요.

[03:20] 좋습니다. 이제 돌아가서 방금 만든

[03:22] 세션 에이전트의 출력 형식으로

[03:24] 첨부해 보겠습니다. 여기에 놓고요.

[03:27] 미리보기로 올바른 위젯이 추가되었는지

[03:28] 확인할 수 있고 모든 게

[03:30] 준비되었습니다. 이제 이 세션 에이전트는

[03:32] 완성되었습니다. 다음으로는

[03:34] 일반적인 개발자 데이 에이전트를 만들어 보겠습니다.

[03:36] 다시 한번 에이전트 노드를 끌어와서

[03:39] 이걸 개발자 데이 에이전트라고 부르겠습니다.

[03:42] 다시 한번 이 에이전트가 무엇을 하는지

[03:44] 컨텍스트를 제공하겠습니다. 그리고

[03:46] 프로그의 스타일로 말하게 해서

[03:48] 이 날과 정말 브랜드에 맞게 만들어 보겠습니다.

[03:51] 다시 파일을 추가하겠습니다.

[03:54] 이 날에 대한 모든 정보가 담긴

[03:55] 파일이 있습니다.

[03:57] 이걸 개발자 데이라고 부르겠습니다.

[04:00] 첨부합니다.

[04:02] 이 에이전트도 준비되었네요.

[04:04] 여기에 연결하겠습니다. 이제

[04:06] 몇 분 더 시간이 있는 것 같으니

[04:08] 미리 구축된 가드레일 중 하나로

[04:10] 추가 보안을 넣어보겠습니다.

[04:12] 에이전트를 구축할 때 가장 중요한 것 중 하나는

[04:13] 그들을 신뢰할 수 있게 하는 것입니다.

[04:15] 가드레일은 그런 신뢰를 가질 수 있도록 도와주며

[04:17] 환각 현상으로부터 보호하고

[04:18] 조정 기능을 추가하며

[04:20] 개인정보를 차단합니다. 이 경우에는 이미

[04:23] 미리 구축된 가드레일이 몇 개 있습니다.

[04:25] 개인정보 보호용으로 하나를 켜고

[04:28] 이름도 포함시켜서

[04:30] 그 동작을 쉽게 확인할 수 있도록 하겠습니다.

[04:32] 이걸 워크플로우 시작 부분에 연결해서

[04:34] 프로그가 개인정보로부터 정말 잘

[04:36] 보호받을 수 있도록 하겠습니다. 그리고

[04:40] 이런 정보가 전달될 때를 처리하기 위한

[04:43] 추가 에이전트를 더하겠습니다.

[04:46] 다시 한번 일관성을 유지하기 위해

[04:48] 프로그의 스타일로 말하게 하고

[04:51] 민감한 정보가 포함된 질문에는

[04:53] 도움을 줄 수 없다는 것을 상기시키며

[04:54] 컨텍스트를 제거하도록 하겠습니다.

[04:57] 좋습니다. 이제 이 워크플로우는

[04:59] 준비되었다고 생각합니다. 또한

[05:01] 최종 사용자에게 무엇이 표시될지 결정하는

[05:03] 출력을 구성할 수도 있습니다.

[05:05] 이 경우 파일 검색 소스를

[05:08] 끌 수도 있습니다. 좀 더

[05:10] 내부적인 것이라면요. 그리고 이게 다인 것 같네요.

[05:12] 테스트해 보겠습니다. 에이전트 빌더에서

[05:14] 직접 미리보기할 수 있습니다.

[05:17] 여기서 에이전트 구축에 대해 배우려면 어떤 세션에

[05:21] 참석해야 하는지 물어볼 수 있습니다.

[05:25] 이 메시지가 방금 만든

[05:26] 워크플로우를 통해 이동하는 것을 볼 수 있습니다.

[05:28] 가드레일을 확인하고, 의도를 분류하고

[05:30] 방금 추가한 세션 파일에서

[05:33] 정보를 가져옵니다. 올바른

[05:35] 세션을 찾고, 제가 추가한

[05:37] 위젯을 사용하고, 그리고

[05:39] 11시 15분 제임스와 로한의 대규모 에이전트

[05:41] 오케스트레이션이 이에 대해 더 배우기 위해

[05:43] 제가 가야 할 최고의

[05:45] 세션이라고 결정하는 것을 봅니다. 그리고 몇 번의

[05:47] 개구리 소리를 듣는데, 이건 실제로

[05:49] 프로그가 저에게 말하고 있고 개구리 소리를 내고 있는 거예요.

[05:51] 저에게 말이죠. 좋아, 이 에이전트는 괜찮아 보이네요.

[05:53] 시간을 봐야겠어요. 음,

[05:56] 우리는 방금 도구를 사용해서 몇 가지 특화된

[05:57] 에이전트를 만들었습니다. 가드레일을 추가했고,

[05:59] 위젯을 사용해서 커스터마이징했고

[06:01] 미리보기에서 워크플로우를 테스트해봤습니다.

[06:02] 아직 하지 않은 한 가지는

[06:04] 완전한 평가입니다. 그리고 이것도

[06:06] 에이전트 빌더에서 직접 할 수 있어서

[06:08] 라이브로 나가기 전에 모든 것이

[06:10] 정확히 예상한 대로 동작하는지 확인할 수 있습니다.

[06:12] 음, 하지만 지금 거대한 시계가 저를 쫓아오고

[06:14] 개발자 데이가 기다리고 있어서

[06:16] 이걸 배포해보겠습니다.

[06:17] 여기서 배포를 누르고

[06:21] 이걸 ask froge라고 하겠습니다. 배포를 누르고.

[06:25] 음, 이제 완전히 배포된

[06:27] 프로덕션 에이전트가 생겼습니다.

[06:29] 직접 실행할 수 있는 워크플로우 ID가 있어요.

[06:30]

[06:35] 오른쪽에는

[06:38] 오른쪽에는 코드 내보내기도 있어서

[06:40] 제 환경에서, 제 서버에서

[06:42] 실행하고 싶다면 사용할 수 있습니다. 하지만

[06:44] 이건 꽤 많은 코드를 작성해야 하는 걸 볼 수 있어요.

[06:46] 그래서 저는 방금 만든

[06:48] 워크플로우 ID를 사용하고

[06:50] 제 사이트로 넘어가겠습니다.

[06:52] 여기 제 개발자 데이 사이트에서

[06:55] 먼저 챗킷 세션을 만들어서

[06:57] 방금 만든 워크플로우를 사용하겠습니다.

[06:59] 워크플로우 ID를 간단히 넣고

[07:01] 저희가 방금 서버에서 만든

[07:05] 클라이언트 시크릿을 사용해서

[07:07] 챗킷 리액트 컴포넌트를 추가하겠습니다.

[07:09] 그리고 시각적 커스터마이징도 추가해서

[07:11] 다시 진짜 개구리 테마로 만들겠습니다.

[07:13] 이 경우에는 ask froge라고 할 거고

[07:14] 플레이스홀더에서 계속 울음소리를 낼 것입니다.

[07:16] 음, 그리고 개구리 전용 색상과

[07:18] 시작 프롬프트를 가질 것입니다.

[07:20]

[07:23] 이 개구리 채팅을 바텀 시트에 추가해서

[07:26] 페이지 하단에서 올라올 것입니다.

[07:27] 그리고 마지막으로 사이트 상단에

[07:29] ask froge 링크를 추가해서

[07:31] 웹사이트에서 정말 눈에 잘 띄도록 하겠습니다.

[07:33] 자, 사이트로 돌아가보죠.

[07:35] 여기 있네요. 사이트 상단에 ask froge가 있습니다.

[07:38] 테스트해보죠. 자, 어떤

[07:40] 세션에

[07:42] 참석해야 에이전트 구축에 대해 배울 수 있을까요?

[07:47] 그리고 다시, 이것은 우리가 방금

[07:49] 만든 정확히 같은 워크플로우를 실행하고 있어서

[07:50] 가드레일을 확인하고

[07:52] 메시지를 분류하고, 파일 검색에서

[07:55] 도구를 가져와서, 우리가 설계한 위젯을 사용하고

[07:57] 그리고 다시

[07:59] 대규모 에이전트 조율을 결정하는 것이

[08:01] 제가 가야 할 올바른 세션이라고 하고

[08:04] 개구리 스타일로 계속 울음소리를 냅니다.

[08:05] 좋아, 훌륭해요. 해냈습니다.

[08:07]

[08:14] 에이전트가 준비됐습니다. 시계를 멈출 수 있어요.

[08:16] 에이전트가 49초를 남기고 준비됐습니다.

[08:18] 음, 그리고 저는 비주얼 빌더에서

[08:21] 이 에이전트를 직접 계속 개선해나갈 수 있고

[08:24] 코드 변경 없이 제 사이트에

[08:26] 이러한 변경사항을 직접 배포할 수 있습니다.

[08:28] 여기에는 새로운 도구 추가, 음,

[08:30] 다른 사용 사례를 위한 새로운 위젯 추가,

[08:32] 새로운 가드레일 추가도 포함되고

[08:34] 클라이언트 사이드 도구에 연결해서

[08:38] 제 웹사이트에서 직접 액션을 취할 수도 있습니다.

[08:42] 음, 그래서 단 몇 분 만에

[08:44] 에이전트 워크플로우를 시각적으로 설계했습니다.

[08:46] 도구와 위젯을 추가했고, 미리보기했고,

[08:49] 배포하고, 테스트했고, 이제

[08:51] 여러분 모두가 사용할 수 있습니다.

[08:53] 이건 실제로 지금 여러분의 개발자 데이 사이트에서 라이브로 되어 있습니다.

[08:58] 배지를 탭하시면

[08:59] 보고 사용할 수 있을 것이고, 음

[09:03] 여러분에게 가장 좋은 세션을 찾을 수 있을 거예요.

[09:05] 그래서 저희는 이걸 사용하고

[09:06] 개구리를 만나는 것을 기대하고 있고

[09:09] 또한 여러분이 이제 에이전트를 사용해서

[09:10] 구축할 수 있을 모든 새로운 경험들을 보기를 기대하고 있습니다.

[09:13] 감사하고 샘에게 돌아가겠습니다.