Building AI Agents in JavaScript with Agent Builder and ChatKit

Building AI agents is rapidly evolving, with innovative tools launching constantly. During this session, we will help us explore how JavaScript developers can harness OpenAI's Agent Builder and ChatKit to craft intelligent agents. You'll learn how to:

- Build and embed natural-language interfaces directly into modern JavaScript applications
- Connect agents to real-world APIs and business workflows effortlessly

Transcript

1. Building AI Agents in JavaScript with Agent Builder and ChatKit Aleksandar Simovic
2. “AI + automation could deliver 10× productivity gains.” DeepMind (2024) / Earnings Call
3. Selling AI Agent Building
4. Reality of AI Agent Building
5. Agent Builder 101 (Beginner Friendly)
6. What is Agent Builder • Visual- fi rst canvas to compose agents, tools, logic, and guardrails • Start from templates • Run previews Released on the 6th October (a month ago)
9. Where it fi ts (AgentKit) • AgentKit = • Agent Builder (visual) + • ChatKit (UI embed) + • Agents SDK (code) + • Responses API (foundation)
10. Mental Model • Nodes • Agent • Tool • If/Else • Guardrail • Return • Edges • Control fl ow • Preview page • Run + Inspect
11. Why use it • Faster prototyping via templates • Preview runs with traces • Export work fl ow to code for production • Shared primitives with Responses API/SDK
12. Live demos (tonight) • Hello‑World Agent (no tools) • Web‑Search Q&A (built‑in tool) • (Optional) File‑Summary in Preview (attach a fi le)
13. Goal 1: Say hello
14. Demo 1: Hello ‑ World (Non ‑ Streaming)
15. Demo 1: Streaming Variant
17. Demo 1: Full on Streaming Variant
19. Why streaming? • Perceived speed, users get responses in <300ms • Progressive Output, UX - live typing • Scalability - Memory e ff i cient, avoiding large payloads
20. Demo 1: Same Flow in Agent Builder
21. Demo 1: Same Flow in Agent Builder
22. Export to Code • When stable: Export → TypeScript/Python → same semantics as visual fl ow • Move to CI/CD.
23. Tools
24. Goal 2: Web Search
25. Demo 2: Web ‑ Search Q&A • Goal: live‑fresh answer with sources and enable web_search tool in code and in the Builder. • Ask: “One recent JS community highlight in Belgrade; cite sources.”
26. Demo 2: Web ‑ Search (Runnable Node)
27. Demo 2: Same Flow in Agent Builder • Start - Agent (enable Web Search) - Return • Prompt: “Answer and include clickable sources.” • Preview and run sample query.
28. Demo 2: Same Flow in Agent Builder
29. Traces & Preview • Preview runner captures messages, tool calls, and outputs per node • Use them to debug before shipping.
31. Safety Basics and Guardrails • Add Guardrail node(s): • PII block • jailbreak detection • moderation • Fail closed on violations in prod; log redact in traces.
32. Demo 3: Web-search guardrails • Goal: live‑fresh answer with sources and enable web_search tool in code and in the Builder with Guardrails • Ask: “One recent JS community highlight in Belgrade; cite sources.”
33. Demo 3: Same Flow in Agent Builder
34. Optional Demo 4: File ‑ Summary in Preview • Builder only (code as a simple preview tonight): • Start - Agent (enable File Search) - Return • Preview - attach a PDF - “Summarize with 3 bullets + title.”
35. Optional Demo 4: File ‑ Summary in Preview
36. Demo 4: File ‑ Summary in Preview (Code)
37. Demo 5: User Approval
38. Chat Kit
39. ChatKit — The UI for OpenAI Agents • ChatKit = embeddable chat UI for OpenAI agents • Powers the Agent Builder Preview and production widgets • Handles: • Chat layout, message bubbles, typing indicators • File uploads (PDFs, docs, images) • Tool calls ( fi le_search, external APIs, etc.) • You point it at an Agent Builder agent (by work fl ow ID) Agent Builder de fi nes the brain. ChatKit is the face your users interact with.
40. Why use ChatKit instead of building your own UI? • Zero-to-prod quickly • No need to design chat UIs, tool-call fl ows, or fi le-upload UX • Consistent with Agent Builder Preview • What you see is what users see • One embed handles layout, edge cases, error states, and updates
41. From Builder to Embed 1. Build & preview in Builder 2. Export or bind a work fl ow id 3. Issue short‑lived client secret on server 4. Mount ChatKit; test thread continuity
42. Embedding a Chat UI (ChatKit)
43. ChatKit Minimal Server (Next.js) (show in code)
44. Summary • What Agent Builder is and where it fi ts • How to run Hello‑World & Web‑Search, File Search demos locally • How to preview and export from Builder • How to embed a basic chat UI with ChatKit
45. Links • Agent Builder: https://platform.openai.com/docs/guides/agent-builder • ChatKit: https://platform.openai.com/docs/guides/chatkit#overview
46. Thank you @simalexan https://simalexan.com https://simalexan.com/posts/wardley-mapping-with-kiro/