Full AI Coding Template · React + Tailwind · Claude Code, Cursor, Lovable
AI Chat App Coding Template
A production-ready AI chat app template built for AI coding tools. Includes a streaming chat surface, a searchable conversation sidebar, a model selector for Claude / GPT / Gemini / Grok, account settings, chat history, an empty state, a share modal, a new chat flow, and an error state. Ships as a single copy-paste multi-file code file optimised for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Preview (main screen)
Copy the full multi-file code. Files are separated by // === filename === headers so Cursor and Claude Code split them automatically. Next.js 14+ App Router, Tailwind CSS v3+, Switzer font.
Or build the whole app with a prompt
Paste the prompt into the AI coding tool you use. Each version is written for that tool specifically to build the entire AI Chat App Coding Template in a single conversation.
Build a complete Next.js 14+ App Router AI chat app in this repository. Design system: white background, black text on white, muted grey secondary text (#6B7280), brand blue #2B65F6 only on primary CTAs (New chat, Send, Copy share link), Switzer font (font-medium max, never bold), 12-14px body copy, minimal line icons only. Shared layout: left sidebar (260px) with conversation list grouped by day (Today, Yesterday, Earlier), New chat button, search input, and user avatar at the bottom. Main area: top bar with model name + Share button, message thread that scrolls independently, composer pinned at the bottom. Routes: /app/chat/[id]/page.tsx (main chat surface with streaming via Vercel AI SDK v6 useChat), /app/history/page.tsx (searchable full chat history), /app/settings/page.tsx (default model, dark mode toggle, data export). Components: ModelSelector modal, ShareModal, EmptyChat, error boundary. Use Anthropic Claude Fable 5 as default model via Vercel AI Gateway. Wire messages to Supabase (chats table + messages table). Ship one conversation: propose folder structure first, then write each file.
How to use this AI Chat App Coding Template as a prompt
- Paste the prompt into Claude Code, Cursor, or Lovable to build a complete Next.js AI chat app with streaming, conversation history, and all 10 sections wired together.
- Best for indie hackers shipping a ChatGPT-clone or Anthropic wrapper, AI product teams building an in-app assistant, and vibe coders spinning up a Perplexity-style chat surface.
- Ask Claude Code or Cursor to swap the model provider (Anthropic, OpenAI, Vercel AI Gateway) or wire the messages to Supabase / Convex without rebuilding the UI.
How to use this AI Chat App Coding Template as code
- Copy the full multi-file code and paste it into a fresh Next.js 14+ project. Cursor and Claude Code split the file automatically using the // === filename === headers.
- Built on Next.js App Router + Tailwind CSS v3 + Switzer font. Streaming via Vercel AI SDK v6 useChat. No motion libraries required.
- Compatible with Vercel AI Gateway, Anthropic API, OpenAI API, and the Vercel AI SDK. Compatible with Supabase, Clerk, or Auth.js for auth, and Postgres, Convex, or PlanetScale for message storage.
Sections inside the AI Chat App Coding Template
Each section is its own page with a dedicated preview, section-only code, and 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.
Model Selector Section
AI chat model selector modal for Claude Code and Cursor: pick between Claude Fable 5, GPT-5.6, Gemini 3.1 Pro, Grok 4.5, and more.
AI Chat App Settings Section
AI chat app settings screen for Claude Code and Cursor: default model, dark mode toggle, and data export controls.
Chat History Section
AI chat app history page for Claude Code and Cursor: searchable full chat history list with snippets and timestamps.
AI Chat Empty State Section
AI chat app empty state for Claude Code and Cursor: welcome screen with suggestion chips and centered heading.
Share Conversation Modal Section
AI chat share modal for Claude Code and Cursor: public link, copy button, and public/private toggle.
New Chat Flow Section
AI chat new-chat entry for Claude Code and Cursor: prominent input with prompt suggestion grid.
AI Chat Error State Section
AI chat error state for Claude Code and Cursor: model timeout with retry and switch-model options.
FAQ
How do I build a ChatGPT-style AI chat app?+
Copy the prompt on this page into Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. Each tool generates the complete Next.js AI chat app from a single prompt: sidebar with conversation history grouped by day, streaming chat surface via Vercel AI SDK v6, model selector modal, share modal, settings, chat history search, and error boundary. Persist messages in Supabase, Convex, or your own database.
What technology powers the streaming responses in this template?+
The Vercel AI SDK v6 `useChat` hook, streamed via the Vercel AI Gateway. Model responses arrive token-by-token and render with a blinking cursor on the last assistant message. Compatible with Anthropic Claude Fable 5, GPT-5.6 Sol/Terra, Gemini 3.1 Pro, Grok 4.5, DeepSeek V4, and any streaming-capable model on the AI Gateway.
Which AI models are supported in the AI Chat App template?+
Six current models out of the box: Claude Fable 5, Claude Opus 4.8, GPT-5.6 Sol, GPT-5.6 Terra, Gemini 3.1 Pro, and Grok 4.5. Each shown with speed and cost badges in the model selector modal. Add any custom model (or a self-hosted OpenAI-compatible endpoint like Ollama, vLLM, or LM Studio) by extending the MODELS array in `components/ModelSelector.tsx`.
How do I persist conversations and message history?+
The template ships with Supabase persistence by default: a `chats` table (id, title, user_id, model_id, is_public, updated_at) and a `messages` table (id, chat_id, role, content, created_at). Swap Supabase for Convex, PlanetScale, Neon, or your own API by replacing the `src/lib/db.ts` helper. Real-time updates via Supabase channels work out of the box.
Can I self-host the AI Chat App template?+
Yes. Deploy the Next.js app to Vercel, Cloudflare Pages, Fly.io, Railway, or your own server. For fully self-hosted inference, point the Vercel AI SDK at any OpenAI-compatible endpoint (Ollama, vLLM, LM Studio, or a self-hosted Anthropic-compatible proxy). Auth swaps between Supabase, Clerk, Auth.js, or your own SSO via a single helper file.