Chat Interface Section

Copy the prompt on this page into Lovable, Claude Code, Cursor, Codex, Replit, or Google Stitch. The generated file drops into app/chat/[id]/page.tsx: a sidebar with recent conversations, a floating character avatar header, message bubbles with distinct styles for companion and user, and a composer with emoji and voice icons. Wire to Vercel AI SDK v6 useChat for streaming responses.

Use Vercel AI SDK v6 useChat in the chat page. Create an app/api/chat/route.ts that calls your chosen model via the Vercel AI Gateway (anthropic/claude-fable-5 or openai/gpt-5.6-sol work well for conversational warmth). Pass a system prompt with the character persona, name, and personality traits. useChat handles streaming, message history state, and the loading indicator automatically.

Yes. Wire the voice icon in the composer to the Web Speech API (navigator.mediaDevices.getUserMedia) for recording and the Vercel AI SDK speech endpoint for transcription. The transcribed text drops into the message input. For voice output from the companion, use ElevenLabs v3 or the Web Speech Synthesis API to read the streamed response aloud.

A vibe coding template is a full-app scaffold you describe to an AI coding tool instead of writing from scratch. You paste the prompt into Cursor, Claude Code, Lovable, Codex, Replit, or Google Stitch, and the AI generates the correct file structure, routes, components, and design system automatically. The difference from a regular template is that you own the output from the first line: you can immediately ask the AI to swap the auth provider, change the brand color, or add a new route — no boilerplate editing required.

Yes. Every template, section, code file, and included image is free to use in your website, app, client project, SaaS product, or open-source build with no attribution required. There is no license fee, no royalty, and no copyright restriction. The code is yours to keep, modify, and ship commercially the moment you copy it.

A live preview of the full template, the complete multi-file source code as a single copy-paste string with `// === filename ===` headers so Cursor and Claude Code split it into the correct files automatically, and the prompt that regenerates the template from scratch in any of the 6 AI coding tools. Every vibe coding template ships with the shared AI Library design system: white background, black on grey typography, brand blue reserved for primary CTAs, small type, minimal icons.

A component is a single UI unit (a chat interface, a bento grid, a scroll progress bar). A vibe coding template is a full app made up of many components: routes, layout, navigation, data flow, and interactions wired together. Both are in the AI Library. Templates live at /prompts/ai-library/vibe-coding-templates. Components live at /prompts/ai-library/website-sections. Every template page cross-links to the AI Library components used inside its sections.

Yes. Every template can be copied, adapted, sold, and shipped in commercial projects with no attribution required. This applies to the full-app parent code and every child section. The AI prompts are also unrestricted. Use them for client work, indie SaaS, agency deliverables, internal tools, and open-source projects.

Every template is built on Next.js 14+ App Router + Tailwind CSS v3 + Switzer font, written in TypeScript. Backend choices are yours: they work with Supabase, Clerk, or Auth.js for authentication, and with Postgres, Convex, PlanetScale, or Neon for data. Templates deploy on Vercel, Cloudflare Pages, or Netlify. No motion library required. All styling is Tailwind utility classes.

Open the template page, click Copy full code, and paste directly into a Cursor or Claude Code chat. Both tools detect the `// === filename ===` headers and split the paste into the correct files in your project. From there you can ask them to swap the auth provider, change the color palette, wire the data to your API, or generate missing routes. The prompt tab gives you the exact vibe coding instruction to hand off instead.

Yes. Auth is wrapped behind a `src/lib/auth.ts` helper so you can swap Supabase, Clerk, Auth.js, or your own SSO by changing one file. The same pattern applies to the database client: swap Supabase for Postgres, Convex, PlanetScale, or Neon without touching the UI. Every template ships a Supabase reference implementation by default because it is the most common choice for AI-native SaaS.

Yes. Every child section is a standalone page and standalone code file. Copy the Users Table section from the SaaS Dashboard template into an AI Agent template and it works with no modification — they share the same design system, typography, spacing scale, and layout primitives. The prompt tab for each section is scoped to that section, so you can vibe code just the piece you need.

Three reasons. First, the prompt regenerates the template matched to your own design tokens, brand color, file structure, and auth provider — faster than editing someone else's code. Second, it is a starting instruction you can extend ("build this dashboard but replace analytics with a Kanban board") instead of a fixed snapshot. Third, each prompt is written specifically for the tool it targets: Claude Code, Cursor, Codex, Lovable, Replit, or Google Stitch — the output is consistent because the design constraints are identical across all six.

All six produce the same visual output. Cursor and Claude Code are best for dropping the full multi-file code into an existing repo where you want the AI to manage imports, run type checks, and iterate. Lovable and Replit are best for a fresh working preview URL in seconds without local dev setup. Codex fits agent-driven vibe coding workflows where the AI works autonomously across multiple files. Google Stitch is best if you want to iterate on the design visually before dropping the React code into your project.

Yes. The design system is Tailwind-native: change the brand color in `tailwind.config.ts` and every primary CTA updates. Change the font in `next/font` and every heading and body copy updates. Change the border-radius in the shared component variants and every card, button, and modal updates. Because the templates lean minimal (white background, black text, blue only on CTAs) they adapt easily to any brand without visual conflict.