Screens / Talking to the agent

Agent chat

Talk to an agent, watch it work, and see what it did and what it used.

For: Anyone using the product day to day.

Markdown

3 ways to lay it out

1. Full page

Pick it when: The agent is the product, or one of its main places: a person opens it to get something done.

A session sidebar on the left, a header and the message column in the middle, the composer pinned under it.

ThreadFreeThe scrolling message column.
MessageFreeOne message, with tool calls and cards in order with the text.
ComposerFreeWhere the person writes: @ mentions, / actions, attachments.
Model pickerProWhich model the next message uses, in the composer's tools slot; nothing is chosen for the person.
Tool callFreeWhat the agent did, as a row that opens to input and output.
ReasoningFreeThe agent's stated reasoning above its answer, labelled as its own account.
Context meterFreeWhat fills the model's context, so a full one isn't a surprise.
AI disclosureFreeA first line saying this is an AI.

Install full page

Pro and Premium items need a licence key; free ones install as they are.

2. Side panel beside the work

Pick it when: The person is working in something else (a record, a document, a dashboard) and asks the agent about it.

A page on the left and a narrow thread with its composer in a panel on the right.

App layoutProThe frame with a side panel the person can resize.
ThreadFreeThe message column, narrow.
ComposerFreePinned under it.
Entity chipFreeThe things in the person's system the agent mentions, as chips that open them.
CitationFreeEvidence one step away, without leaving the page.

Install side panel beside the work

Pro and Premium items need a licence key; free ones install as they are.

3. Embedded in a page

Pick it when: A small ask inside another screen, such as a help box or a record's "ask about this".

A page with a compact thread card in one corner: two messages and a composer.

MessageFreeA reply with its blocks.
ComposerFreeOne line to ask.
Prompt suggestionsFreePrompts to start from, so the empty box isn't a blank.
Card registryFreeCards an agent's reply can carry, drawn by your app.

Install embedded in a page

Rules that matter most here

Model output is text, never markup
Replies render as text and typed blocks, never HTML, and a link in model output is not clickable.
The agent is always named, by the app
The agent's name comes from your app's data, not from what the model says it is.
Unknown stays unknown
A tool call that is still running has no duration, and a stopped reply says so instead of looking finished.

Already covered elsewhere

Pattern: AI chat interface components for React
Pattern: Telling people they're talking to an AI
Pattern: A React UI for the Claude Agent SDK
Pattern: AG-UI React components

Brief for a coding agent

Paste this into the agent that builds the screen. The docs MCP server returns the same text from get_screen.

Build an agent chat page with Candor UI: a session sidebar, a header, a Thread of Message rows and a Composer pinned under it.
Connect the agent with the adapter for your SDK (useCandorChat for the Vercel AI SDK, useClaudeAgent, or useAgUi) and pass its messages to Thread and its props to Composer.
Show tool calls as ToolCall rows inside the Message blocks, reasoning in Reasoning and sources as Citation.
Put AiDisclosure as the first line of a new thread and name the agent from your app's data with AgentAvatar, never from model output.
Add ContextMeter to the composer so the person sees the context filling before it is full.
Render model text as text: no HTML, no clickable links from model output.
A tool call that needs a go-ahead is a PermissionPrompt in the thread (see the permission-prompt screen).
A reply that stopped or failed says so in words and offers a retry; a running call shows no duration.
Pick the layout (full page, side panel, embedded) from the variations on this page.

Start from the "Full page" layout: A session sidebar on the left, a header and the message column in the middle, the composer pinned under it.
Candor items: thread (https://candor.themethodic.com/docs/thread.md), message (https://candor.themethodic.com/docs/message.md), composer (https://candor.themethodic.com/docs/composer.md), model-picker (https://candor.themethodic.com/docs/model-picker.md), tool-call (https://candor.themethodic.com/docs/tool-call.md), reasoning (https://candor.themethodic.com/docs/reasoning.md), context-meter (https://candor.themethodic.com/docs/context-meter.md), ai-disclosure (https://candor.themethodic.com/docs/ai-disclosure.md).
Install: npx candor-ui add thread message composer model-picker tool-call reasoning context-meter ai-disclosure
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.