Launch priceOne payment

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”.

AI ChatBlockFree473 lines · one file

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

components/site-assistant.tsx
"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.

PropTypeNotes
variantChatbotVariant—
assistantChatbotAssistant—
openbooleanFloating and sidebar: open state. Leave out to let it manage itself.
defaultOpenboolean—
onOpenChange(open: boolean) => void—
position"bottom-right" | "bottom-left"Floating: which corner. Default bottom-right.
containedbooleanPosition against the nearest positioned parent rather than the window.
onClear() => voidThe bin was pressed; the thread is already cleared.
launcherLabelstringFloating: the launcher's name. Default "Open chat".
unreadnumberFloating: a count on the launcher while closed.
contextReact.ReactNodeSidebar: what the assistant is looking at, under the header.
defaultWidthnumberSidebar: start width in px. Default 380; drag the edge to change it.
headerActionsReact.ReactNodeExtra buttons in the header, before the built-in ones.
historyChatbotHistoryPast conversations, opened from the clock button in the header.
conversationIdstringThe conversation on screen. Changing it swaps the thread to `defaultMessages`.

Dependencies

npm packages

clsxframer-motionlucide-reacttailwind-merge

Layro foundations, installed alongside it

layro-themeai-chatbuttontooltip

Lifetime 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 components