AI chat for real products

Chat that answers in interface, not paragraphs.

Streaming on AI SDK v6. Tool calls you can watch and approve. 32 card kinds that turn an answer into a price table, a checkout or a running workflow. One config object changes the model, the tools and the layout — no deploy.

Put chat on my siteBrowse the 54 components

Try it live at /chat · every component is a file in your repo · 14-day free trial

A chat panel mid-turn: a collapsed reasoning block, a tool call showing its input and a green status badge, and below it a rendered price card with two buttons.

54

AI Element modules in the tree, exporting 410 parts

13

Channel doors registered in one agent runtime

32

Card kinds an answer can render inline

7

Layouts one config field switches between

From a page field to a streaming turn

Four steps. Nothing to redeploy.

1

Drop the chat on a page

Drag the AI Chat block onto any page in the editor, or edit the workspace default. Full-screen at /chat, a 25% rail, a 45% panel, a floating icon, or embedded in the flow of a page.

7 layouts · 2 empty-state views · page editor or /u/[slug]/studio/chat

2

Scope it

Pick the model, restrict the tools, choose which of your agents it may hand off to, and add starter cards. Leave a field blank and it inherits the workspace default.

ChatWidgetConfig · up to 8 starter cards · a card can launch a workflow

3

The turn runs

The doorman authenticates, meters credits and attaches the page context. The channels runtime picks the model, runs the tools, and streams reasoning, tool calls and cards back over SSE.

/api/chat → channels /message · identity attested by HMAC · usage debited from the stream

4

It closes the loop

Every finished turn writes back — the message lands in the thread, usage is debited, and the outcome marks or warns the path so the next matching signal routes better.

threads persisted · mark / warn on every close · no silent returns

What the chat surface gives you

Six things you would otherwise build twice.

Streaming built on AI SDK v6

The client is `useChat` from @ai-sdk/react over a `DefaultChatTransport`. Server-sent events, no buffering, no polling — text, reasoning, tool calls and rich cards all arrive as typed parts of the same stream.

The web route is a doorman, not a runtime

/api/chat proves who is knocking, charges the credit gate, packs the page context into one opaque suffix — then forwards the turn to the agent runtime in channels. No model logic lives in the website. One turn, one owner.

Answers that render as interface

32 card kinds ship today — price, checkout, verify, compare, workflow-run, human-approval, table, timeline, products and more. The agent emits a card and the chat renders a real component, not a wall of text a person has to parse.

Tool calls you can watch and approve

Every tool call streams its name, status badge, input and output into the transcript. Calls that need a human stop and wait on an approval card — the run resumes on the answer instead of guessing.

Reconfigured without a deploy

Model, tool allow-list, agent allow-list, layout, view, starter cards, header, placeholder and six feature toggles are fields on one config object. Change them in the page editor; the next turn reflects it.

Restrictions that hold at the server

Tool and agent allow-lists are re-checked against the stored workspace setting on every turn. A forged request can only narrow what you allowed — never widen it, never escape it.

Eight layers, one stream

Every part of a turn arrives on the same connection and renders as a typed part. Nothing is bolted on afterwards.

Model layer

OpenRouter by default, Groq opt-in, any OpenAI-compatible endpoint. Selected per workspace or per page.

Thinking layer

Reasoning blocks open while the model thinks and collapse when it stops. Chain-of-thought renders steps, searches and images.

Tool layer

Each call streams a status badge, its input and its output. Sensitive calls suspend on an approval card until a human answers.

Card layer

32 card kinds — the answer becomes a price table, a checkout, a diff, a running workflow.

Input layer

Files, screenshots, camera, paste-to-attach, @-mentions for agents, a toolkit picker, and Enter-to-send.

Voice layer

Mic input transcribes into the composer; six TTS voices read answers back. Both are per-widget toggles.

Channel layer

13 doors register into one runtime — web, Telegram, Discord, Slack, WhatsApp, email, voice, and six more. The four newest are single-tenant per deployment.

Workflow layer

A chat can be pinned to an entry workflow, and a starter card can launch one. Human steps suspend the run and resume on the reply.

The website never runs the model

/api/chat is a doorman. It proves who is knocking, charges the cover, renders the page context into one opaque suffix, and forwards the turn to the agent runtime. Web owns the request; the runtime owns the turn.

That split is what lets thirteen channel doors share one runtime instead of thirteen copies of the logic — and what keeps a browser from ever holding a provider key.

Talk to it now 
browser
  │  useChat + DefaultChatTransport
  ▼
/api/chat  ── the doorman
  │  identity · credit gate · context pack
  ▼
channels /message  ── the runtime
  │  model · tools · memory · cards
  ▼
SSE stream ──┬─▶ browser renders parts
             └─▶ debit usage · append thread
                 mark / warn the path

Every option is a field

No dead settings. A toggle either changes the live chat on the next turn, or it is not shown.

Seven layouts

One field. Same conversation.

  • icon A floating launcher. Opens over the page.
  • rail-left / rail-right A 25% rail docked to either side.
  • wide-left / wide-right A 45% panel for work sessions.
  • chat-full Full-screen chat — what /chat renders.
  • embed Inline in the page flow, no chrome.

Eight feature toggles

Per widget, not per site.

  • threads The conversation-history sidebar.
  • voice Text-to-speech output and the voice menu.
  • speech Mic input — record, transcribe, submit.
  • thinking The reasoning-mode toggle in the composer.
  • suggestions Starter chips in the empty state.
  • contextMeter A live token-usage meter.
  • persona An animated avatar that reacts to the turn.
  • visitorPickers Tool and agent pickers for visitors.

The component catalogue

All 54 AI Element modules, their 410 exports, and which ones the live chat already uses.

Browse components

Chat vs. the alternatives

FeatureONEHosted chat widgetsRoll your own on AI SDK
13 channel doors in one agent runtime
Rich interactive cards inside the answer
Tool calls visible and approvable in the transcript
Model / tools / agents changed without a deploy
Allow-lists re-enforced server-side
A/B test two chat configs on the same page
Component library you own and can restyle
Total control of the runtimeHonesty: rolling your own on AI SDK wins here — and costs you the doorman, the billing gate, the cards and the channel fan-out.

No per-conversation charge

Pay for what the turns consume. Annual billing pre-selected.

Starter

Up to 10 agents · 3 channels

$500/mo
5M credits/mo
10 agent workspaces
Web + Telegram + WhatsApp
Basic eval gate
Email support
Put chat on my site
Most popular

Agency

Unlimited agents · L5 evolution

$5,000/mo
60M credits/mo
Unlimited agents across all clients
L5 prompt auto-evolution
All 5 channels
20-version history per agent
Priority support
Start my agency

Scale

Custom architecture · dedicated team

$50,000
750M credits/mo
Custom agent architecture
Cross-client agent learning
Dedicated success manager
SLA 99.99%
Talk to us

Questions about chat

Answers that do the work, not describe it.

Drop the block on a page, pick a model, scope the tools. The next turn reflects it — and the same runtime answers behind all thirteen channel doors.

Put chat on my siteSee how the block works

Try it at /chat · every component is a file in your repo