Section of the AI Chat App Coding Template
AI Chat App Settings Section
Settings page for the AI Chat App. Three grouped cards: default model picker, appearance (dark mode toggle), and data (export all chats + delete all data).
Section preview
Vibe code this section with a prompt
Paste the prompt into your AI coding tool and it builds just this section. Each version is scoped to the AI Chat App Settings Section, part of the AI Chat App Coding Template.
Build the AI Chat App Settings section for a Next.js 14+ AI chat app in Cursor. Design system: white background (#FFFFFF), black text on white, muted grey (#6B7280) for secondary text, brand blue (#2B65F6) reserved for primary CTAs only, Switzer font, font-medium max (never bold), 12-14px body copy, 16-20px headings, minimal line icons only. Layout: three grouped cards stacked vertically in a max-w-640 column: (1) Default model card with a dropdown of the 6 supported models, (2) Appearance card with a Dark mode toggle switch, (3) Data card with Export all chats + Delete all data buttons (Delete has subtle red hover). Each card has a heading (font-medium), a small grey helper subtitle, and generous padding. Ship as a single .tsx file using only Tailwind classes and native React state. No motion library required. This section belongs to the AI chat app template family; reference the shared layout (left sidebar nav + top bar) but do not duplicate it here.
How to use this AI Chat App Settings Section as a prompt
- Paste the prompt into Claude Code, Cursor, or Lovable to build the settings page as the /settings route of a Next.js AI chat app.
- Best as the /settings page for AI chat products where users pick a default model, toggle dark mode, and manage their conversation history.
- Ask Codex or Lovable to wire dark mode to next-themes, wire the export button to generate a JSON download, and wire delete-all to a Supabase batch delete.
How to use this AI Chat App Settings Section as code
- Drop the React + Tailwind file into `app/settings/page.tsx` (client component). Uses React state for the toggles.
- Persist default model + dark mode to Supabase user metadata or localStorage. Wire export to a route handler that streams JSON.
- Compatible with next-themes, Supabase user metadata, and any user-preferences backend.
Other sections in the AI Chat App Coding Template
More sections you can vibe code alongside the AI Chat App Settings Section. Each ships with prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
AI Assistant Chatbot Interface Section
Main AI assistant chatbot interface for Claude Code and Cursor: streaming message thread, growing composer, and suggestion chips on a minimal white layout.
Conversation Sidebar Section
AI chat app conversation sidebar for Claude Code and Cursor: search input, New chat button, and conversation list grouped by day.
Streaming Message Thread Section
AI chat streaming message thread for Claude Code and Cursor: blinking cursor on assistant messages, Vercel AI SDK v6 integration.
FAQ
How do I build a settings page for an AI chat app?+
Copy the prompt on this page into Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. The generated file drops into `app/settings/page.tsx` as three grouped cards: Default model picker, Appearance (dark mode toggle), and Data (Export all chats / Delete all data). Wire the export button to a route that generates a JSON download of the user's chat history.
How do I implement dark mode in this AI chat app?+
The Appearance card ships with a toggle that flips a `data-theme="dark"` attribute on `<html>`. Pair with Tailwind's `dark:` variant across the app for the full switch. For persistence across sessions, use next-themes and read the saved preference in the app root layout.
What is a vibe coding template?+
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.
Can I use these vibe coding templates copyright-free in my project?+
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.
What do I get on each vibe coding template page?+
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.
What is the difference between a vibe coding template and a component?+
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.
Are the vibe coding templates licensed for commercial use?+
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.
What technology stack do the vibe coding templates use?+
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.
How do I use a vibe coding template with Cursor or Claude Code?+
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.
Do vibe coding templates work with my auth provider and database?+
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.
Can I combine sections from different vibe coding templates?+
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.
Why include a prompt if the code is already there?+
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.
Which AI coding tool is best for vibe coding with these templates?+
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.
Can I adapt the design system to my own brand?+
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.