Candor UI

Patterns / Chat interface

AI chat interface components for React

Candor's chat core is free (MIT). Thread is the scrolling column: it follows new content while you're at the bottom and stops the moment you scroll up, offering a button back to the latest.

Message takes typed blocks (paragraphs, lists, code, tool calls, cards), never model HTML. A person's message sits right; an agent's sits left with its name and role, reasoning above the answer, sources and actions below. An interrupted reply keeps what arrived and says it stopped.

Composer is where a person asks. Enter sends, Shift+Enter breaks a line, and while the agent replies the send button becomes Stop. Mentions attach things as references the agent receives as ids, not as text it has to parse.

The components

  • ThreadFreeThe scrolling message column.
  • MessageFreeOne message, from typed blocks.
  • ComposerFreeWhere a person asks: mentions, slash commands, stop.
  • ReasoningFreeThe agent's stated reasoning, folding to a line once it answers.
  • Message actionsFreeCopy, retry and rate under a reply.
  • Prompt suggestionsFreePrompts to start from, put in the composer to edit.
  • Context meterFreeWhat fills the model's context budget.
  • useCandorChatFreeWires the Vercel AI SDK's useChat() to all of the above.

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

  • Every component takes plain data, so it works with any model driver. Adapters exist for the Vercel AI SDK, the Claude Agent SDK and AG-UI.