Uploaded May 2026 | Updated September 2026, 3 weeks ago
Try Oxylabs: oxylabs.io/leon
Use code LEON for 20% off when you upgrade.
Free trial: up to 2,000 scraping results, no credit card required.
๐ Free resources: source code, prompts, workflows + peer discussion: skool.com/leonvanzyl
๐งช Agentic Labs: AI coding courses, live Q&A, weekly builder challenges, direct access to me + a serious builder community: skool.com/agentic-labs
Build a real full-stack AI app with Claude Code using a pro AI engineering workflow instead of one prompt at a time. In this Claude Code advanced workflow tutorial, I show how to set up reusable project skills, lock in a design system, generate detailed specs, use the Goal command, create checkpoints, run parallel Agent View sessions, perform security audits, improve the UI, and build an AI second brain app with Next.js, OpenRouter, Oxylabs Web Scraper API, authentication, article scraping, AI summaries, tags, and end-to-end testing.
Create Agentic App Skill: https://www.skills.sh/leonvanzyl/agentic-coding-starter-kit/create-agentic-app
Oxylabs Web Scraper API docs: developers.oxylabs.io
Oxylabs Trust Center: trust.oxylabs.io
โฑ๏ธ CHAPTERS:
00:00 Claude Code Pro Workflow
00:29 Reusable Project Skill
03:29 Design System Setup
08:37 Planning Mode & Specs
12:38 Goal Command Build Loop
14:12 Oxylabs API Setup
16:37 Agent View Parallel Agents
18:43 Final AI App Demo
Business & sponsorship enquiries: leon@cognaitiv.ai
#claudecode #agenticcoding #vibecoding
Try Oxylabs: oxylabs.io/leon
Use code LEON for 20% off when you upgrade.
Free trial: up to 2,000 scraping results, no credit card required.
๐ Free resources: source code, prompts, workflows + peer discussion: skool.com/leonvanzyl
๐งช Agentic Labs: AI coding courses, live Q&A, weekly builder challenges, direct access to me + a serious builder community: skool.com/agentic-labs
Build a real full-stack AI app with Claude Code using a pro AI engineering workflow instead of one prompt at a time. In this Claude Code advanced workflow tutorial, I show how to set up reusable project skills, lock in a design system, generate detailed specs, use the Goal command, create checkpoints, run parallel Agent View sessions, perform security audits, improve the UI, and build an AI second brain app with Next.js, OpenRouter, Oxylabs Web Scraper API, authentication, article scraping, AI summaries, tags, and end-to-end testing.
Create Agentic App Skill: https://www.skills.sh/leonvanzyl/agentic-coding-starter-kit/create-agentic-app
Oxylabs Web Scraper API docs: developers.oxylabs.io
Oxylabs Trust Center: trust.oxylabs.io
โฑ๏ธ CHAPTERS:
00:00 Claude Code Pro Workflow
00:29 Reusable Project Skill
03:29 Design System Setup
08:37 Planning Mode & Specs
12:38 Goal Command Build Loop
14:12 Oxylabs API Setup
16:37 Agent View Parallel Agents
18:43 Final AI App Demo
Business & sponsorship enquiries: leon@cognaitiv.ai
#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)

