Uploaded October 2025 | Updated September 2026, 3 weeks ago
๐ Access ALL video resources & get personalized help in my community: skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
Learn how to use OpenAI's Agent Builder in this comprehensive crash course. The Agent Builder makes it easy to create complex agentic workflows using a visual canvas interface. You'll discover how to build customer-facing assistants, implement human-in-the-loop approvals, and create a deep research agent that performs web searches and generates detailed reports. This tutorial covers the Agent Kit ecosystem including ChatKit for embedding agents into applications, state management, while loops, and integration with Next.js projects using the Agent SDK.
๐ ACCESS AGENT BUILDER:
platform.openai.com/agent-builder
๐ CHATKIT DOCUMENTATION:
platform.openai.com/docs/guides/chatkit
๐ CLAUDE CODE MASTERCLASS:
youtu.be/50tzzaOvcO0
๐ SUPPORT THE CHANNEL:
โ Buy me a coffee: buymeacoffee.com/leonvanzyl
๐ฐ PayPal: paypal.com/ncp/payment/EKRQ8QSGV6CWW
๐ CONNECT:
๐ Subscribe for weekly AI automation tutorials
๐ฆ Follow on Twitter: https://x.com/leonvz
โฐ TIMESTAMPS:
00:00 - OpenAI Agent Builder introduction
00:43 - What Agent Builder is (and isn't) - Not a Zapier killer
01:41 - Agent Kit components: Builder, Connector Registry, ChatKit
02:38 - Creating your first workflow and canvas overview
03:35 - Renaming and managing workflows
04:11 - Understanding the Start node and Agent node
05:00 - End node and structured output setup
06:50 - Building your first agent with system prompts
08:00 - Adding web search tools to agents
09:20 - Publishing workflows and ChatKit integration
10:42 - Setting up OpenAI API keys and environment variables
11:47 - Using agentic coding tools (Claude Code, Bolt, Lovable)
13:29 - Embedding agents into Next.js applications
14:00 - Guard rails node for content moderation
15:03 - Building a deep research agent (advanced project)
16:00 - State management and variables
17:16 - Keyword agent with JSON structured output
19:03 - While loops for iteration
22:00 - Common Expression Language (CEL) basics
24:00 - Dynamic keyword processing in loops
26:00 - Human-in-the-loop approval workflow
27:20 - Final report consolidation agent
#agentbuilder #openai #aiautomation
๐ Access ALL video resources & get personalized help in my community: skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
Learn how to use OpenAI's Agent Builder in this comprehensive crash course. The Agent Builder makes it easy to create complex agentic workflows using a visual canvas interface. You'll discover how to build customer-facing assistants, implement human-in-the-loop approvals, and create a deep research agent that performs web searches and generates detailed reports. This tutorial covers the Agent Kit ecosystem including ChatKit for embedding agents into applications, state management, while loops, and integration with Next.js projects using the Agent SDK.
๐ ACCESS AGENT BUILDER:
platform.openai.com/agent-builder
๐ CHATKIT DOCUMENTATION:
platform.openai.com/docs/guides/chatkit
๐ CLAUDE CODE MASTERCLASS:
youtu.be/50tzzaOvcO0
๐ SUPPORT THE CHANNEL:
โ Buy me a coffee: buymeacoffee.com/leonvanzyl
๐ฐ PayPal: paypal.com/ncp/payment/EKRQ8QSGV6CWW
๐ CONNECT:
๐ Subscribe for weekly AI automation tutorials
๐ฆ Follow on Twitter: https://x.com/leonvz
โฐ TIMESTAMPS:
00:00 - OpenAI Agent Builder introduction
00:43 - What Agent Builder is (and isn't) - Not a Zapier killer
01:41 - Agent Kit components: Builder, Connector Registry, ChatKit
02:38 - Creating your first workflow and canvas overview
03:35 - Renaming and managing workflows
04:11 - Understanding the Start node and Agent node
05:00 - End node and structured output setup
06:50 - Building your first agent with system prompts
08:00 - Adding web search tools to agents
09:20 - Publishing workflows and ChatKit integration
10:42 - Setting up OpenAI API keys and environment variables
11:47 - Using agentic coding tools (Claude Code, Bolt, Lovable)
13:29 - Embedding agents into Next.js applications
14:00 - Guard rails node for content moderation
15:03 - Building a deep research agent (advanced project)
16:00 - State management and variables
17:16 - Keyword agent with JSON structured output
19:03 - While loops for iteration
22:00 - Common Expression Language (CEL) basics
24:00 - Dynamic keyword processing in loops
26:00 - Human-in-the-loop approval workflow
27:20 - Final report consolidation agent
#agentbuilder #openai #aiautomation


![How to Add Grok 4 to n8n AI Agents (+Vision and Real-Time Search)
๐ Access ALL video resources & get personalized help in my community:
https://www.skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
Learn how to integrate Grok 4 with n8n workflows in this complete step-by-step tutorial. Well show you how to set up Grok 4 API credentials, create AI agents, and compare Grok 4s coding performance against Claude Sonnet through a practical coding challenge. Discover Grok 4s multimodal capabilities including vision processing for image analysis and built-in web search features that provide real-time information with citations.
๐ Support My Channel:
Buy me a coffee โ : https://www.buymeacoffee.com/leonvanzyl
PayPal Donation: https://www.paypal.com/ncp/payment/EKRQ8QSGV6CWW
๐ Useful Links:
Sign up for n8n Cloud: https://n8n.partnerlinks.io/f7f19w3vrhin
n8n Playlist: https://www.youtube.com/playlist?list=PL4HikwTaYE0GrWQOYuTL3YvHLMMwOjn7O
๐ TIMESTAMPS:
00:00 - Introduction to Grok 4 and n8n Integration
00:29 - Setting Up x.ai API Account and Credentials
01:44 - Creating n8n Workflow with Grok 4 Agent
02:48 - Grok 4 vs Claude Sonnet Coding Challenge
05:00 - Testing Claude Sonnet App Results
07:15 - Testing Grok 4 App Performance and Fixes
11:26 - Adding Vision Capabilities to Grok 4 Workflows
14:25 - Implementing Built-in Web Search Features
16:08 - Final Results and Conclusions
VISION JSON
{
messages: [
{
role: user,
content: [
{
type: text,
text: What do you see in this image?
},
{
type: image_url,
image_url: {
url: https://images.pexels.com/photos/32507137/pexels-photo-32507137.jpeg,
detail: high
}
}
]
}
],
model: grok-4
}
LIVE SEARCH JSON
{
messages: [
{
role: user,
content: What is the latest news from openai?
}
],
model: grok-4,
search_parameters: {
mode: auto
}
}
#n8n #aiagents #grok4 How to Add Grok 4 to n8n AI Agents (+Vision and Real-Time Search)](https://i.ytimg.com/vi/zo26u39LIbE/mqdefault.jpg)

