Build an AI Chat UI with Next.js & shadcn (2026)

Frontend teams shipping AI products in 2026 rarely fail on “calling the model.” They fail on the chat surface: streaming tokens that stutter, tool-call cards that confuse users, and missing human-in-the-loop gates when the agent wants to send email or mutate CRM data. This guide covers how to compose a production AI chat UI with Next.js and shadcn/ui—patterns, not a vendor lock-in.

Related posts on ShopperCove:

• Next.js 16 App Router Production Checklist (2026)
• AI SEO for Answer Engines: ChatGPT, Perplexity & Google AI (2026)
• Clozure AI Business OS Review
• Setting up AI Coworkers with OpenBot
• Lily in CI: Fuzz-Based Backdoor Detection
• Cosign + SBOM in CI
• Deploying the DeepSeek Harness Routing Suite
• OpenTelemetry + Prometheus + Grafana

Affiliate disclosure. This post includes one optional ClickBank affiliate link for Clozure (seller nickname CLOZURE). If you buy through that link, ShopperCove may earn a commission at no extra cost to you. Clozure is not a UI library or Next.js dependency—it is framed only as an optional AI business OS (email/calendar/CRM) some indie founders use while shipping AI products. ShopperCove has not trialed Clozure for this UI guide. ClickBank is the retailer of products on this site. CLICKBANK® is a registered trademark of Click Sales, Inc., a Delaware corporation located at 1444 S. Entertainment Ave., Suite 410, Boise, ID 83709, USA, and used by permission. ClickBank’s role as retailer does not constitute an endorsement, approval, or review of these products or any claim, statement, or opinion used in promotion of these products.

1. Separate shell, stream, and actions

A chat UI is three layers:

1. Shell — layout, thread list, composer, scroll region (mostly Server Components + a thin client leaf).
2. Stream — token/delta rendering, abort, retry, and partial markdown.
3. Actions — tool calls, confirmations, and side effects that must never fire silently.

Keep the route page.tsx on the server. Push the composer, message list, and stream consumer into "use client" leaves. That matches App Router defaults and keeps the marketing/docs shell cacheable—see our Next.js 16 App Router checklist.

shadcn/ui fit: use ScrollArea, Button, Textarea, Card, Badge, and Dialog as primitives. Do not invent a parallel design system for “AI chrome.” Consistency beats novelty when users already trust your product UI.

2. Streaming messages that feel finished

Users judge AI UIs by latency feel, not model brand. Practical rules:

• Stream into a single assistant bubble; avoid spawning a new bubble per chunk.
• Support Stop (abort the fetch/stream) and Retry on the last user turn.
• Render markdown incrementally, but fence incomplete code blocks so layout does not jump wildly.
• Prefer skeleton height that matches typical reply length to limit CLS.
• Keep critical chrome (composer, cancel) outside the streaming Suspense hole.

Wire the client to a Route Handler or server action that returns a readable stream (SSE or fetch stream). Persist completed turns server-side; do not treat the browser as the source of truth for history.

3. Tool calls as first-class UI, not hidden JSON

When the model invokes tools (search, calendar, CRM write), show:

• Tool name in plain language (“Check calendar”, not raw function ids)
• Status: pending → running → done / failed
• Arguments the user would care about (date range, recipient)—redact secrets
• Result summary collapsed by default for noisy payloads

Use a Card + Badge pattern per tool step interleaved in the message timeline. Never auto-execute irreversible tools from the stream alone.

4. Human-in-the-loop before side effects

Human-in-the-loop (HITL) is the difference between a demo and a product people trust with email, calendar, or CRM:

1. Model proposes an action with structured args.
2. UI opens a confirm Dialog with editable fields.
3. Only on explicit approve does the server run the tool.
4. Log who approved what, and show the outcome back in-thread.

Deny by default for send-mail, delete, payment, and permission changes. Allow read-only tools to run with lighter UX if your threat model permits.

If you are building agent workflows beyond the chat chrome, adjacent reading: OpenBot AI coworkers and supply-chain hygiene for anything you wire into CI (Lily, Cosign + SBOM).

5. Accessibility, errors, and empty states

Ship the boring quality bar: composer focus on load; Escape to cancel when appropriate; announce new assistant content without spamming every token; an empty state with one example prompt; clear retry CTAs on rate-limits or dropped streams; never store the only conversation copy in localStorage.

Instrument stream failures and time-to-first-token in your usual stack (OTel + Prometheus + Grafana). Feel matters; invented micro-benchmarks do not.

Optional tool for indie founders (not a UI dependency)

If you are a solo founder shipping an AI chat product and you also need email, calendar, and CRM in one place, some people evaluate an AI business OS separately from Next.js and shadcn. That is orthogonal to streaming UI correctness.

One disclosed option (vendor claims only; ShopperCove has not hands-on tested it for this post):

​Clozure AI Business OS via ClickBank hop​

Skip it if you already have ops tooling, or if you only came for the chat UI patterns. Do not wire production customer data into any SaaS until you verify export, cancel, and access controls yourself.

2026 AI chat UI checklist (print this)

1. Server shell + client leaves — do not "use client" the whole page
2. One streaming bubble with Stop / Retry
3. Tool cards with status and redacted args
4. HITL Dialog before irreversible side effects
5. Persist turns server-side; browser is a view
6. a11y + empty + error states designed, not leftover
7. Observe stream failures and first-token timing
8. Ops tools last — UI stack first; Clozure-style OS only if founder ops need it

Build the chat surface people trust. Hook models and SaaS only after Stop, Retry, and confirm work every time.