Ask Your Data Spotlight

Ask the workspace

Questions your data could always answer, finally asked out loud

Pick a question below and watch it answer from your own records. Every answer names the tables it read, so you can check it.

Soft blue gradient backdrop

Which rooms went unused last week?

Three, all at Kingsway between 13:00 and 16:00. Two were held for a clinic cancelled on the Friday before.

Answered fromRotaBookingsCancellations

It cites what it read

Every answer lists the records behind it, so a figure you cannot verify is a bug rather than a feature.

It respects your roles

The assistant can only see what the person asking can see. Nobody gets a summary of a record they are locked out of.

It says when it does not know

Where the data is missing or ambiguous it says so and points at the gap, instead of inventing a confident number.

Try it on your own data
About this block

Ask Your Data SpotlightPRO

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.

Chat25: Ask Your Data Spotlight

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.

Upgrade Now

Installation

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

bash
npx shadcn add "https://ui.beste.co/r/chat25?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

Quick start

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.

tsx
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:

tsx
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" }}
    />
  );
}

Props

PropTypeDefaultDescription
badge{ label: string }–Centered eyebrow above the heading, rendered through Badge23
headingstring–Section heading, centered and capped at max-w-2xl
descriptionstring–Centered supporting paragraph, capped at max-w-xl
examplesExample[][]Question pills, each carrying its own answer card
image{ src: string; alt: string }–Backdrop shared by every example's tile
guaranteesGuarantee[][]Hairline columns explaining the limits
button{ label: string; href: string }–Centered action under the guarantees
classNamestring–Extra classes for the outer section
ts
type ActionLink = {
  label: string;
  href: string;
};

type Example = {
  prompt: string;
  media: ReactNode;
};

type Guarantee = {
  title: string;
  description: string;
};

Behavior notes

  • The pill label and the question inside the answer card are separate values. The demo repeats the same text in both, but nothing enforces it, so keeping them in sync is on you.
  • Selection is one piece of local useState holding an index, starting at 0. There is no onChange prop and no controlled mode.
  • The backdrop image is shared at block level rather than per example, so switching questions swaps only the answer card and the tile stays steady.
  • The panel does not animate the swap. active.media is replaced outright, so a piece holding internal state resets when you switch away and back.
  • The action wrapper is flex items-start justify-center. The items-start is load-bearing: without it the button would stretch vertically inside the centered flex row.
  • Guarantee columns each carry their own border-t, so the rules are per column and stop at the gaps.
  • The guarantees are deliberately about limits rather than capabilities. An assistant section that only lists what it can do is the pattern this block is built against.
  • The pills are real button elements with aria-pressed and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.

More Chat blocks

View all Chat
PRO

chat27

Inverted Out Of Hours Panel

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.

PRO

chat4

Rich Prompt Input with Smart Suggestions

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.

PRO

chat29

Saved Reply Library

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.

PRO

chat31

Two Sides Of One Conversation

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.

PRO

chat23

Messaging Overview Split

A messaging section pairing a light heading, a hairline table of response figures, and two actions with an image tile that floats a live conversation thread.

PRO

chat28

Conversation Handover Trail

One member conversation walked through as timestamped hairline rows inside a bordered panel, each naming what happened and either the person who picked it up or the step that ran on its own.