Candor UI

Patterns / Claude Agent SDK UI

A React UI for the Claude Agent SDK

The Claude Agent SDK runs on your server. Candor gives you both ends of the wire to a browser UI.

On the server, streamClaudeAgent runs your query() and streams it to the browser. Permission requests wait in an ApprovalStore (this process's memory by default, or your own), and answerClaudeApproval records a person's answer: allowed, denied, allowed with an edited input, answers to the agent's AskUserQuestion, or "always allow" rules they picked. It returns false when there's no such request, it already ended, or the person answering doesn't own the run.

In the browser, useClaudeAgent gives you messages for Thread and Message, props for Composer, and the tool calls waiting on a person. Each message continues the same agent session. It has the same shape as the Vercel AI SDK and AG-UI hooks, so screens work with any of them.

The components

  • Claude Agent SDK serverFreeServer side: stream a run, answer a permission request.
  • useClaudeAgentFreeBrowser side: messages, composer props and waiting approvals.
  • Claude Agent SDKFreeThe pure mapping from SDK events to Candor messages, approvals and usage, and from a person's answer back to the SDK.
  • Permission promptFreeA waiting request: why it asked, the permission mode, edit before allowing, the agent's questions.
  • Permission modeProThe run's permission mode, each mode's consequences written out, and a way to change it (Pro).
  • ThreadFreeWhere the messages go.
  • MessageFreeOne message, with tool calls and reasoning.
  • ComposerFreeWhere the person asks, and stops a run.

See it working

Live in the examples: Claude Agent SDK

Install

With the shadcn CLI

Each component brings in what it depends on. These are free (MIT).

Good to know

  • Every full-stack block (Premium) comes in a Claude Agent SDK version as well as a Vercel AI SDK one, for example approval-gated-change-claude.
  • To survive a reload, pass a ClaudeRunStore and detach: the browser re-attaches with attachClaudeAgentRun. See the durable approvals pattern.