AI ChatProv1.0.0
A complete assistant panel: ask, and the reply shows its reasoning, streams in with numbered citations that open their source, and ends with the sources it used. Stop, retry, a failed reply that keeps your message, suggested prompts, and one function to bring your model.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-ai-chatNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { AiChat, type AiChatRespond } from "@/components/ui/lumen/blocks/ai-chat";
// Your route streams plain text; Stop aborts the request.
const respond: AiChatRespond = async function* (prompt, { signal, history }) {
const res = await fetch("/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt, history: history.map((m) => ({ role: m.from, content: m.text })) }),
signal,
});
if (!res.ok || !res.body) throw new Error(`Chat failed: ${res.status}`);
const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
for (;;) {
const { value, done } = await reader.read();
if (done) return;
yield value;
}
};
export function HelpPanel() {
return (
<div className="h-[640px]">
<AiChat respond={respond} suggestions={["How do I invite my team?", "Where are invoices?"]} labels={{ title: "Help" }} />
</div>
);
}Props
respondthe scripted sample(prompt, { signal, history }) => AsyncIterable<AiChatChunk>Your model. Yield text as it streams; yield { type: "reasoning", steps, done? } and { type: "sources", sources } when you have them, and cite as [1], [2] in the text. Stop aborts signal.
suggestions–string[]Prompts offered while the chat is empty.
initialMessages / onMessagesChange–ChatMessage[] / (messages) => voidStart from a saved thread; save every change.
assistantNamelabels.titlestringThe assistant's name in the thread.
labels–Partial<AiChatLabels>title, newChat, empty, emptyHint, placeholder, stopped, failed.
timeZone / locale–string / stringTimes and day breaks in the thread; set the time zone so the server and browser render the same groups.
Show all 7 propsShow fewer
partLabels–{ composer?, conversation?, message?, reasoning?, citations? }Words inside the parts, for i18n (each the part's own labels).
Source
components/ui/lumen/blocks/ai-chat.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
