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

Web page: https://candor.themethodic.com/patterns/claude-agent-sdk-ui

## Components

- **Claude Agent SDK server** (`claude-agent-server`, free; https://candor.themethodic.com/docs/claude-agent-server.md): Server side: stream a run, answer a permission request.
- **useClaudeAgent** (`use-claude-agent`, free; https://candor.themethodic.com/docs/use-claude-agent.md): Browser side: messages, composer props and waiting approvals.
- **Claude Agent SDK** (`claude-agent-sdk`, free; https://candor.themethodic.com/docs/claude-agent-sdk.md): The pure mapping from SDK events to Candor messages, approvals and usage, and from a person's answer back to the SDK.
- **Permission prompt** (`permission-prompt`, free; https://candor.themethodic.com/docs/permission-prompt.md): A waiting request: why it asked, the permission mode, edit before allowing, the agent's questions.
- **Permission mode** (`permission-mode`, Pro; https://candor.themethodic.com/docs/permission-mode.md): The run's permission mode, each mode's consequences written out, and a way to change it (Pro).
- **Thread** (`thread`, free; https://candor.themethodic.com/docs/thread.md): Where the messages go.
- **Message** (`message`, free; https://candor.themethodic.com/docs/message.md): One message, with tool calls and reasoning.
- **Composer** (`composer`, free; https://candor.themethodic.com/docs/composer.md): Where the person asks, and stops a run.

## Install

```bash
npx candor-ui add claude-agent-server use-claude-agent thread message
```

## Notes

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