# Candor UI > 239 shadcn/ui components and hooks for AI agents that do real work: chat, plans, approvals, diffs, runs, traces and evals, plus the app shell, team and admin screens around them. Components take plain, typed data; adapters map the Vercel AI SDK, the Claude Agent SDK and AG-UI. By Methodic LLC. Install with the candor-ui CLI (it wraps shadcn and keeps a lockfile for updates): ```bash npx candor-ui@latest init --yes npx candor-ui add thread message composer ``` Files land where shadcn puts them: `@/components/`, `@/components/ui/` and `@/lib/` (types are in `@/lib/chat`). Components with state or handlers need "use client" in the Next.js App Router. Pro and Premium items need a licence key, which the person adds with `npx candor-ui key ` (never in chat or a committed file). `npx candor-ui update` updates installed items and keeps local changes; `npx candor-ui doctor` checks the setup. Getting started: https://candor.themethodic.com/get-started. Without the CLI, add `"@candor": "https://candor.themethodic.com/r/{name}.json"` to components.json and use `npx shadcn@latest add @candor/`. Rules every Candor screen keeps: model output is never rendered as HTML or a clickable link; unknown values stay unknown and estimates are labelled; a control that can't be used says why; nothing is pre-selected in a decision; the agent is named from app data, never from model output. Free items are MIT; the rest are under the Candor UI Commercial Licence. Every docs page is Markdown at its address plus `.md` (https://candor.themethodic.com/docs/thread.md), listed below. The docs MCP server at https://candor.themethodic.com/mcp (remote, streamable HTTP, read-only, no key) searches them and suggests components for a task; in Claude Code: `claude mcp add --transport http candor https://candor.themethodic.com/mcp`. - [Get started](https://candor.themethodic.com/get-started.md): install, connect an agent, licence keys, updates, the lockfile, moved files and `verify` for CI - [Setup guides](https://candor.themethodic.com/guides): the registry, the docs MCP server in each tool's own config and the skill, for Claude Code, Cursor, Codex, VS Code with Copilot, Windsurf, Zed, Cline, OpenCode, JetBrains, v0, Lovable and Replit - [Agent skill](https://github.com/MethodicDev/candor/tree/main/skills/candor-ui): install with `npx skills add MethodicDev/candor` - [Agent UI skill](https://github.com/MethodicDev/candor/tree/main/skills/candor-agent-ui): design fundamentals for screens where an AI agent acts, with a review checklist to run after each screen; works with or without Candor - [Design system](https://candor.themethodic.com/design.md): every colour role and what it's for, the type scale, radius, shadows, motion, density and themes, read from the shipped CSS, and how to re-token for a brand - [Review checklist](https://candor.themethodic.com/review-checklist.md): one line per check, each tied to a rule, for after each screen - [Full reference](https://candor.themethodic.com/llms-full.txt): every component with its props ## Chat - [a2ui-surface](https://candor.themethodic.com/docs/a2ui-surface.md) (Pro): Draws an A2UI surface with Candor's parts, streaming or finished, with inputs bound to its data model. - [agent-avatar](https://candor.themethodic.com/docs/agent-avatar.md): An agent's glyph and hue by role, so people can tell agents apart at a glance. Exports `AgentAvatar`, `AgentBadge`, `AgentRolesProvider`. - [ai-content-label](https://candor.themethodic.com/docs/ai-content-label.md) (Pro): A label for content that is wholly or partly AI-generated: "AI-generated", "AI-modified", or "AI involvement not recorded" when the app has no record. - [ai-disclosure](https://candor.themethodic.com/docs/ai-disclosure.md): A plain notice that the person is interacting with an AI system: a first line in the thread (`variant="line"`) or a compact "AI" badge for a thread header (`variant="badge"`) that opens to the app's own explanation. - [attachment-preview](https://candor.themethodic.com/docs/attachment-preview.md): A file waiting to be sent, as a chip in the composer: its name, then upload progress, an error, or its size, and a remove button. Exports `AttachmentChip`, `AttachmentPreview`, `AttachmentList`. - [card-registry](https://candor.themethodic.com/docs/card-registry.md): A card an agent's reply can carry. Exports `Card`, `CardRegistryProvider`. - [citation](https://candor.themethodic.com/docs/citation.md): An inline [n] that opens its source in a popover, so evidence is one step away without leaving the thread. Exports `Citation`, `SourceList`, `SourceDetail`. - [composer](https://candor.themethodic.com/docs/composer.md): Where a person writes to the agent: @ mentions attach things as references, / starts a known action, and the scope says where the ask runs. - [context-meter](https://candor.themethodic.com/docs/context-meter.md): What fills the model's context budget, as a ring in the composer that opens to a breakdown: system, instructions, Know, the thread, tools, files. - [dictation](https://candor.themethodic.com/docs/dictation.md) (Pro): Voice input for the composer: a microphone button that dictates speech to text into the message box, on the device or through your own transcribe, for the person to edit before sending. Exports `DictationButton`. - [entity-chip](https://candor.themethodic.com/docs/entity-chip.md): A thing in the user's system (a table, a record, a flow) as a chip with its kind's icon, that can open it. Exports `EntityChip`, `EntityKindsProvider`. - [entity-disambiguation](https://candor.themethodic.com/docs/entity-disambiguation.md) (Pro): When a name matches more than one thing ("Account" the table, the report, the record type), the agent asks which one instead of guessing. - [folded-turns](https://candor.themethodic.com/docs/folded-turns.md): A run of turns folded into one line, for long agent work a reader doesn't need to see step by step: "Drafted three versions and compared them". - [mcp-app-frame](https://candor.themethodic.com/docs/mcp-app-frame.md) (Pro): Shows an MCP App, a tool's own UI, isolated in a sandbox on another origin; without a sandbox it says why instead of running it. - [message-actions](https://candor.themethodic.com/docs/message-actions.md): Copy, retry and rate under an agent's reply. - [message-branches](https://candor.themethodic.com/docs/message-branches.md) (Pro): Page through versions of a reply (after a retry or an edited question): "‹ 2 / 3 ›". - [message-content](https://candor.themethodic.com/docs/message-content.md): A message's typed blocks (paragraphs, lists, code, tool calls, cards), rendered as text, never as markdown or HTML. Exports `MessageContent`, `Inline`. - [message](https://candor.themethodic.com/docs/message.md): One message in a thread. Exports `Message`, `MessageHeader`, `MessageBody`, `MessageFooter`, `MessageAttribution`. - [payload](https://candor.themethodic.com/docs/payload.md): A block of code or query text from the agent: a query it ran, code it wrote, a config file. - [permission-prompt](https://candor.themethodic.com/docs/permission-prompt.md): A tool call waiting for a person's go-ahead: what it will do, why it reached them, and the permission mode the run is in. - [prompt-suggestions](https://candor.themethodic.com/docs/prompt-suggestions.md): Prompts to start from. - [reasoning](https://candor.themethodic.com/docs/reasoning.md): The agent's stated reasoning above its answer. - [report-reply](https://candor.themethodic.com/docs/report-reply.md) (Pro): Flag a reply for a person to review: why, and an optional note. - [selection-actions](https://candor.themethodic.com/docs/selection-actions.md) (Pro): Select text inside a reply and act on just that part: ask a follow-up about it, have it explained, or quote it into the composer. - [standard-cards](https://candor.themethodic.com/docs/standard-cards.md) (Pro): The cards Candor ships, ready to register: query results, metrics, a plan (with its state: proposed, accepted or sent back), a blast radius and test results. - [thread-divider](https://candor.themethodic.com/docs/thread-divider.md): A rule across the thread with a label in the middle: a day ("Today", "Yesterday", "5 Nov 2026") or a chapter of the conversation ("Drafting", "Review"). - [thread-event](https://candor.themethodic.com/docs/thread-event.md): A quiet, centred line in a thread for something that happened rather than something said: "Sam joined", "Switched to the staging environment", "Run stopped by a guardrail". - [thread-header](https://candor.themethodic.com/docs/thread-header.md) (Pro): The bar above a thread: its title, the environment it acts on, and who is working on it right now. - [thread](https://candor.themethodic.com/docs/thread.md): The scrolling message column. - [tool-call](https://candor.themethodic.com/docs/tool-call.md): One tool call as a compact row: what it did in plain words, its status, and how long it took. Exports `ToolCall`, `ToolCallGroup`. ## Agent work - [agent-activity](https://candor.themethodic.com/docs/agent-activity.md) (Pro): Who is working right now: each agent, what it is doing in plain words, and its state in words beside the dot, so state is never colour alone. - [approval-queue](https://candor.themethodic.com/docs/approval-queue.md) (Pro): Approval requests by what they need from the viewer. - [approval-request](https://candor.themethodic.com/docs/approval-request.md) (Pro): A request for second-level approval: what changes, where, what it touches, whether it can be undone, and the hash that ties the decision to exactly this change. Compact for a phone or a notification. Exports `ApprovalRequest`, `ApprovalDecision`. - [blast-radius](https://candor.themethodic.com/docs/blast-radius.md) (Pro): What a plan step can reach in the environment, grouped by kind of thing. - [checkpoint-list](https://candor.themethodic.com/docs/checkpoint-list.md) (Pro): Restore points in a run, one per turn, with what each one holds and where the person is now. - [clarifying-questions](https://candor.themethodic.com/docs/clarifying-questions.md) (Pro): The agent's questions before it plans (the first of two turns). - [file-list](https://candor.themethodic.com/docs/file-list.md) (Pro): The files the work produced: each with its type, size and where it stands ("Checked", "Not yet checked"), Open for the ones the reader can show, and Download, with a menu when it comes in several formats. - [guardrail-notice](https://candor.themethodic.com/docs/guardrail-notice.md) (Pro): One line saying a guardrail stopped something: what was stopped, and which rule stopped it. - [hold-to-confirm](https://candor.themethodic.com/docs/hold-to-confirm.md) (Pro): A button a person holds down before a risky step runs: the pointer, or Space or Enter, kept down for `holdMs` (1.2 seconds unless the app says otherwise). - [log-stream](https://candor.themethodic.com/docs/log-stream.md) (Pro): A run's live log. - [metadata-diff](https://candor.themethodic.com/docs/metadata-diff.md) (Pro): The change as files: one tab per file, each named by the thing it is (a field, a layout) as well as its path, with a unified diff that highlights the exact words that changed inside a line. Exports `ChangeDiff`. - [plan](https://candor.themethodic.com/docs/plan.md) (Pro): An agent's plan. - [restore-dialog](https://candor.themethodic.com/docs/restore-dialog.md) (Pro): Restores a checkpoint's code, conversation or both, says what a restore doesn't undo, and shows what the app checked afterwards, never "Restored" without a check. Exports `RestoreDialog`, `RestoreResult`. - [result-card](https://candor.themethodic.com/docs/result-card.md) (Pro): A finished piece of work, handed over: the answer first, in a few lines, then the receipt (what it cost, how long it took, what checked it) and the files to open or download, then your actions (Accept, Ask for changes). - [result-table](https://candor.themethodic.com/docs/result-table.md) (Pro): Query rows as a typed, sortable table. - [review-canvas](https://candor.themethodic.com/docs/review-canvas.md) (Pro): The governed review surface (Candor's ReviewCanvas): the plan on one side; select a step and its log, diff, blast radius and reasoning appear on the other. - [review-ladder](https://candor.themethodic.com/docs/review-ladder.md) (Pro): How much a person reviews before agents act: the ladder from Advise to Full delegation. - [run-heartbeat](https://candor.themethodic.com/docs/run-heartbeat.md) (Pro): A run's state that never claims it's alive when nothing has been heard: "No update since 10:42" past a threshold, a host that's offline, or what it needs from the person. - [run-recovery](https://candor.themethodic.com/docs/run-recovery.md) (Pro): A run that stopped. - [run-tree](https://candor.themethodic.com/docs/run-tree.md) (Pro): Who is doing what: the orchestrator and the specialists it handed work to, as a tree. - [ship-review](https://candor.themethodic.com/docs/ship-review.md) (Pro): The last look before a change reaches production: what ships, each check it must pass (validation, tests, approval), and how to undo it. - [steer-composer](https://candor.themethodic.com/docs/steer-composer.md) (Pro): Send a message into a run while it works, and see whether the agent has picked it up yet, never shown as read until the service says so. - [task-tray](https://candor.themethodic.com/docs/task-tray.md) (Pro): Work running in the background, as one pill: how many are running and how many need you. - [test-results](https://candor.themethodic.com/docs/test-results.md) (Pro): A test run that leads with what failed. - [undo-window](https://candor.themethodic.com/docs/undo-window.md) (Pro): An action just taken ("Deleted 3 rows"), with Undo for as long as the app says it can be undone: `until` (when the server said the window closes) or `seconds` (the window the server granted, counted from when this appears). ## Templates - [agent-ops-console](https://candor.themethodic.com/docs/agent-ops-console.md) (Premium): An app section for running one agent: an overview of today's runs, spend and failures; runs with their log, trace, receipt and retry, skip or stop; a monthly budget the agent stops at; admin-only settings for its tools, model and versioned instructions; and a chat that drives runs. The agent routes enforce the settings and the budget. Exports `GET`, `POST`, `POST`, `POST`, `GET`, `POST`, `ChatPage`, `Layout`, `OverviewPage`, `RunsPage`, `SettingsPage`, `SpendPage`, `OpsShell`, `OpsChat`. - [agent-ops-console-claude](https://candor.themethodic.com/docs/agent-ops-console-claude.md) (Premium): An app section for running one agent: an overview of today's runs, spend and failures; runs with their log, trace, receipt and retry, skip or stop; a monthly budget the agent stops at; admin-only settings for its tools, model and versioned instructions; and a chat that drives runs. The agent routes enforce the settings and the budget. Exports `POST`, `GET`, `POST`, `POST`, `POST`, `GET`, `POST`, `ChatPage`, `Layout`, `OverviewPage`, `RunsPage`, `SettingsPage`, `SpendPage`, `OpsShell`, `OpsChat`. - [approvals-inbox](https://candor.themethodic.com/docs/approvals-inbox.md) (Premium): One place where people decide what agents asked to do: an inbox of requests from several agents, each with its blast radius, diff and rollback, a hash-bound decision, two different approvers for production, a history of every decision, and an agent that can only apply what's approved. Exports `AgentChat`, `AgentPage`, `POST`, `GET`, `GET`, `POST`, `GET`, `HistoryPage`, `InboxPage`, `RequestPage`, `RulesPage`, `Shell`. - [approvals-inbox-claude](https://candor.themethodic.com/docs/approvals-inbox-claude.md) (Premium): One place where people decide what agents asked to do: an inbox of requests from several agents, each with its blast radius, diff and rollback, a hash-bound decision, two different approvers for production, a history of every decision, and an agent that can only apply what's approved. Exports `AgentChat`, `AgentPage`, `POST`, `POST`, `GET`, `GET`, `POST`, `GET`, `HistoryPage`, `InboxPage`, `RequestPage`, `RulesPage`, `Shell`. - [project-workspace](https://candor.themethodic.com/docs/project-workspace.md) (Premium): A workspace where each project is a conversation with an agent team: a rail of projects grouped by what needs you, the thread, and a panel with the project's overview, plan, files and history. The agent plans, works and hands over files, but it stops for the person at the spending limit and on any decision it asks for, and the receipt shows only what was recorded. Exports `GET`, `POST`, `GET`, `POST`, `WorkspacePage`, `Workspace`. - [project-workspace-claude](https://candor.themethodic.com/docs/project-workspace-claude.md) (Premium): A workspace where each project is a conversation with an agent team: a rail of projects grouped by what needs you, the thread, and a panel with the project's overview, plan, files and history. The agent plans, works and hands over files, but it stops for the person at the spending limit and on any decision it asks for, and the receipt shows only what was recorded. Exports `POST`, `GET`, `POST`, `GET`, `POST`, `WorkspacePage`, `Workspace`. - [support-copilot](https://candor.themethodic.com/docs/support-copilot.md) (Premium): A support desk where an agent drafts answers from the help docs, with citations, and a person approves, edits or rejects every draft before the customer sees it. The agent hands threads to a person when it should, and reviewers' decisions feed a quality view. Exports `GET`, `POST`, `GET`, `GET`, `POST`, `GET`, `POST`, `CustomerPage`, `HandoffsPage`, `QueuePage`, `QualityPage`, `SupportShell`, `ThreadScreen`, `Page`, `ThreadLine`, `LiveHandoffCard`. - [support-copilot-claude](https://candor.themethodic.com/docs/support-copilot-claude.md) (Premium): A support desk where an agent drafts answers from the help docs, with citations, and a person approves, edits or rejects every draft before the customer sees it. The agent hands threads to a person when it should, and reviewers' decisions feed a quality view. Exports `POST`, `GET`, `POST`, `GET`, `GET`, `POST`, `GET`, `POST`, `CustomerPage`, `HandoffsPage`, `QueuePage`, `QualityPage`, `SupportShell`, `ThreadScreen`, `Page`, `ThreadLine`, `LiveHandoffCard`. ## Full-stack blocks - [agent-admin](https://candor.themethodic.com/docs/agent-admin.md) (Premium): An admin page for one agent: which tools it may use and which ask first, its model and effort, versioned instructions, and a monthly spend limit. The agent routes enforce every setting. Exports `POST`, `GET`, `POST`, `Page`, `SettingsPage`, `AgentChat`. - [agent-admin-claude](https://candor.themethodic.com/docs/agent-admin-claude.md) (Premium): An admin page for one agent: which tools it may use and which ask first, its model and effort, versioned instructions, and a monthly spend limit. The agent routes enforce every setting. Exports `POST`, `POST`, `GET`, `POST`, `Page`, `SettingsPage`, `AgentChat`. - [approval-gated-change](https://candor.themethodic.com/docs/approval-gated-change.md) (Premium): An agent proposes a settings change and shows what it touches; a different person approves that exact change in a queue before it applies. Exports `GET`, `POST`, `POST`, `Page`, `QueuePage`, `ApprovalGatedChange`. - [approval-gated-change-claude](https://candor.themethodic.com/docs/approval-gated-change-claude.md) (Premium): An agent proposes a settings change and shows what it touches; a different person approves that exact change in a queue before it applies. Exports `POST`, `GET`, `POST`, `POST`, `Page`, `QueuePage`, `ApprovalGatedChange`. - [approve-from-anywhere](https://candor.themethodic.com/docs/approve-from-anywhere.md) (Premium): A run pauses at a write and emails the approver an id, not a link; they open a compact approval page, decide against the change's hash (editing it first if they need to), and the run resumes, even after a server restart. Exports `GET`, `GET`, `GET`, `POST`, `PUT`, `ApprovePage`, `Page`, `SignedInAs`, `ApproveFromAnywhere`. - [approve-from-anywhere-claude](https://candor.themethodic.com/docs/approve-from-anywhere-claude.md) (Premium): A run pauses at a write and emails the approver an id, not a link; they open a compact approval page, decide against the change's hash (editing it first if they need to), and the run resumes, even after a server restart. Exports `GET`, `GET`, `GET`, `POST`, `PUT`, `ApprovePage`, `Page`, `SignedInAs`, `ApproveFromAnywhere`. - [audit-data-controls](https://candor.themethodic.com/docs/audit-data-controls.md) (Premium): An audit log of everything the agent and people did, with export, retention and delete. The agent can search the log and prepare an export; deleting data or changing retention needs the person's go-ahead and their typed confirmation. Exports `GET`, `POST`, `POST`, `DataPage`, `Page`, `AuditDataChat`. - [audit-data-controls-claude](https://candor.themethodic.com/docs/audit-data-controls-claude.md) (Premium): An audit log of everything the agent and people did, with export, retention and delete. The agent can search the log and prepare an export; deleting data or changing retention needs the person's go-ahead and their typed confirmation. Exports `POST`, `GET`, `POST`, `POST`, `DataPage`, `Page`, `AuditDataChat`. - [cost-guard](https://candor.themethodic.com/docs/cost-guard.md) (Premium): Before a run the agent estimates its cost from recorded runs, or says it can't; the person approves a budget; spend is recorded from the usage the SDK reports, and the run stops on the server when it reaches the budget and says why. Exports `POST`, `GET`, `Page`, `CostGuard`. - [cost-guard-claude](https://candor.themethodic.com/docs/cost-guard-claude.md) (Premium): Before a run the agent estimates its cost from recorded runs, or says it can't; the person approves a budget; spend is recorded from the usage the SDK reports, and the run stops on the server when it reaches the budget and says why. Exports `POST`, `POST`, `GET`, `Page`, `CostGuard`. - [eval-dashboard](https://candor.themethodic.com/docs/eval-dashboard.md) (Premium): Each version of an agent runs a fixed suite of cases checked in code; an agent reads and compares the runs and explains regressions from recorded results, and a version goes to production only after approval, refused when its latest run fails a case production passes. Exports `POST`, `GET`, `ComparePage`, `Page`, `RunComparison`, `CaseDetail`, `EvalDashboard`. - [eval-dashboard-claude](https://candor.themethodic.com/docs/eval-dashboard-claude.md) (Premium): Each version of an agent runs a fixed suite of cases checked in code; an agent reads and compares the runs and explains regressions from recorded results, and a version goes to production only after approval, refused when its latest run fails a case production passes. Exports `POST`, `POST`, `GET`, `ComparePage`, `Page`, `RunComparison`, `CaseDetail`, `EvalDashboard`. - [eval-review-loop](https://candor.themethodic.com/docs/eval-review-loop.md) (Premium): People grade a support agent's replies, recorded checks score them, and an agent summarises the failures and proposes an instructions change that applies, as a new version, only after approval. Exports `GET`, `POST`, `POST`, `Page`, `ReviewPage`, `EvalReviewLoop`. - [eval-review-loop-claude](https://candor.themethodic.com/docs/eval-review-loop-claude.md) (Premium): People grade a support agent's replies, recorded checks score them, and an agent summarises the failures and proposes an instructions change that applies, as a new version, only after approval. Exports `POST`, `GET`, `POST`, `POST`, `Page`, `ReviewPage`, `EvalReviewLoop`. - [human-handoff](https://candor.themethodic.com/docs/human-handoff.md) (Premium): A support agent answers a customer and hands the thread to a person when it should; the agent stops replying, and a person claims it in an inbox, answers, and can hand it back. Exports `GET`, `POST`, `POST`, `GET`, `POST`, `InboxPage`, `Page`, `LiveHandoffCard`, `HumanHandoff`. - [human-handoff-claude](https://candor.themethodic.com/docs/human-handoff-claude.md) (Premium): A support agent answers a customer and hands the thread to a person when it should; the agent stops replying, and a person claims it in an inbox, answers, and can hand it back. Exports `POST`, `GET`, `POST`, `POST`, `GET`, `POST`, `InboxPage`, `Page`, `LiveHandoffCard`, `HumanHandoff`. - [knowledge-base](https://candor.themethodic.com/docs/knowledge-base.md) (Premium): An agent answers only from published help articles, citing each article and version, says it doesn't know when nothing matches and records the question as a gap, and drafts an article change that publishes, as a new version, only after approval; people edit articles and see the gaps on their own page. Exports `GET`, `POST`, `POST`, `ArticlesPage`, `Page`, `ArticleDraft`, `ArticleLine`, `KnowledgeBase`. - [knowledge-base-claude](https://candor.themethodic.com/docs/knowledge-base-claude.md) (Premium): An agent answers only from published help articles, citing each article and version, says it doesn't know when nothing matches and records the question as a gap, and drafts an article change that publishes, as a new version, only after approval; people edit articles and see the gaps on their own page. Exports `POST`, `GET`, `POST`, `POST`, `ArticlesPage`, `Page`, `ArticleDraft`, `ArticleLine`, `KnowledgeBase`. - [plan-build-review](https://candor.themethodic.com/docs/plan-build-review.md) (Premium): An agent asks what it needs to know, proposes a plan the person accepts or sends back, carries out the steps with a live log, asking before any step that changes something, and ends with a ship review the person accepts or sends back. Exports `POST`, `GET`, `POST`, `Page`, `PlanBuildReview`. - [plan-build-review-claude](https://candor.themethodic.com/docs/plan-build-review-claude.md) (Premium): An agent asks what it needs to know, proposes a plan the person accepts or sends back, carries out the steps with a live log, asking before any step that changes something, and ends with a ship review the person accepts or sends back. Exports `POST`, `POST`, `GET`, `POST`, `Page`, `PlanBuildReview`. - [run-console](https://candor.themethodic.com/docs/run-console.md) (Premium): An agent starts and steers runs from the chat; a console lists every run with its log, trace and receipt, and when a step fails the person chooses retry, skip or stop, allowing any retry that changes something. Exports `POST`, `GET`, `ConsolePage`, `Page`, `RunConsoleChat`. - [run-console-claude](https://candor.themethodic.com/docs/run-console-claude.md) (Premium): An agent starts and steers runs from the chat; a console lists every run with its log, trace and receipt, and when a step fails the person chooses retry, skip or stop, allowing any retry that changes something. Exports `POST`, `POST`, `GET`, `ConsolePage`, `Page`, `RunConsoleChat`. ## Adapters - [ag-ui](https://candor.themethodic.com/docs/ag-ui.md): Turns AG-UI events into Candor messages, waiting approvals and usage, with AG-UI 1.0's shared state and activities. - [ai-sdk](https://candor.themethodic.com/docs/ai-sdk.md): Vercel AI SDK (v7) UI messages to Candor messages: text, reasoning, tool calls, sources and data cards. - [claude-agent-sdk](https://candor.themethodic.com/docs/claude-agent-sdk.md): Turns Claude Agent SDK events into Candor messages, waiting approvals (and the agent's questions), usage and sources, and a person's answer back into the SDK's result. - [claude-agent-server](https://candor.themethodic.com/docs/claude-agent-server.md): The server half of the Claude Agent SDK adapter: stream a run to useClaudeAgent, keep its permission requests in a store your own route can answer, and let a browser re-attach to a run after a reload. - [use-ag-ui](https://candor.themethodic.com/docs/use-ag-ui.md): Wires an AG-UI agent to Candor: messages for /, props for , and the interrupts waiting on a person. - [use-candor-chat](https://candor.themethodic.com/docs/use-candor-chat.md): Wires a `useChat()` result to Candor: messages for /, props for , and the tool calls waiting on a person. - [use-claude-agent](https://candor.themethodic.com/docs/use-claude-agent.md): Wires a Claude Agent SDK server route to Candor: messages for /, props for , and the tool calls waiting on a person, re-attaching to a run after a reload. ## Agents - [agent-roster](https://candor.themethodic.com/docs/agent-roster.md) (Pro): Every agent on the team: role, model, whether it's on, and two weeks of runs. - [instructions-editor](https://candor.themethodic.com/docs/instructions-editor.md) (Pro): An agent's standing instructions, with variables like {{workspace.name}} that are filled in per run. - [mcp-connect](https://candor.themethodic.com/docs/mcp-connect.md) (Pro): Consent to connect an MCP server: where it runs and who runs it, what it says it can do (its tools, by name and description), the permissions it asks for, and how to disconnect later. - [model-settings](https://candor.themethodic.com/docs/model-settings.md) (Pro): Which model an agent uses and how hard it thinks. - [permission-mode](https://candor.themethodic.com/docs/permission-mode.md) (Pro): The agent's permission mode, with what each mode lets it do written out, and a way to change it. - [tool-permissions](https://candor.themethodic.com/docs/tool-permissions.md) (Pro): What each tool an agent may call is allowed to do: always, ask first, or never. ## App shell - [account-state](https://candor.themethodic.com/docs/account-state.md) (Pro): A whole-page stop for a signed-in person the app can't show anything to yet: no account, removed from one, email not verified, an invite to accept. - [app-layout](https://candor.themethodic.com/docs/app-layout.md) (Pro): The app frame: sidebar, main column, and an optional side panel the person can resize by dragging (or with the arrow keys on the divider). - [app-sidebar](https://candor.themethodic.com/docs/app-sidebar.md) (Pro): The left rail: the brand, a new-thread button, the main places (threads, inbox, approvals…), the thread list, and the signed-in person at the foot. - [artifact-panel](https://candor.themethodic.com/docs/artifact-panel.md) (Pro): A document or file to read beside the work, for a SidePanel tab or a full-width view. - [command-palette](https://candor.themethodic.com/docs/command-palette.md) (Pro): Search or jump (⌘K): pages, threads, places and actions from one box, with the service's own results alongside. Exports `CommandPalette`, `CommandTrigger`. - [environment-band](https://candor.themethodic.com/docs/environment-band.md) (Pro): A slim strip naming the account and the environment in scope, in the environment's own colour. Exports `EnvironmentBand`, `EnvironmentMark`. - [inbox](https://candor.themethodic.com/docs/inbox.md) (Pro): Every agent thread that has something for you, by what it needs: approvals and questions waiting on you first, then failures, then work that finished. - [notification-center](https://candor.themethodic.com/docs/notification-center.md) (Pro): Everything that happened while you were away, behind a bell. - [page-header](https://candor.themethodic.com/docs/page-header.md) (Pro): The top of every page that isn't a thread: where you are (breadcrumb), what the page is, what you can do here (actions), and its views (tabs). - [page-state](https://candor.themethodic.com/docs/page-state.md) (Pro): What a page shows instead of its content: nothing here yet (empty), nothing matches the filters (no-match), something broke (error), or it can't be shown to you (unavailable). Exports `PageState`, `PageSkeleton`. - [service-notice](https://candor.themethodic.com/docs/service-notice.md) (Pro): A notice about the service itself, above the composer: a usage limit, a model that's down, a trial running out. - [session-expired](https://candor.themethodic.com/docs/session-expired.md) (Pro): The sign-in ran out while the app was open. Exports `SessionExpiredDialog`. - [session-list](https://candor.themethodic.com/docs/session-list.md) (Pro): Threads, newest first, grouped by day, with pinned threads on top. - [settings-layout](https://candor.themethodic.com/docs/settings-layout.md) (Pro): Settings: grouped sections down the side and the open one beside them. Exports `SettingsLayout`, `SettingsSection`. - [shortcuts-dialog](https://candor.themethodic.com/docs/shortcuts-dialog.md) (Pro): Every keyboard shortcut, grouped by where it works, printed for this platform (⌘ on a Mac, Ctrl elsewhere). - [side-panel](https://candor.themethodic.com/docs/side-panel.md) (Pro): The panel beside the thread: one tab per open item (a diff, an approval, a document), each closable. - [toast](https://candor.themethodic.com/docs/toast.md) (Pro): Short notices in the corner: polite for successes, assertive for errors, which stay until dismissed. Exports `Toaster`. ## Team - [access-request](https://candor.themethodic.com/docs/access-request.md) (Pro): Ask for a role you don't have on an environment. - [account-create](https://candor.themethodic.com/docs/account-create.md) (Pro): Create your company's account. - [audit-log](https://candor.themethodic.com/docs/audit-log.md) (Pro): The account's audit log. - [consent-ceremony](https://candor.themethodic.com/docs/consent-ceremony.md) (Pro): Consent that names exactly what flows where (Candor's CeremonySurface): each flow as what → where → how long it's kept, an acknowledgement the person ticks themselves, and how to take it back. - [invite-chooser](https://candor.themethodic.com/docs/invite-chooser.md) (Pro): Shown at sign-in when more than one account has invited you. - [invite-members](https://candor.themethodic.com/docs/invite-members.md) (Pro): Invite people by pasting any list of emails. - [members-table](https://candor.themethodic.com/docs/members-table.md) (Pro): Members, their role on each environment, and invites still pending. - [profile-settings](https://candor.themethodic.com/docs/profile-settings.md) (Pro): Who you are in the app: your name, your email (shown, but changed through your sign-in provider, which the field says), your time zone for schedules and timestamps, and your theme. - [setup-checklist](https://candor.themethodic.com/docs/setup-checklist.md) (Pro): What's left before the first useful answer: connect an environment, let the agents read it, invite the team. - [sign-in](https://candor.themethodic.com/docs/sign-in.md) (Pro): Sign in without a password: your company's SSO, or a one-time code sent to your email. - [step-walker](https://candor.themethodic.com/docs/step-walker.md) (Pro): A guided walk (Candor's StepWalker): the stages across the top, the current one as a focus card below. - [terms-consent](https://candor.themethodic.com/docs/terms-consent.md) (Pro): The AI disclosure and terms, asked once per terms version. ## Knowledge - [confidence-mark](https://candor.themethodic.com/docs/confidence-mark.md) (Pro): How sure the system is, with what it rests on. - [diagram](https://candor.themethodic.com/docs/diagram.md) (Pro): A diagram an agent wrote as Mermaid (a data model, a flow, a sequence), rendered in strict mode in the theme's colours. - [freshness-stamp](https://candor.themethodic.com/docs/freshness-stamp.md) (Pro): How old a piece of knowledge is (Candor's FreshnessStamp). - [knowledge-sources](https://candor.themethodic.com/docs/knowledge-sources.md) (Pro): Where the agents' knowledge comes from, grouped by door: the environment itself, sampled data, files and links people shared, answers they gave. - [memory-manager](https://candor.themethodic.com/docs/memory-manager.md) (Pro): What agents remember about this account, one line each, with who taught it and when. - [memory-mode](https://candor.themethodic.com/docs/memory-mode.md) (Pro): Whether agents use memory: on, paused or off, with what each does to the memories already kept. - [memory-used](https://candor.themethodic.com/docs/memory-used.md) (Pro): The line under a reply that says what it remembered: "Used 2 memories", which opens them, each with who taught it and when. - [prose-diff](https://candor.themethodic.com/docs/prose-diff.md) (Pro): An agent's rewrite of a document (a knowledge page, a process description), shown word by word against the original. - [provenance-trace](https://candor.themethodic.com/docs/provenance-trace.md) (Pro): Live provenance (Candor's ProvenanceOverlay). - [raci-chip](https://candor.themethodic.com/docs/raci-chip.md) (Pro): Who's responsible, accountable, consulted or informed, as a compact chip. Exports `RaciChips`. - [retrieval-inspector](https://candor.themethodic.com/docs/retrieval-inspector.md) (Pro): The passages behind an answer, in the order the retriever ranked them. - [source-ingest](https://candor.themethodic.com/docs/source-ingest.md) (Pro): Add knowledge: drop files, paste a link, or paste text (meeting notes, a process description). - [version-history](https://candor.themethodic.com/docs/version-history.md) (Pro): Live, draft and past versions of something editable (an agent's settings, a knowledge page), newest first, with who changed it and why. ## Operations - [run-estimate](https://candor.themethodic.com/docs/run-estimate.md) (Pro): What a run is likely to take before it starts: cost, time and (when it makes them) API calls, as ranges with what they're based on. - [run-log](https://candor.themethodic.com/docs/run-log.md) (Pro): Every agent run, one line each, newest first: status, what it was, who ran it, where, when, how long and what it cost. - [run-receipt](https://candor.themethodic.com/docs/run-receipt.md) (Pro): What one run cost and where it went: per model (input, output and cached tokens, cost), tool calls, and any other figures the app measures. - [spend-breakdown](https://candor.themethodic.com/docs/spend-breakdown.md) (Pro): AI spend over time, split by model, agent or feature. - [trace-viewer](https://candor.themethodic.com/docs/trace-viewer.md) (Pro): One run as a timeline: each span (agent step, model call, tool, external call, a wait for a person) as a bar on a shared clock, nested under its parent. - [usage-meters](https://candor.themethodic.com/docs/usage-meters.md) (Pro): What's used against each limit: seats, an environment's daily API allowance, agent work. ## Evals - [eval-scorecard](https://candor.themethodic.com/docs/eval-scorecard.md) (Pro): An eval run against its baseline: overall pass rate, then each criterion's rate, its change from the baseline, and a regression flag where it fell by more than the threshold. - [failure-clusters](https://candor.themethodic.com/docs/failure-clusters.md) (Pro): Failing runs grouped by what went wrong, largest first, each with its share of failures, how it moved since last period, and a few real examples. - [quality-trend](https://candor.themethodic.com/docs/quality-trend.md) (Pro): Scores over time (judge scores on live threads, by default), with what changed alongside: a model switch, an instructions edit, a new tool. - [review-queue](https://candor.themethodic.com/docs/review-queue.md) (Pro): Grade real agent answers one at a time, from the keyboard: P pass, F fail, J/K next and previous. ## Admin - [channel-setup](https://candor.themethodic.com/docs/channel-setup.md) (Pro): Where agents can reach the team outside the app, one row per channel: its status, where it posts, and when an agent may post without asking. - [data-controls](https://candor.themethodic.com/docs/data-controls.md) (Pro): Control over the account's data: facts about how it's used (from the service), an export, deleting thread history, and deleting the account. - [data-region](https://candor.themethodic.com/docs/data-region.md) (Pro): Where the account's data lives and is processed, service by service. - [data-retention](https://candor.themethodic.com/docs/data-retention.md) (Pro): How long each kind of data is kept, and what happens after. - [device-sessions](https://candor.themethodic.com/docs/device-sessions.md) (Pro): Everywhere you're signed in, with how each session signed in (browser, device code, or a token from the environment), where, and when it was last used. - [email-layout](https://candor.themethodic.com/docs/email-layout.md) (Pro): The shell every transactional email uses: brand, title, body, one next step, and why you got it, rendered to HTML that survives email clients. Exports `EmailLayout`, `EmailPreview`. - [notification-preferences](https://candor.themethodic.com/docs/notification-preferences.md) (Pro): What reaches you, and where: one row per kind of event, one column per channel. - [role-matrix](https://candor.themethodic.com/docs/role-matrix.md) (Pro): What each role can do, as a matrix. - [schedule-list](https://candor.themethodic.com/docs/schedule-list.md) (Pro): Recurring agent jobs (a morning health check, a weekly hygiene report): when they run in plain words, when they run next, a strip of recent outcomes, and pause/resume. - [sso-setup](https://candor.themethodic.com/docs/sso-setup.md) (Pro): Single sign-on through the account's identity provider. ## Billing - [downgrade-impact](https://candor.themethodic.com/docs/downgrade-impact.md) (Pro): What moving to a smaller plan takes away, before you confirm: the features you lose (and what happens to anything that used them), the new monthly total, and when it takes effect. - [plan-picker](https://candor.themethodic.com/docs/plan-picker.md) (Pro): Choose a plan and seats. - [subscription-status](https://candor.themethodic.com/docs/subscription-status.md) (Pro): Where the subscription stands: plan, seats paid against seats used, the card on file, and when it renews or ends. ## Collaboration - [away-digest](https://candor.themethodic.com/docs/away-digest.md) (Pro): What happened since you were last here, in the order you'd act on it: waiting on you, failed, finished. - [handoff-card](https://candor.themethodic.com/docs/handoff-card.md) (Pro): A run passed from one person to another while it's in flight: who from, who to, the run and where it is, the note, and what does and doesn't transfer. - [share-thread](https://candor.themethodic.com/docs/share-thread.md) (Pro): Share a thread: who can open it, and where the shared copy ends (so later messages aren't shared by accident). ## Data - [attributes-rail](https://candor.themethodic.com/docs/attributes-rail.md) (Pro): A record's key/value facts as a definition list: label left, value right, hairline-separated. - [column-mapper](https://candor.themethodic.com/docs/column-mapper.md) (Pro): Match file columns to the object's fields. - [data-import](https://candor.themethodic.com/docs/data-import.md) (Pro): Drop a spreadsheet, then see exactly what was read: rows, columns with sample values, and any rows that couldn't be read and why. - [data-table](https://candor.themethodic.com/docs/data-table.md) (Pro): Rows of records: search, sort, filter chips, column settings, selection and pages. - [filter-chips](https://candor.themethodic.com/docs/filter-chips.md) (Pro): Active filters as removable chips, with a clear-all. - [import-review](https://candor.themethodic.com/docs/import-review.md) (Pro): Check rows before they land: how many are ready, which need fixing and why, grouped by kind of problem. - [tree](https://candor.themethodic.com/docs/tree.md) (Pro): A hierarchy (objects → fields, a flow's elements, a knowledge base's sections) with the keyboard behaviour of a tree: ↑↓ move, → opens or steps in, ← closes or steps out, Home/End jump, Enter selects. ## Charts - [bar-chart](https://candor.themethodic.com/docs/bar-chart.md) (Pro): Columns by category, grouped or stacked. - [bullet-bar](https://candor.themethodic.com/docs/bullet-bar.md) (Pro): Actual against a target in one row (coverage against the 75% production needs, adoption against a goal). - [chart-frame](https://candor.themethodic.com/docs/chart-frame.md) (Pro): The chassis every chart sits in (Candor's ChartFrame, the honesty chokepoint): title, legend, a chart/table toggle, and the states a chart can be in. Exports `ChartFrame`, `ChartSizeProvider`. - [donut-chart](https://candor.themethodic.com/docs/donut-chart.md) (Pro): Parts of a whole. - [heatmap](https://candor.themethodic.com/docs/heatmap.md) (Pro): Intensity over a grid (field fill rate by object, runs by hour and day). - [line-chart](https://candor.themethodic.com/docs/line-chart.md) (Pro): Change over time. - [scale](https://candor.themethodic.com/docs/scale.md) (Pro): Chart scales and tick helpers shared by Candor's charts. - [sparkline](https://candor.themethodic.com/docs/sparkline.md) (Pro): A word-sized trend. ## Reports - [comparison-view](https://candor.themethodic.com/docs/comparison-view.md) (Pro): Before and after, numerically: each measure's two values and the change, coloured by whether that change is good for it. - [finding](https://candor.themethodic.com/docs/finding.md) (Pro): One finding with its evidence attached (Candor's NarrativeBlock): severity as icon and word (never colour alone), what was found, the evidence it rests on, and what to do next when there's a clear step. - [insight-ledger](https://candor.themethodic.com/docs/insight-ledger.md) (Pro): The executive summary, in the three states it can honestly be in: not run yet; partial (some sections couldn't be computed, named); or ready, with counts by severity and the few findings that matter most. - [report-sheet](https://candor.themethodic.com/docs/report-sheet.md) (Pro): The paged chassis of a report (release readiness, configuration audit): a cover with what it covers and when its data was read, numbered sections, an export bar, and a provenance footer saying who or what generated it from which sources. Exports `ReportSheet`, `ReportSection`. - [stat-card](https://candor.themethodic.com/docs/stat-card.md) (Pro): One metric: label, value, change against a named period, and a small trend. Exports `StatCard`, `KpiRow`. - [subscore-card](https://candor.themethodic.com/docs/subscore-card.md) (Pro): Weighted subscores behind an overall score. ## Building blocks - [copy-field](https://candor.themethodic.com/docs/copy-field.md): A value a person copies somewhere else (a callback URL, a scope list). - [degraded-panel](https://candor.themethodic.com/docs/degraded-panel.md): Something couldn't be done. - [locale](https://candor.themethodic.com/docs/locale.md): The interface's words, language and direction. Exports `LocaleProvider`. - [locked](https://candor.themethodic.com/docs/locked.md): The honest-state rule: a control that cannot be used says why. - [relative-time](https://candor.themethodic.com/docs/relative-time.md): A time as people say it ("5 minutes ago"), with the exact time on hover, safe to render on the server. - [status-dot](https://candor.themethodic.com/docs/status-dot.md): How many times the status reached done or failed from an unfinished one while the dot was on screen; zero when it mounted finished, so nothing moves for a change the reader never saw. - [step-list](https://candor.themethodic.com/docs/step-list.md): How many times `status` has reached succeeded or failed from an unfinished status while this component was on screen. Exports `StepList`, `StepMark`. - [streaming-text](https://candor.themethodic.com/docs/streaming-text.md): Text that is still arriving. Exports `StreamingText`, `ShimmerLabel`. - [surface](https://candor.themethodic.com/docs/surface.md): Candor's card: a plain, muted, bordered or floating surface, so no screen hand-rolls its own. - [terms](https://candor.themethodic.com/docs/terms.md): The app's words for its own concepts, so components read like the product: one app says "org", another "project" or "workspace". Exports `TermsProvider`. - [type-to-confirm](https://candor.themethodic.com/docs/type-to-confirm.md) (Pro): A step that can't be undone, confirmed by typing a name: "Type prod-eu to confirm." The action stays locked, and says why, until the text matches exactly (spaces at either end don't count). ## Primitives - [avatar](https://candor.themethodic.com/docs/avatar.md) (Pro): shadcn's avatar in Candor's theme. Exports `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarBadge`, `AvatarGroup`, `AvatarGroupCount`. - [badge](https://candor.themethodic.com/docs/badge.md) (Pro): shadcn's badge in Candor's theme. - [button](https://candor.themethodic.com/docs/button.md): shadcn's button in Candor's theme, with a locked state for (dimmed, and says why). - [card](https://candor.themethodic.com/docs/card.md) (Pro): shadcn's card in Candor's theme. Exports `Card`, `CardHeader`, `CardFooter`, `CardTitle`, `CardAction`, `CardDescription`, `CardContent`. - [collapsible](https://candor.themethodic.com/docs/collapsible.md): shadcn's collapsible (Radix) in Candor's theme. Exports `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`. - [command](https://candor.themethodic.com/docs/command.md) (Pro): shadcn's command menu (cmdk) in Candor's theme. Exports `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandShortcut`, `CommandSeparator`. - [dialog](https://candor.themethodic.com/docs/dialog.md) (Pro): shadcn's dialog (Radix) in Candor's theme. Exports `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`. - [dropdown-menu](https://candor.themethodic.com/docs/dropdown-menu.md) (Pro): shadcn's dropdown menu (Radix) in Candor's theme. Exports `DropdownMenu`, `DropdownMenuPortal`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuLabel`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`. - [hover-card](https://candor.themethodic.com/docs/hover-card.md) (Pro): shadcn's hover card (Radix) in Candor's theme. Exports `HoverCard`, `HoverCardTrigger`, `HoverCardContent`. - [input](https://candor.themethodic.com/docs/input.md) (Pro): shadcn's input in Candor's theme. - [kbd](https://candor.themethodic.com/docs/kbd.md) (Pro): Keyboard keys, single or grouped, as shown in menus and shortcuts. Exports `Kbd`, `KbdGroup`. - [popover](https://candor.themethodic.com/docs/popover.md): shadcn's popover (Radix) in Candor's theme. Exports `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverAnchor`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription`. - [radio-group](https://candor.themethodic.com/docs/radio-group.md) (Pro): A set of choices where one can be picked. Exports `RadioGroup`, `RadioGroupItem`. - [scroll-area](https://candor.themethodic.com/docs/scroll-area.md) (Pro): shadcn's scroll area (Radix) in Candor's theme. Exports `ScrollArea`, `ScrollBar`. - [select](https://candor.themethodic.com/docs/select.md) (Pro): shadcn's select (Radix) in Candor's theme. Exports `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue`. - [separator](https://candor.themethodic.com/docs/separator.md) (Pro): shadcn's separator (Radix) in Candor's theme. - [sheet](https://candor.themethodic.com/docs/sheet.md) (Pro): shadcn's sheet (Radix dialog from an edge) in Candor's theme. Exports `Sheet`, `SheetTrigger`, `SheetClose`, `SheetContent`, `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription`. - [skeleton](https://candor.themethodic.com/docs/skeleton.md): A loading placeholder in the shape of what's coming. - [tabs](https://candor.themethodic.com/docs/tabs.md) (Pro): shadcn's tabs (Radix) in Candor's theme. Exports `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. - [textarea](https://candor.themethodic.com/docs/textarea.md) (Pro): shadcn's textarea in Candor's theme. - [tooltip](https://candor.themethodic.com/docs/tooltip.md): shadcn's tooltip (Radix) in Candor's theme. Exports `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider`. ## Shared types and helpers - [change-hash](https://candor.themethodic.com/docs/change-hash.md) (Pro): The sha256 of a change, in the same canonical form in the browser and on the server, so an approval made against a hash can be checked where the change runs. - [chat](https://candor.themethodic.com/docs/chat.md): The data a Candor thread renders. - [data](https://candor.themethodic.com/docs/data.md) (Pro): Data, chart and report shapes. - [diff](https://candor.themethodic.com/docs/diff.md) (Pro): A token-level diff (longest common subsequence). - [highlight](https://candor.themethodic.com/docs/highlight.md): A small syntax highlighter for code an agent shows: it splits text into typed tokens (keyword, string, comment…), and Payload renders each as a span. - [know](https://candor.themethodic.com/docs/know.md): The data behind the agents' knowledge base and agent settings. - [mcp-input](https://candor.themethodic.com/docs/mcp-input.md): MCP's "input required" results (spec 2026-07-28, multi round-trip requests) as Candor data: a server's form becomes questions for ClarifyingQuestions, a plain confirmation or a link to open becomes a two-answer Decision for ApprovalDecision, and the person's answers become the `inputResponses` the client sends when it retries the call. - [ops](https://candor.themethodic.com/docs/ops.md) (Pro): Ops, billing and admin shapes. - [render-prop](https://candor.themethodic.com/docs/render-prop.md): Lets Candor's Radix-based primitives also take Base UI's `render` prop. - [safe-markdown](https://candor.themethodic.com/docs/safe-markdown.md): Reads model text as safe markdown: paragraphs, lists and fenced code. - [status](https://candor.themethodic.com/docs/status.md): The status vocabulary every Candor agent component shares. - [team](https://candor.themethodic.com/docs/team.md) (Pro): The data behind the app shell and the team screens: an account has an owner and members; a member holds at most one role per environment; invites go to an email; audit events carry ids and codes, never names. - [use-attention](https://candor.themethodic.com/docs/use-attention.md) (Pro): Something waits on a person, or finished while they were away: a count, a "(n) " badge on the document title, and, only where the app and the browser both allow it, a system notification or a sound. - [use-copy](https://candor.themethodic.com/docs/use-copy.md): Copy text and report what actually happened. - [use-shortcut](https://candor.themethodic.com/docs/use-shortcut.md): The keys of a combo as they should be printed: "mod+k" → ["⌘", "K"] on a Mac and ["Ctrl", "K"] elsewhere. - [use-virtual-list](https://candor.themethodic.com/docs/use-virtual-list.md): Render only the items of a long list that are in or near view, for Thread's and SessionList's `virtualize`. - [work](https://candor.themethodic.com/docs/work.md) (Pro): The data behind agent work: plans, approvals, runs, diffs, logs and tests. ## Presets - [salesforce-kinds](https://candor.themethodic.com/docs/salesforce-kinds.md) (Pro): Salesforce's metadata and data, as entity kinds. ## Theme - [theme](https://candor.themethodic.com/docs/theme.md): Candor's default theme: light, dark and high contrast, contrast-checked. Import styles/candor.css after Tailwind. - [font-inter](https://candor.themethodic.com/docs/font-inter.md): Inter, Candor's default typeface, self-hosted (OFL-1.1). Optional: without it the theme uses the system font. Import styles/candor-font-inter.css next to candor.css. ## Patterns Common problems in agent UIs, and which components solve them. - [Approval UI](https://candor.themethodic.com/patterns/ai-approval-ui.md): Let an agent ask before it acts: allow or deny a tool call in the chat, or have a second person approve the exact change. React components on shadcn/ui. - [Trace viewer](https://candor.themethodic.com/patterns/agent-trace-viewer.md): Show one agent run as a timeline: model calls, tool calls and waits for a person on a shared clock, opening on the first failure. React, on shadcn/ui. - [Tool call UI](https://candor.themethodic.com/patterns/tool-call-ui.md): Show an agent's tool calls in plain words: what each did, its status and how long it took, opening to the input and output. Free, on shadcn/ui. - [Plan UI](https://candor.themethodic.com/patterns/agent-plan-ui.md): Show an agent's plan as steps a person can read, trim and accept before anything runs, then as a live run. React components on shadcn/ui. - [Chat interface](https://candor.themethodic.com/patterns/ai-chat-interface.md): A free, accessible AI chat UI on shadcn/ui: a thread that follows new messages, typed messages, a composer with mentions, reasoning and message actions. - [Claude Agent SDK UI](https://candor.themethodic.com/patterns/claude-agent-sdk-ui.md): Stream a Claude Agent SDK agent to a React chat UI, with tool permission requests answered by a person in the browser. Free adapters on shadcn/ui. - [AG-UI in React](https://candor.themethodic.com/patterns/ag-ui-react.md): Connect an AG-UI agent (LangGraph, Mastra, CrewAI, Google ADK, Pydantic AI) to a React chat UI, with interrupts a person approves. Free, on shadcn/ui. - [Cost guard](https://candor.themethodic.com/patterns/agent-cost-guard.md): Show what an agent run will likely cost before it starts, what it did cost, and what's used against each limit. Never a guessed number. React, on shadcn/ui. - [Audit log](https://candor.themethodic.com/patterns/ai-audit-log.md): An audit log of what agents and people did, refusals included, with retention and data controls. React components on shadcn/ui. - [A2UI renderer](https://candor.themethodic.com/patterns/a2ui-react-renderer.md): Render A2UI v0.9 surfaces an agent sends, with shadcn/ui parts: streamed messages, a data model inputs write to, and actions back to your app. - [Durable approvals](https://candor.themethodic.com/patterns/durable-agent-approvals.md): Approvals that outlive the request that asked: keep them in a store, answer from your own route or workflow, re-attach after a reload, replay a run. - [From AI Elements](https://candor.themethodic.com/patterns/coming-from-ai-elements.md): Moving off AI SDK Elements or shadcn's AI patterns: which Candor item does each job, what Candor adds, and how it sits beside Trace and Message Scroller. - [AI disclosure](https://candor.themethodic.com/patterns/ai-disclosure.md): Say plainly that a chat is an AI, and label what it made, from your app's own records. Helps with EU AI Act Article 50; not legal advice.