An assistant section where question pills swap the image tile beneath them, each floating a live answer card that cites the records it read, closing on three hairline guarantees and one action.
An assistant section where question pills swap the image tile beneath them, each floating a live answer card that cites the records it read, closing on three hairline guarantees and one action.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/chat25?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/chat25?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/chat25.tsx, the chat34 answer piece it swaps between (installed to components/beste/piece/chat34.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.
The installed file exports chat25Demo alongside the block: the exact props behind the preview above. Spread it to get a working spotlight in one line.
import { Chat25, chat25Demo } from "@/components/beste/block/chat25";
export default function AssistantPage() {
return <Chat25 {...chat25Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Chat25 } from "@/components/beste/block/chat25";
import { Chat34 } from "@/components/beste/piece/chat34";
export default function AssistantPage() {
return (
<Chat25
badge={{ label: "Ask the workspace" }}
heading="Questions your data could always answer, finally asked out loud"
description="Every answer names the tables it read, so you can check it."
examples={[
{
prompt: "Which rooms went unused last week?",
media: (
<Chat34
question="Which rooms went unused last week?"
answer="Three, all at Kingsway between 13:00 and 16:00."
sourcesLabel="Answered from"
sources={["Rota", "Bookings", "Cancellations"]}
/>
),
},
{
prompt: "How full is next Tuesday?",
media: (
<Chat34
question="How full is next Tuesday?"
answer="81% across all four sites."
sourcesLabel="Answered from"
sources={["Rota", "Bookings"]}
/>
),
},
]}
image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
guarantees={[
{
title: "It cites what it read",
description: "Every answer lists the records behind it.",
},
{
title: "It respects your roles",
description: "The assistant can only see what the person asking can see.",
},
]}
button={{ label: "Try it on your own data", href: "/assistant" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Centered eyebrow above the heading, rendered through Badge23 |
heading | string | – | Section heading, centered and capped at max-w-2xl |
description | string | – | Centered supporting paragraph, capped at max-w-xl |
examples | Example[] | [] | Question pills, each carrying its own answer card |
image | { src: string; alt: string } | – | Backdrop shared by every example's tile |
guarantees | Guarantee[] | [] | Hairline columns explaining the limits |
button | { label: string; href: string } | – | Centered action under the guarantees |
className | string | – | Extra classes for the outer section |
type ActionLink = {
label: string;
href: string;
};
type Example = {
prompt: string;
media: ReactNode;
};
type Guarantee = {
title: string;
description: string;
};useState holding an index, starting at 0. There is no onChange prop and no controlled mode.image is shared at block level rather than per example, so switching questions swaps only the answer card and the tile stays steady.active.media is replaced outright, so a piece holding internal state resets when you switch away and back.flex items-start justify-center. The items-start is load-bearing: without it the button would stretch vertically inside the centered flex row.border-t, so the rules are per column and stop at the gaps.button elements with aria-pressed and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.chat27
A support section built as one dark panel, with a light heading, three hairline promises about who answers, two actions, and a bordered column floating a live on-call conversation.
chat29
A messaging section where a hairline list of saved replies, each with what it is for and how often it is used, swaps a bordered preview card showing the message and the fields it fills in from the record.
chat4
Sophisticated AI prompt input area with auto-expanding textarea, attachment and image upload buttons, model selector, and a grid of contextual prompt suggestion cards. Inspired by ChatGPT and Claude home screens.
chat31
A messaging section splitting a hairline matrix between the staff view and the member view, each half floating its own live asset above a title and a list of what that side gets.