Uploaded December 2025 | Updated September 2026, 3 weeks ago
Build a POWERFUL AI Image Generation and Editing App using Nano Banana Pro and Claude Code (Opus 4.5).
๐ Access ALL video resources & get personalized help in my community: skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
Try the app yourself: https://nano-banana-pro-prompt-generator.vercel.app
๐ฌ 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
In this video you will learn how to build a full stack AI image generation app using Opus 4.5 as your coding agent and Nano Banana Pro - the powerful new image model from Google. You will discover how to create consistent characters with AI by building a prompt generator that helps users craft detailed prompts for locations, lighting, camera settings, poses, and more. This complete tutorial takes you from project setup through production deployment on Vercel, including Google OAuth authentication, Postgres database integration, and Vercel Blob storage for image management.
โฐ TIMESTAMPS:
0:00 Opus 4.5 and Nano Banana Pro intro
0:30 Nano Banana Pro consistent character demo
1:16 AI prompt builder app overview
2:43 Google AI Studio API key setup
3:34 Next.js boilerplate project setup
5:46 Docker Postgres database setup
8:03 Google OAuth authentication config
9:28 Claude Code planning mode
11:00 Three column UI with AI agent
17:35 Prompt builder implementation
36:00 AI image generation testing
36:21 Git checkpoints and commits
37:27 GitHub repository setup
38:33 Vercel production deployment
39:16 Neon Postgres database creation
41:17 Vercel Blob storage setup
43:13 Production environment variables
43:33 Avatar creation and final test
44:55 Wrap up
#claudecode #nanobananapro #vibecoding
Build a POWERFUL AI Image Generation and Editing App using Nano Banana Pro and Claude Code (Opus 4.5).
๐ Access ALL video resources & get personalized help in my community: skool.com/agentic-labs/about?ref=3fd61190e13d426dbf4f3b38adc7de69
Try the app yourself: https://nano-banana-pro-prompt-generator.vercel.app
๐ฌ 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
In this video you will learn how to build a full stack AI image generation app using Opus 4.5 as your coding agent and Nano Banana Pro - the powerful new image model from Google. You will discover how to create consistent characters with AI by building a prompt generator that helps users craft detailed prompts for locations, lighting, camera settings, poses, and more. This complete tutorial takes you from project setup through production deployment on Vercel, including Google OAuth authentication, Postgres database integration, and Vercel Blob storage for image management.
โฐ TIMESTAMPS:
0:00 Opus 4.5 and Nano Banana Pro intro
0:30 Nano Banana Pro consistent character demo
1:16 AI prompt builder app overview
2:43 Google AI Studio API key setup
3:34 Next.js boilerplate project setup
5:46 Docker Postgres database setup
8:03 Google OAuth authentication config
9:28 Claude Code planning mode
11:00 Three column UI with AI agent
17:35 Prompt builder implementation
36:00 AI image generation testing
36:21 Git checkpoints and commits
37:27 GitHub repository setup
38:33 Vercel production deployment
39:16 Neon Postgres database creation
41:17 Vercel Blob storage setup
43:13 Production environment variables
43:33 Avatar creation and final test
44:55 Wrap up
#claudecode #nanobananapro #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)

