Collapsible block for model reasoning: open with a live timer and shimmering label while the model thinks, then folded into "Thought for Ns". Takes AI SDK reasoning parts.
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/reasoning
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 type { UIMessage } from "ai";4import { Reasoning } from "@/components/nextui/reasoning";56// On the server, send reasoning with toUIMessageStreamResponse({ sendReasoning: true }).7export function AssistantMessage({ message }: { message: UIMessage }) {8return message.parts.map((part, i) =>9part.type === "reasoning" ? <Reasoning key={i} part={part} /> : null,10);11}
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | – | The model's reasoning text |
| streaming | boolean | false | True while reasoning tokens are still arriving; the block stays open and the label shimmers |
| duration | number | – | Seconds the model thought, shown as "Thought for Ns"; counted live while streaming when unset |
| part | { type: string; text: string; state?: "streaming" | "done" } | – | An AI SDK reasoning part; fills text and streaming |
| open | boolean | – | Controlled open state; unset, it opens while streaming and folds when done |
| onOpenChange | (open: boolean) => void | – | Called when the user opens or folds the block |
| autoPlay | boolean | false | Loop a scripted think while on screen, for demos |
| className | string | – | Extra classes on the wrapper |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.