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

> A complete AI chat app for Next.js and shadcn/ui: streaming answers with reasoning, deep research with citations, image generation, code blocks with a Canvas, projects and branches, a command palette, pricing and code pages. 13 themes, light and dark, six languages with RTL.

- Kind: Landing page
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: ai-chat, chatbot, chat-ui, llm, nextjs, shadcn, tailwind, rtl
- Latest release: 1.0.0 (Any system)
- Published: 2026-10-16
- Updated: 2026-10-16
- Page: https://upfork.dev/products/nextjs-ai-chat-app-template

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/nextjs-ai-chat-app-template
```

It installs with the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.

## About

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

## Screenshots

![Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas), 1](https://upfork.dev/media/01a145d6-779d-7f57-8948-34fe715f2d37.png)
![Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas), 2](https://upfork.dev/media/01a145d6-8bcb-7d11-a51d-023f7bbaac61.png)
![Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas), 3](https://upfork.dev/media/01a145d6-9c3b-74f1-ba6b-4d6206a2c4e7.png)
![Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas), 4](https://upfork.dev/media/01a145d6-b60c-7d02-81d2-bed0055b795e.png)
![Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas), 5](https://upfork.dev/media/01a145d6-cdc3-7046-a982-f70ed20a071e.png)
![Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas), 6](https://upfork.dev/media/01a145d6-ece7-782c-9ec2-535c01f0b3a1.png)
![Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas), 7](https://upfork.dev/media/01a145d7-0c5f-7402-9d88-f391a5b3019f.png)