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

Web page: https://candor.themethodic.com/patterns/ai-chat-interface

## Components

- **Thread** (`thread`, free; https://candor.themethodic.com/docs/thread.md): The scrolling message column.
- **Message** (`message`, free; https://candor.themethodic.com/docs/message.md): One message, from typed blocks.
- **Composer** (`composer`, free; https://candor.themethodic.com/docs/composer.md): Where a person asks: mentions, slash commands, stop.
- **Reasoning** (`reasoning`, free; https://candor.themethodic.com/docs/reasoning.md): The agent's stated reasoning, folding to a line once it answers.
- **Message actions** (`message-actions`, free; https://candor.themethodic.com/docs/message-actions.md): Copy, retry and rate under a reply.
- **Prompt suggestions** (`prompt-suggestions`, free; https://candor.themethodic.com/docs/prompt-suggestions.md): Prompts to start from, put in the composer to edit.
- **Context meter** (`context-meter`, free; https://candor.themethodic.com/docs/context-meter.md): What fills the model's context budget.
- **useCandorChat** (`use-candor-chat`, free; https://candor.themethodic.com/docs/use-candor-chat.md): Wires the Vercel AI SDK's useChat() to all of the above.

## Install

```bash
npx candor-ui add thread message composer
```

## Notes

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