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

Web page: https://candor.themethodic.com/screens/agent-chat

## Layouts

### Full page

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

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

Items:

- **Thread** (`thread`, free; https://candor.themethodic.com/docs/thread.md): The scrolling message column.
- **Message** (`message`, free; https://candor.themethodic.com/docs/message.md): One message, with tool calls and cards in order with the text.
- **Composer** (`composer`, free; https://candor.themethodic.com/docs/composer.md): Where the person writes: @ mentions, / actions, attachments.
- **Model picker** (`model-picker`, Pro; https://candor.themethodic.com/docs/model-picker.md): Which model the next message uses, in the composer's tools slot; nothing is chosen for the person.
- **Tool call** (`tool-call`, free; https://candor.themethodic.com/docs/tool-call.md): What the agent did, as a row that opens to input and output.
- **Reasoning** (`reasoning`, free; https://candor.themethodic.com/docs/reasoning.md): The agent's stated reasoning above its answer, labelled as its own account.
- **Context meter** (`context-meter`, free; https://candor.themethodic.com/docs/context-meter.md): What fills the model's context, so a full one isn't a surprise.
- **AI disclosure** (`ai-disclosure`, free; https://candor.themethodic.com/docs/ai-disclosure.md): A first line saying this is an AI.

```bash
npx candor-ui add thread message composer model-picker tool-call reasoning context-meter ai-disclosure
```

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

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

Items:

- **App layout** (`app-layout`, Pro; https://candor.themethodic.com/docs/app-layout.md): The frame with a side panel the person can resize.
- **Thread** (`thread`, free; https://candor.themethodic.com/docs/thread.md): The message column, narrow.
- **Composer** (`composer`, free; https://candor.themethodic.com/docs/composer.md): Pinned under it.
- **Entity chip** (`entity-chip`, free; https://candor.themethodic.com/docs/entity-chip.md): The things in the person's system the agent mentions, as chips that open them.
- **Citation** (`citation`, free; https://candor.themethodic.com/docs/citation.md): Evidence one step away, without leaving the page.

```bash
npx candor-ui add app-layout thread composer entity-chip citation
```

### 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".

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

Items:

- **Message** (`message`, free; https://candor.themethodic.com/docs/message.md): A reply with its blocks.
- **Composer** (`composer`, free; https://candor.themethodic.com/docs/composer.md): One line to ask.
- **Prompt suggestions** (`prompt-suggestions`, free; https://candor.themethodic.com/docs/prompt-suggestions.md): Prompts to start from, so the empty box isn't a blank.
- **Card registry** (`card-registry`, free; https://candor.themethodic.com/docs/card-registry.md): Cards an agent's reply can carry, drawn by your app.

```bash
npx candor-ui add message composer prompt-suggestions card-registry
```

## Rules that matter most here

- **Model output is text, never markup** (https://candor.themethodic.com/principles#model-text-is-text): 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** (https://candor.themethodic.com/principles#agents-are-named): The agent's name comes from your app's data, not from what the model says it is.
- **Unknown stays unknown** (https://candor.themethodic.com/principles#unknown-stays-unknown): A tool call that is still running has no duration, and a stopped reply says so instead of looking finished.

## Patterns that cover part of it

- AI chat interface components for React: https://candor.themethodic.com/patterns/ai-chat-interface.md
- Telling people they're talking to an AI: https://candor.themethodic.com/patterns/ai-disclosure.md
- A React UI for the Claude Agent SDK: https://candor.themethodic.com/patterns/claude-agent-sdk-ui.md
- AG-UI React components: https://candor.themethodic.com/patterns/ag-ui-react.md

## Brief for a coding agent

Paste this to the agent that builds the screen.

```text
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.
```