Uploaded December 2025 | Updated September 2026, 3 weeks ago
๐ Access ALL video resources & get personalized help in my community:
skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
๐ฌ My AI voice-to-text software (Wispr Flow): wisprflow.ai/r?LEON114
โ Buy me a coffee: buymeacoffee.com/leonvanzyl
๐ต Donate using PayPal: paypal.com/ncp/payment/EKRQ8QSGV6CWW
Learn how to vibe code a full-stack Secret Santa app from scratch using Claude Code and Cursor. This comprehensive tutorial covers the entire development workflow including project setup with the free agentic app boilerplate, AI-powered feature implementation using Claude Opus 4.5, Google OAuth authentication with BetterAuth, AI gift suggestions with OpenRouter, and production deployment to Vercel with a Neon Postgres database.
โฐ TIMESTAMPS:
00:00 - Secret Santa app overview
00:28 - Why use Claude Code over Bolt or Lovable
01:26 - Claude Opus 4.5 coding agent setup
02:53 - Agentic app boilerplate installation
04:06 - Tech stack Next.js BetterAuth OpenRouter
04:33 - Planning features with AI agent
07:01 - Create feature workflow
07:56 - Context window management tips
09:42 - Git commits and checkpoints
11:05 - GitHub repository setup
12:47 - Docker Postgres database setup
14:21 - Google OAuth credentials
16:09 - OpenRouter API key configuration
17:15 - Phase by phase implementation
18:19 - GitHub Issues project tracking
23:43 - AI code review workflow
24:44 - Testing the Secret Santa app
31:03 - AI gift suggestions feature
33:22 - UI improvements with Gemini
34:32 - Vercel production deployment
37:16 - Neon database for production
40:10 - Final testing and wrap up
#claudecode #agenticcoding #vibecoding
๐ Access ALL video resources & get personalized help in my community:
skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
๐ฌ My AI voice-to-text software (Wispr Flow): wisprflow.ai/r?LEON114
โ Buy me a coffee: buymeacoffee.com/leonvanzyl
๐ต Donate using PayPal: paypal.com/ncp/payment/EKRQ8QSGV6CWW
Learn how to vibe code a full-stack Secret Santa app from scratch using Claude Code and Cursor. This comprehensive tutorial covers the entire development workflow including project setup with the free agentic app boilerplate, AI-powered feature implementation using Claude Opus 4.5, Google OAuth authentication with BetterAuth, AI gift suggestions with OpenRouter, and production deployment to Vercel with a Neon Postgres database.
โฐ TIMESTAMPS:
00:00 - Secret Santa app overview
00:28 - Why use Claude Code over Bolt or Lovable
01:26 - Claude Opus 4.5 coding agent setup
02:53 - Agentic app boilerplate installation
04:06 - Tech stack Next.js BetterAuth OpenRouter
04:33 - Planning features with AI agent
07:01 - Create feature workflow
07:56 - Context window management tips
09:42 - Git commits and checkpoints
11:05 - GitHub repository setup
12:47 - Docker Postgres database setup
14:21 - Google OAuth credentials
16:09 - OpenRouter API key configuration
17:15 - Phase by phase implementation
18:19 - GitHub Issues project tracking
23:43 - AI code review workflow
24:44 - Testing the Secret Santa app
31:03 - AI gift suggestions feature
33:22 - UI improvements with Gemini
34:32 - Vercel production deployment
37:16 - Neon database for production
40:10 - Final testing and wrap up
#claudecode #agenticcoding #vibecoding









![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)
