AI Chat Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

AI Chat Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AiChatPage from @/components/blocks/ai-chat-page.

// app/assistant/page.tsx: a standalone app screen (or inside the admin shell with height="fill")
"use client"

import { AiChatPage, type AiChatSendHandler } from "@/components/blocks/ai-chat-page"

// stream the answer from your own route (server-sent text chunks)
const onSend: AiChatSendHandler = async function* (message, { conversationId, model, tools, signal }) {
  const response = await fetch("/api/assistant", {
    method: "POST",
    body: JSON.stringify({ conversationId, model, tools, text: message.text }),
    signal,
  })
  const reader = response.body!.pipeThrough(new TextDecoderStream()).getReader()
  while (true) {
    const { value, done } = await reader.read()
    if (done) break
    yield value
  }
}

export default function AssistantPage() {
  return <AiChatPage onSend={onSend} defaultConversationId={null} />
}

Props

• conversations
  AiConversation[]

  The history, controlled: ConversationItem (id, title, updatedAt, pinned, unread, archived, model) plus messages: ChatMessageData[] and optional followUps. Pair it with onConversationsChange, which also fires for every streamed chunk.

• defaultConversations
  AiConversation[]

  The history while uncontrolled; defaults to AI_CHAT_SAMPLE.conversations (ten sample conversations, "Overdue invoices in September" with its reasoning, tool calls, table and email).

• onConversationsChange
  (conversations: AiConversation[]) => void

  Called with the whole history after every change: a new chat, a message, a streamed chunk, a rename, a pin, an archive or a delete.

• conversationId
  string | null

  The open conversation, controlled; null is a new chat.

• defaultConversationIddefault "overdue-invoices"
  string | null

  The conversation open first; null ("new" in the playground) starts on the greeting.

• onConversationChange
  (id: string | null) => void

  Called when a row, New chat, a delete or a first message changes the open conversation.

• models
  AiModel[]

  The models of the pickers; defaults to AI_CHAT_SAMPLE.models (Summit Swift, Standard, Pro, Vision, Ultra locked to Business, Local 8B).

• model
  string

  The chosen model's id, controlled; pair it with onModelChange.

• defaultModeldefault "standard"
  string

  The model while uncontrolled. Summit Pro answers with a reasoning block first.

• onModelChange
  (model: string) => void

  Called when the header or composer picker picks a model.

• tools
  PromptTool[]

  The composer's toggles; defaults to AI_CHAT_SAMPLE.tools (Web search, Extended thinking, CRM data). The mock runs its CRM tool calls only with crm on and thinks first with reasoning on.

• defaultActiveToolsdefault "["crm"]"
  string[]

  The tools switched on at first.

• suggestions
  ChatSuggestion[]

  The starter cards of a new chat (two columns from 640px, one below); defaults to AI_CHAT_SAMPLE.suggestions, six sample starters.

• usage
  UsageMeterItem[]

  The plan's meters behind the sidebar's usage ring; defaults to AI_CHAT_SAMPLE.usage (tokens, Pro messages, images, API cost). [] hides the ring.

• plan
  AiChatPlan | null

  { name, resetsAt, upgrade: { label, description, href } } for the footer line "Pro · resets on Oct 1, 2026" and the upsell link; defaults to AI_CHAT_SAMPLE.plan, null hides both.

• user
  ChatPerson

  The signed-in person ({ id, name, avatar }): the greeting's first name, the questions' author and the footer; defaults to Anna Price.

• onSend
  (message: PromptInputMessage, context: AiChatSendContext) => (AsyncIterable<string> | Promise<string>)

  AiChatSendHandler; the context is { conversationId, model, tools, signal, messages }. Plug a real model here: yield text deltas to stream the answer or resolve with the whole of it; a rejection shows the message's error with Retry. The signal aborts on Stop, on switching conversations and on unmount. Without it a scripted mock streams (reasoning for Summit Pro, CRM tool calls, the canned answers of AI_CHAT_SAMPLE.replies, a generic answer otherwise; a prompt with the word "error" fails).

• replies
  AiChatCannedReply[]

  The mock model's scripts ({ id, match: RegExp, reasoning?, toolCalls?, content, followUps? }), tested against the prompt folded to lowercase without diacritics; defaults to AI_CHAT_SAMPLE.replies.

• initialPromptdefault ""
  string

  Sent once, shortly after mount, into the open conversation (a new one when none is open), like a ?q= deep link.

• getShareUrl
  (conversation: AiConversation) => string

  The link Share copies; defaults to origin + /assistant/<id>.

• sidebarFooter
  ReactNode

  Content under the usage block, in the sidebar and the drawer (a version line, help links).

• heightdefault "screen"
  "fill" | "screen"

  screen is a standalone h-dvh app with its own <main>; fill takes what is left of a shell with layout="fill" (admin-shell) and scrolls inside its panes.

• sidebardefault "auto"
  "auto" | "open" | "closed"

  auto: the history is open from 1024px and a left drawer below; open: inline from 768px (tablets too); closed: starts collapsed on desktop, the header button slides it in.

• variantdefault "default"
  "default" | "bubbles" | "flat"

  The messages' layout, passed to ChatThread: the question in a bubble and the answer as text, both in bubbles, or both on the left with names.

• newChatShortcutdefault "shift+mod+o"
  string

  Opens a new chat from anywhere, shown in the New chat tooltip; "" binds nothing.

• searchShortcutdefault ""
  string

  Focuses the history search from anywhere ("mod+k"); "" binds nothing.

• showUsagedefault true
  boolean

  The sidebar footer: the person, the plan line, the usage ring and the upsell.

• assistantNamedefault "Summit Assistant"
  string

  The assistant's name in the sidebar brand, the composer placeholder, the message headers (flat) and screen reader text.

• labels
  Partial<AiChatPageLabels>

  Every visible string, English by default (DEFAULT_AI_CHAT_PAGE_LABELS; AI_CHAT_PAGE_LABELS_EN is the same set). Nested keys (list, thread, message, markdown, reasoning, toolCalls, composer, modelPicker, usageMeter, suggestionChips, inlineEdit) translate the composed items.

• localedefault "en-US"
  string

  Intl locale for dates, times, token counts and money.

• now
  Date | number

  The reference time for the history groups and day separators; new messages move on from it. Defaults to the live clock.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The accent of the send button, the question bubbles, the selected row, the starter card icons and the brand mark.

• loadingdefault false
  boolean

  The history, the title and the thread as skeletons; the composer is disabled.

• animateIndefault true
  boolean

  The thread rises in once when the page mounts in the browser; off in thumbnails and under reduced motion.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for the upsell link; defaults to the LinkProvider's (a plain anchor).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<AiChatPageSlot, string>>

  Classes for the parts: sidebar, brand, list, usage, main, header, title, thread, empty, drawer.

Parts

FAQ

More React blocks