Chatbot
AI Chat inside a shell: the assistant's name and connection, clear, expand and minimise. Floating opens from a launcher and becomes a full sheet on a phone; the sidebar docks, resizes and says what it is looking at. Answers can ask back with choices, a one-pick question or a Confirm, and fold their thinking into “Thought for 5s · 3 steps”.
Ready for AI tools one file typed props installs by name prompt included
The decision inside it
Asking back is part of the answer
A choice, a question or a Confirm arrives in the same stream as the text, and the pick is sent on as the next message so the model sees it. Nothing runs from the widget: what Confirm does stays in your app.
Installation
How you get it
Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.
Use Layro's Chatbot for this.
Install it: npx shadcn@latest add https://layropro.com/r/chatbot
Import it from @/components/ui/chatbot.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above.
When to use it
Use Chatbot when the chat has to live somewhere specific: a launcher in the corner of a site (floating), a panel in a dashboard (embedded), an assistant docked beside a document (sidebar) or a whole page. The conversation is AI Chat with the same onSend; answers can also yield choices, a question or a confirm, and the pick comes back as the next message and through onAction. Your app owns the model, history, uploads and whatever Confirm does.
Usage
"use client";
import { Chatbot } from "@/components/ui/chatbot";
import type { AIChatRequest } from "@/components/ui/ai-chat";
async function* send({ messages, signal }: AIChatRequest) {
const res = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ messages }), signal });
const reader = res.body!.pipeThrough(new TextDecoderStream()).getReader();
for (;;) {
const { done, value } = await reader.read();
if (done) return;
yield value;
}
// To ask back, yield events as well as text:
// yield { type: "choices", choices: [{ label: "Upload a file" }, { label: "Not now" }] };
// yield { type: "confirm", title: "Start the import?", confirmLabel: "Start", cancelLabel: "Cancel" };
}
export function SiteAssistant() {
return (
<Chatbot
variant="floating"
assistant={{ name: "Acme Assistant", detail: "Connected" }}
welcome={{ title: "How can I help?", starters: ["Where is my order?", "Change my plan"] }}
onSend={send}
onAction={({ confirmed, choice }) => {
if (confirmed) startImport(); // your code runs the action
}}
/>
);
}
function startImport() {}API
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Props
Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.
| Prop | Type | Notes |
|---|---|---|
variant | ChatbotVariant | — |
assistant | ChatbotAssistant | — |
open | boolean | Floating and sidebar: open state. Leave out to let it manage itself. |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
position | "bottom-right" | "bottom-left" | Floating: which corner. Default bottom-right. |
contained | boolean | Position against the nearest positioned parent rather than the window. |
onClear | () => void | The bin was pressed; the thread is already cleared. |
launcherLabel | string | Floating: the launcher's name. Default "Open chat". |
unread | number | Floating: a count on the launcher while closed. |
context | React.ReactNode | Sidebar: what the assistant is looking at, under the header. |
defaultWidth | number | Sidebar: start width in px. Default 380; drag the edge to change it. |
headerActions | React.ReactNode | Extra buttons in the header, before the built-in ones. |
history | ChatbotHistory | Past conversations, opened from the clock button in the header. |
conversationId | string | The conversation on screen. Changing it swaps the thread to `defaultMessages`. |
Dependencies
npm packages
clsxframer-motionlucide-reacttailwind-mergeLayro foundations, installed alongside it
layro-themeai-chatbuttontooltipLifetime access
Every component, and everything we ship next.
- All 112 components, source included
- The template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.
More in AI Chat
All AI Chat componentsChat Message
FreeOne turn in a conversation, for the person or the assistant, with sources and attachments.
Streaming Response
FreeAn answer arriving word by word that looks finished at every moment in between.
Thinking State
FreeThe wait before the first word: what it is doing, for how long, and the trail so far.
Message Actions
FreeCopy, regenerate and rate an answer, with every button confirming in place.
Prompt Input
FreeThe box you type in: grows with the text, Enter sends, and Send becomes Stop.
Chat Empty State
FreeThe screen before the first message: who is listening, what it knows, and what to ask.