# AI Elements

Patterns for agentic interfaces, built from shadcn/ui components.

Each AI Element is a composition of shadcn/ui components that you copy into your project: there is no package to install. A [Chat](/ai-elements/chat) is a list of [Message](/ai-elements/message) turns inside a [Message Scroller](/components/message-scroller). The steps an agent takes inside a turn, such as [Reasoning](/ai-elements/reasoning), [Tool](/ai-elements/tool) and [Plan](/ai-elements/plan), are built on [Trace](/components/trace), so every step has the same shape.

The demos on this site stream predefined conversations with [`@shadcn/helpers/ai-sdk`](/helpers/ai-sdk), so they need no model or API key.

## Patterns

* [Chain of Thought](/ai-elements/chain-of-thought): Displays a summary that expands into the steps an agent took.
* [Chat](/ai-elements/chat): The thread. Message Scroller keeps your place while the reply streams.
* [Checkpoint](/ai-elements/checkpoint): Marks a point in the conversation you can return to.
* [Confirmation](/ai-elements/confirmation): Asks for approval before a tool runs.
* [Context](/ai-elements/context): How much of the context window the conversation has used.
* [File Tree](/ai-elements/file-tree): The files the agent changed, as a folder tree.
* [Inline Citation](/ai-elements/inline-citation): A source in the sentence that opens on hover.
* [Message](/ai-elements/message): One turn. The person's message, and the agent's reply with its actions.
* [Model Selector](/ai-elements/model-selector): Two menus. One picks the model the agent runs, the other picks how hard it thinks.
* [Plan](/ai-elements/plan): Displays the steps the agent plans to take, and how far it has got.
* [Prompt Input](/ai-elements/prompt-input): A message field with attachments and a send button.
* [Queue](/ai-elements/queue): Displays the agent's todo list, split into what is left and what is done.
* [Reasoning](/ai-elements/reasoning): Displays the agent's thinking as it streams.
* [Sources](/ai-elements/sources): Displays the links the agent used for a reply.
* [Stack Trace](/ai-elements/stack-trace): Displays a failed tool call and its stack frames.
* [Subagent](/ai-elements/subagent): Displays a subagent run, with its tool calls and result.
* [Suggestion](/ai-elements/suggestion): A short prompt you can send to the agent in one click.
* [Task](/ai-elements/task): Displays the steps the agent takes, as it takes them.
* [Terminal](/ai-elements/terminal): Displays a command the agent runs, with its output as it streams.
* [Test Results](/ai-elements/test-results): Displays a test run by the agent, with its suites and failures.
* [Tool](/ai-elements/tool): Displays a tool call the agent makes, from input to output.

## Reference

Official page: https://ui.shadcn.com/docs/ai-elements