OpenAI Agent Builder (AgentKit + ChatKit) Tutorial: RAG, MCP & Website Embed

Build powerful AI agents with OpenAI Agent Builder + ChatKit—fast. In this live demo, Rabih and Shajeel show how to design node-based workflows, add guardrails, plug in MCP tools (Calendar, YouTube, etc.), ground answers with File Search/RAG, and embed a fully branded chat widget on your site. If you’re shipping SaaS, this is your unfair advantage. Learn more from Shajeel: Website → https://www.shajeelafzal.com/ · YouTube → https://www.youtube.com/c/LearnwithShajeel 🔥 What you’ll learn Agent Builder vs. old-school chatbots (UI, state, storage, RAG, tools—all bundled) Guardrails, branching, and model choice (save cost with GPT-4.0 mini) Web search + MCP actions (deterministic tool calls) File Search/RAG with YouTube transcripts (no custom vector DB needed) ChatKit Widget Builder: brand it, copy code, embed anywhere Cost controls, auth, and usage limits so you don’t get burned 👇 Timestamps (YouTube chapters) 00:21 Intro: Who is Shajeel & today’s goal 01:36 Old chatbots vs Agent Builder (what changed) 03:32 Live look: node workflow (start → rewrite/classify → route) 05:43 Guardrails & simple logic checks 07:19 Configuring the Agent (system prompt, history, model) 09:29 Tools & MCP overview (when the agent calls tools) 12:12 Live preview: following instructions + chat history 14:12 Turn on web search (real-time knowledge) 15:43 Quick test: latest news/price lookup 16:34 Why MCPs matter vs scraping; N8N vs agents debate 21:11 Publish & embed: workflow ID + domain lock 22:33 ChatKit Widget Builder: brand colors, fonts, prompts 24:58 Grab-&-go embed code (copy/paste) 28:48 Beyond text: UI widgets (agenda, weather, confirmations) 31:52 ChatKit World demo (interactive elements) 34:07 Real business ideas (restaurants, bookings, menus) 35:11 Shipping the on-site chatbot (v2 page) 36:21 Sources, retry, attachments, new chat 37:05 RAG in minutes: add File Search + YouTube transcripts 40:25 Grounded Q&A from Rabih’s videos (works!) 41:45 When to use a YouTube MCP for auto-transcripts 43:37 More nodes: jailbreak protection, PII filters, loops, approvals 45:17 Quick recap: build → publish → embed → customize 46:07 Cost & abuse: auth, metering, paywalls 47:54 Wrap-up & where to follow Shajeel 🧩 Resources mentioned OpenAI Agent Builder & ChatKit docs → https://platform.openai.com/docs ChatKit Widget Builder & Playground → https://platform.openai.com/docs/guides/chatkit Example MCPs (Calendar, YouTube transcripts) → https://github.com/modelcontextprotocol/servers Shajeel’s links: Website → https://www.shajeelafzal.com/ · YouTube → https://www.youtube.com/c/LearnwithShajeel 💡 Who this is for SaaS founders, solo devs, agencies, and product teams who want to ship a sellable, on-brand chatbot with actions, RAG, and analytics—in hours, not weeks. 📌 Try it on your site Build your agent (nodes, tools, file search) Publish → copy workflow ID Brand it in Widget Builder → copy embed code Paste into your site (Next.js, WordPress, whatever) ⚠️ Pro tip: put it behind login and meter tokens per user to control cost. If this helped, like, subscribe, and comment what you want us to build next (Calendars? CRM? Shopify?). #OpenAI #AgentBuilder #ChatKit #AgentKit #MCP #RAG #SaaS #AIAgents #NextJS #WidgetBuilder #VectorSearch #FileSearch #N8N #NoCode #LowCode