Patterns / From AI Elements

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.

The components

  • MessageFreeReplaces Message: typed blocks, never markdown or HTML from the model.
  • ComposerFreeReplaces Prompt Input: mentions as structured references, a scope, your own toolbar controls.
  • ReasoningFreeReplaces Reasoning and Chain of Thought, marked as believed, not verified.
  • Tool callFreeReplaces Tool, and says when a call was approved automatically.
  • Permission promptFreeReplaces Confirmation for the person in the chat: why it asked, edit before allowing.
  • CitationFreeReplaces Inline Citation: [n] from the source data only.
  • Context meterFreeReplaces Context.
  • Prompt suggestionsFreeReplaces Suggestion.
  • Approval requestProA second person's approval, tied to the exact change (Pro).
  • Checkpoint listProReplaces Checkpoint, with what each one holds (Pro).
  • Restore dialogProThe restore Checkpoint leaves out: what isn't undone, and a checked result (Pro).

See it working

More in the examples: Chat core

Install

With the shadcn CLI

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

Good to know

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