Build an AI Design Agent with Next.js 16, Gemini & Inngest (Google Stitch Clone)

Description

An AI design agent that turns a single prompt into a full multi-screen app — using Next.js 16, the Vercel AI SDK, Gemini 3.0 Flash, and Inngest. In this video, I walk through the full build: real-time AI streaming, an infinite zoomable canvas, multi-screen generation with consistent design systems, and the architectural decisions that make it all feel instant. 🔗 LINKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ► Source code: https://github.com/Atiqullah-Naemi/stick ► Live demo: https://stick-coral.vercel.app/ ⭐ STAR THE REPO if this helped you build something cool. ⏱ TIMESTAMPS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 00:00 Demo — what we're building 05:44 Project setup & dependencies 14:07 Better auth setup 34:22 Project Id page 01:39:06 Project Id API route 02:52:10 Inngest setup 04:06:06 Agent panel , zoom control 04:46:10 Inngest update function and update route 05:14:53 Switch between mobile and web app 05:44:10 Delete page and code view 06:05:10 Deployement 🛠 TECH STACK ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - Next.js 16 (App Router, Server Actions) - TypeScript - Vercel AI SDK 6 + AI Gateway - Gemini 3.0 Flash - Inngest (background jobs) - Prisma + Postgres (Neon) - Better Auth - Tailwind CSS 4 - shadcn/ui - React Zoom Pan Pinch (canvas) - React-RND (movable frames) - Shiki (code highlighting) 📚 WHAT YOU'LL LEARN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✓ Architecting long-running AI tasks with Inngest ✓ Streaming AI output to your frontend without WebSockets ✓ Rendering AI-generated HTML safely inside an iframe ✓ Detecting iframe height correctly (this took me 3 days) ✓ Building an infinite, zoomable, pannable canvas in React ✓ Structured outputs with the Vercel AI SDK ✓ Real-time database polling that doesn't fall over ✓ Authenticating users with Better Auth + Prisma adapter ✓ Production deployment patterns 💬 LET'S CONNECT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ► Bluesky: https://bsky.app/profile/programingwithatiq.bsky.social ► TikTok: https://www.tiktok.com/@programmingwithatiq ► GitHub: https://github.com/Atiqullah-Naemi 📖 RESOURCES MENTIONED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - Google Stitch: https://stitch.withgoogle.com - Inngest docs: https://www.inngest.com/docs - Vercel AI SDK: https://sdk.vercel.ai - Better Auth: https://better-auth.com - Shiki: https://shiki.style - React-RND: https://github.com/bokuweb/react-rnd #nextjs #ai #typescript #fullstack #buildinpublic If you watched this far, you're a real one. Drop a comment letting me know what you're building.