AI assistant thread that types a request, thinks over a sparkle field, asks a follow-up with a select and choice tiles, then streams its answer word by word.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/agent-chat
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { AgentChat } from "@/components/blocks/agent-chat";45export function DeckAssistant() {6return (7<AgentChat8prompt="Build a 10 slide board update on Q3 revenue, burn and hiring."9onSend={(message) => console.log("send", message)}10onAnswer={({ slides, depth }) => console.log(slides, depth)}11/>12);13}
| Prop | Type | Default | Description |
|---|---|---|---|
| date | string | "Today, 8:08 AM" | Time stamp above the conversation |
| noticeTitle | string | – | Bold first half of the reminder pill at the top |
| notice | string | – | Rest of the reminder pill |
| prompt | string | Q1 investor deck brief | Text the demo types into the composer and sends |
| question | string | "How many slides would you like for this deck?" | Label of the select in the question card |
| slideCounts | number[] | [5, 10, 15, 20, 25] | Options in the select; the demo picks the second one |
| depthQuestion | string | "Choose your depth of coverage" | Label of the choice tiles |
| depths | DepthOption[] | Essential, In-Depth, Summary, Deep Dive | Choice tiles: a label and skeleton line widths; the demo picks the first one |
| answer | AnswerBlock[] | Outline notes | The streamed reply: paragraphs or bullets, with **bold** runs |
| autoPlay | boolean | true | Play the scripted conversation while the window is in view |
| loop | boolean | true | Start the script over a few seconds after it finishes |
| onSend | (message: string) => void | – | A message was sent from the composer |
| onAnswer | (answer: { slides: number; depth: string }) => void | – | The question card was submitted with both answers |
| className | string | – | Extra classes on the outer element |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.