Screens / Talking to the agent

Support copilot

Draft answers for a support agent from the help docs, with sources, for a person to approve, edit or reject.

For: Support staff answering customers.

Markdown

2 ways to lay it out

1. Queue, thread and draft

Pick it when: A support desk with a queue: the person works one customer at a time.

A queue list on the left, the customer thread in the middle, and the agent's draft with citations on the right.

Support copilotPremiumThe whole desk: a queue, the customer's thread and the agent's draft, for the Vercel AI SDK (support-copilot-claude for the Claude Agent SDK).
InboxProEvery thread that has something for the person, by what it needs.
CitationFreeThe help article behind each part of the draft.
AI content labelProMarks the draft as AI-generated until a person has edited it.

Install queue, thread and draft

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

2. Draft in the reply box

Pick it when: Staff who prefer one thread and a single reply field over a three-column desk.

The customer thread with a draft in the reply box, its sources below, and Send beside it.

ComposerFreeWhere the draft lands, editable.
CitationFreeSources for the draft.
Confidence markProHow sure the system is, with what it rests on.
ThreadFreeThe customer's conversation.

Install draft in the reply box

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

Rules that matter most here

Unknown stays unknown
When the docs don't answer it, the draft says so; it does not invent an answer.
The agent is always named, by the app
The customer is told, by your app, that part of the reply is AI-written.
Model output is text, never markup
A draft with a link in it is plain text until a person adds the link themselves.

Already covered elsewhere

Builds the whole screen with an agent route and a store: Support copilot (Premium), with a -claude twin for the Claude Agent SDK.

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 a support copilot with Candor UI: an agent drafts a reply from the help docs and a person approves, edits or rejects it.
Start from the support-copilot template (support-copilot-claude for the Claude Agent SDK): it brings the queue, the thread, the draft and the agent routes.
Show the draft in the reply box, editable, with a Citation for each article it used and the article's version.
If the help docs don't cover the question, the draft says the agent doesn't know and offers to hand the thread to a person.
Mark the draft with AiContentLabel until a person has edited it, and tell the customer which part was written by the AI.
Sending is the person's action: no auto-send, and the draft is never pre-approved.
Draft text is text: no HTML and no clickable links from model output.
Use human-handoff when the thread should go to a person.

Start from the "Queue, thread and draft" layout: A queue list on the left, the customer thread in the middle, and the agent's draft with citations on the right.
Candor items: support-copilot (https://candor.themethodic.com/docs/support-copilot.md), inbox (https://candor.themethodic.com/docs/inbox.md), citation (https://candor.themethodic.com/docs/citation.md), ai-content-label (https://candor.themethodic.com/docs/ai-content-label.md).
Install: npx candor-ui add support-copilot inbox citation ai-content-label
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.