Agent UI

Agent UI puts your agent in a chat that can answer with more than text. Ask "show me revenue by product" and the agent draws a chart from your real data. Ask it to issue a refund and the user gets an approval card. Click a button in a widget and the agent carries on from there.

import { AgentChat } from 'cencori/react';
 
<AgentChat api="/api/chat" greeting="Ask about your sales" prompts={['Revenue by product', 'Top customers']} />

Your tools never run in the browser, and the browser never sees your API key.

Or with no backend

For an agent stored in Cencori that doesn't need your own tools, skip the route: point the chat at the agent with a publishable key locked to your domains.

<AgentChat agent="fea49590-..." publishableKey="cpk_..." />

See Stored agents.

An agent built in the console works the same way with its website key: <AgentChat widgetKey="cwk_..." />. See The chat.

• Any model generates UI. widgets: true gives the agent a built-in render_ui tool. It works on every model that calls tools, not one vendor's.
• Every widget is checked. Cencori validates each widget against the spec before it's shown. A broken one goes back to the model with the errors, and it fixes it. Your page never gets malformed UI.
• Charts and tables built in. Bar, line, area and pie charts, tables with number, currency and date formats, stats with deltas.
• Widgets stream. A widget draws as the model writes it, then the checked version replaces it.
• Approvals in the chat. needsApproval tools show an approval card. The paused run is signed so the browser can't change what runs.
• No styling setup. It brings its own styles: no Tailwind required, light and dark modes, themable.

• Quickstart: a working chat in a Next.js app.
• Widgets: every component and its props.
• The chat: <AgentChat>, theming, and building your own layout.
• Actions and forms: what happens when a user clicks.
• Server: createAgentChatHandler, auth, and the wire format.