Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas)

Wisp is an AI chat app you can ship: the home, the conversation and every screen around it, finished in light and dark, 13 themes and six languages. The AI is a local mock that streams like the real thing, behind one function you swap for your own API.

A home that invites the first question

• An animated orb that breathes, thinks and answers, a greeting that knows the time of day, and idea cards and a Prompt Library (25 prompts in 6 categories) to start from.
• "Continue where you left off" with your recent chats, and a temporary chat that's never saved.

One composer for everything

• Attach by picking, dropping or pasting (images, PDFs, documents, ZIP, CSV, JSON) with upload progress and previews.
• Modes: Reasoning, Deep research and Image generation; a Style menu (default, quick, brainstorm, sensitive); a model picker with speed and intelligence ratings.
• Slash commands (/image, /research, /code, /summarize), @ mentions of projects and files, voice input, a character count, and Enter or ⌘ + Enter to send (your choice).

Answers worth reading

• Streaming Markdown with a soft fade on the newest words, headings, lists, zebra tables, quotes and task lists.
• Reasoning that streams into its own panel, then folds to "Thought for 12s".
• Deep research with a live stepper (searching, reading, writing), numbered citations with hover cards, and the sources listed.
• Image generation that sharpens as it renders, a 2 × 2 grid and a lightbox with arrows and download.
• Code blocks highlighted by Shiki (in a Web Worker, off the page's main thread) with line numbers, diff colours, Copy, Wrap, Download and "Show 12 more lines".
• Canvas: open any code block beside the chat, edit it, preview HTML and React live, and keep versions.

Every action you expect

Copy, read aloud, like or dislike with a reason, share a link, regenerate (or retry with another model) and edit a question: each makes a new version you can page through. Stop at any point; errors offer Retry. Long chats are virtualised: of 500 messages, only the ones on screen are on the page.

Organised

• Projects with an icon, colour, category, instructions and files; drag a chat onto a project to move it.
• Pinned chats and history by Today, Yesterday, Previous 7 days and older; rename, pin, share, move, archive and delete, with Undo.
• A command palette (⌘K) that searches chats with a preview and runs actions; Archived chats with search, filters and multi-select.
• Settings: profile with a photo cropper, appearance, personalisation and memory, data controls (export everything, delete everything), shortcuts and billing.

Pages that sell

• Upgrade: monthly or yearly (save 20%), individual or team plans with a seat slider, a full comparison, testimonials, trust badges and an FAQ; a swipeable carousel on phones.
• Code: a terminal that types its own demo, and illustrated cards for the CLI, editor extensions and GitHub import.

Yours to style

• A Theme Customizer: 13 presets (Aurora, Terracotta, Caffeine, Corporate, Material, Modern Minimal, Nature, Pastel Dreams, Clay, Lagoon, Aubergine, Comic, Meadow), light, dark or system, 20 fonts, radius, layout, scale and sidebar style. Kept in a cookie and applied on the server: no flash.
• Every theme is checked for contrast (text 4.5:1, controls 3:1), including code colours.
• English, Spanish, French, German, Persian and Arabic, with full right-to-left layouts for Persian and Arabic.

Built right

• Keyboard first: ⌘K, ⌘⇧O new chat, ⌘B sidebar, ⌘⇧T temporary chat, ⌘/ for the list, Esc to stop, ↑ to edit your last message; focus rings everywhere; axe finds nothing on any page or dialog in light or dark.
• Sidebar, icon rail or a sheet by screen width, down to a phone; reduced motion respected; prints cleanly.
• Chats, projects and settings saved in the browser (IndexedDB), so the demo keeps what you do.

What's included

• The full Next.js app in TypeScript: shell, home, composer, conversation, Canvas, dialogs, Upgrade and Code pages
• The streaming mock AI and the one function to replace with your API (documented in the README)
• 13 theme presets generated by a script with its contrast check, 20 fonts, six languages
• Demo data: 2 projects, 14 chats (5 archived, one with 520 messages), real photos (Unsplash)

Stack and requirements

• Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, shadcn/ui (Radix)
• next-intl, zustand, TanStack Virtual, react-markdown + remark-gfm, Shiki, cmdk, motion, sonner, react-easy-crop
• Node 20.9 or newer, pnpm