# Coming from AI Elements

Vercel's AI SDK Elements is deprecated at the end of November 2026, and shadcn/ui now ships free AI patterns of its own. If your chat already works on them, keep what works. This page says where Candor does the same job, and what it adds.

What Candor adds is honesty about the work: an approval tied by a hash to the exact change, "unknown" shown as unknown instead of a guess, a control that can't be used saying why, a restore that says what it didn't undo, and model text that is never rendered as markup. Every Candor component takes plain typed data, with free adapters for the Vercel AI SDK, the Claude Agent SDK and AG-UI.

Moving one piece at a time works. Message → message. Prompt Input → composer. Reasoning and Chain of Thought → reasoning, marked as believed, not verified. Tool → tool-call. Confirmation → permission-prompt for the person in the chat, or approval-request (Pro) for a second person. Sources and Inline Citation → citation and the message's sources, with [n] placed only where the source says, never read from numbers in the text. Context → context-meter. Suggestion → prompt-suggestions. Plan → plan (Pro). Checkpoint → checkpoint-list and restore-dialog (Pro). Queue and Task → task-tray (Pro). Subagent → run-tree (Pro). Test Results → test-results (Pro).

Candor composes with shadcn's Trace and Message Scroller rather than replacing them. Candor's Message is a plain block that renders inside any scroll container, so you can keep Message Scroller and put Candor messages in it; Candor's Thread is the alternative when you want its jump-to-latest and long-thread virtualising, not something to nest inside it. Trace stays the right place for a step-by-step run view; use Candor's tool-call inside a reply and trace-viewer (Pro) when you need spans, costs and a reviewer's view of a whole run.

Web page: https://candor.themethodic.com/patterns/coming-from-ai-elements

## Components

- **Message** (`message`, free; https://candor.themethodic.com/docs/message.md): Replaces Message: typed blocks, never markdown or HTML from the model.
- **Composer** (`composer`, free; https://candor.themethodic.com/docs/composer.md): Replaces Prompt Input: mentions as structured references, a scope, your own toolbar controls.
- **Reasoning** (`reasoning`, free; https://candor.themethodic.com/docs/reasoning.md): Replaces Reasoning and Chain of Thought, marked as believed, not verified.
- **Tool call** (`tool-call`, free; https://candor.themethodic.com/docs/tool-call.md): Replaces Tool, and says when a call was approved automatically.
- **Permission prompt** (`permission-prompt`, free; https://candor.themethodic.com/docs/permission-prompt.md): Replaces Confirmation for the person in the chat: why it asked, edit before allowing.
- **Citation** (`citation`, free; https://candor.themethodic.com/docs/citation.md): Replaces Inline Citation: [n] from the source data only.
- **Context meter** (`context-meter`, free; https://candor.themethodic.com/docs/context-meter.md): Replaces Context.
- **Prompt suggestions** (`prompt-suggestions`, free; https://candor.themethodic.com/docs/prompt-suggestions.md): Replaces Suggestion.
- **Approval request** (`approval-request`, Pro; https://candor.themethodic.com/docs/approval-request.md): A second person's approval, tied to the exact change (Pro).
- **Checkpoint list** (`checkpoint-list`, Pro; https://candor.themethodic.com/docs/checkpoint-list.md): Replaces Checkpoint, with what each one holds (Pro).
- **Restore dialog** (`restore-dialog`, Pro; https://candor.themethodic.com/docs/restore-dialog.md): The restore Checkpoint leaves out: what isn't undone, and a checked result (Pro).

## Install

```bash
npx candor-ui add message composer tool-call permission-prompt
```

## Notes

- The adapters are free: useCandorChat wraps the same useChat() result AI Elements reads, so the data layer doesn't change.
- Your coding agent can do the move: point it at this page's Markdown (/patterns/coming-from-ai-elements.md) or the docs MCP server, and ask it to swap one component at a time.