OpenAI AgentKit Tutorial: Agent Builder Drag-and-Drop, ChatKit UI & MCP Integration

In this tutorial, I walk through Agent Builder's drag-and-drop interface, ChatKit for embedding agents in apps, Guardrails for safety, and evaluation tools. To learn about building MCP Servers Live, Join my free course on Maven with this link: https://maven.com/p/89571e/build-and-deploy-your-first-mcp-server-live?utm_medium=ll_share_link&utm_source=instructor CHAPTERS 0:00 Introduction to OpenAI AgentKit 2:00 Demo - YouTube Research Agent Build 3:57 Guardrails for Input/Output Safety 6:56 Classification & Branching Logic 13:52 Agent Configuration with MCP Tools 16:08 Widget Builder for Rich UI 18:56 ChatKit - Embedding Chat Interfaces 21:36 Evaluation Tools & Testing 🎯 WHAT YOU'LL LEARN ✅ Agent Builder drag-and-drop visual canvas ✅ Building agents with conditional logic and branching ✅ Integrating MCP servers for tool access ✅ Implementing Guardrails for safe agent behavior ✅ Creating custom UI widgets for rich interactions ✅ Embedding agents with ChatKit in your apps ✅ Evaluating agent performance with built-in tools ✅ Connecting to external APIs (YouTube example) 🔗 RESOURCES 📚 Agent Builder Docs: https://platform.openai.com/docs/guides/agent-builder 🛠️ Access Agent Builder: https://platform.openai.com/agent-builder 🎨 Widget Builder: https://widgets.chatkit.studio/ 💻 ChatKit Starter App: https://github.com/openai/openai-chatkit-starter-app 🎬 Full MCP Playlist: https://www.youtube.com/playlist?list=PLbERMcvt307fjBnkAD8JUfviNm814f3Zm 💡 WHAT IS AGENTKIT? OpenAI's AgentKit (announced at DevDay 2025) is a complete platform for building, deploying, and optimizing AI agents. It includes: **Agent Builder** - Visual drag-and-drop canvas for creating multi-step agent workflows - Drag-and-drop nodes (Agent, MCP, Guardrails, Classification) - Conditional branching and complex logic - Preview runs and inline testing - Full versioning and templates - Export to code (Python/TypeScript) **ChatKit** - Embeddable chat interface toolkit - Customizable chat UI for your apps - Support for text interactions - Rich UI widget rendering - Bring your own branding - Deploy agent experiences anywhere **Guardrails** - Built-in safety layer - Input/output content filtering - PII detection and masking - Jailbreak prevention - Custom safety rules - Modular and open-source **Evaluation Tools** - Measure agent performance - Step-by-step trace grading - Dataset management - Automated prompt optimization - Third-party model support - Performance analytics 🎥 THE PROJECT: YOUTUBE RESEARCH AGENT In this video, I build a YouTube research agent that: - Searches for videos using Google YouTube API - Analyzes video content and metadata - Uses guardrails to validate inputs - Implements branching logic for different queries - Renders results in rich UI widgets - Embeds the full experience in ChatKit