# AI Elements

Build agent interfaces from Frontfriend components. Copy examples for React Base, React Radix, React Aria, or Vue Reka.

AI Elements are patterns made from released Frontfriend components. The basic examples run with local data. They do not need an AI provider or an AI SDK package.

## Choose your target

- [React Base patterns](/docs/ai-elements/react-base/)
- [React Radix patterns](/docs/ai-elements/react-radix/)
- [React Aria patterns](/docs/ai-elements/react-aria/)
- [Vue Reka patterns](/docs/ai-elements/vue-reka/)

Each page has an interactive example, an install command, copyable source, and links to the component APIs. The target switch selects source for your project. The shared preview uses React Base.

## Chat and input

Build conversations, collect input, and show the context for an answer.

- [Chat](/docs/ai-elements/react-base/chat/) combines messages with a prompt input.
- [Message](/docs/ai-elements/react-base/message/) shows a response with actions and attachments.
- [Prompt Input](/docs/ai-elements/react-base/prompt-input/) collects text and files.
- [Suggestion](/docs/ai-elements/react-base/suggestion/) offers prompts to start a conversation.
- [Model Selector](/docs/ai-elements/react-base/model-selector/) selects the model for a request.
- [Context](/docs/ai-elements/react-base/context/) shows context usage and its details.
- [Checkpoint](/docs/ai-elements/react-base/checkpoint/) marks a point that the user can restore.
- [Confirmation](/docs/ai-elements/react-base/confirmation/) asks the user to approve an action.
- [Inline Citation](/docs/ai-elements/react-base/inline-citation/) links an answer to its sources.
- [File Tree](/docs/ai-elements/react-base/file-tree/) shows folders and files that the user can select.

## Agent steps

Show the work that leads to an answer, from the first plan to the final sources.

- [Reasoning](/docs/ai-elements/react-base/reasoning/) shows thinking as it streams, with an optional duration.
- [Plan](/docs/ai-elements/react-base/plan/) shows the steps known before work starts.
- [Queue](/docs/ai-elements/react-base/queue/) separates work still to do from completed work.
- [Sources](/docs/ai-elements/react-base/sources/) lists the unique sources used for an answer.
- [Task](/docs/ai-elements/react-base/task/) adds steps as the agent performs them.

Each pattern uses Trace and Collapsible. Select your target on the pattern page for its source and component APIs.

## Technical output

Show tool results, code, logs, and test results with Trace and Code Block.

- [Chain of Thought](/docs/ai-elements/react-base/chain-of-thought/) groups reasoning, tools, and sources into steps.
- [Stack Trace](/docs/ai-elements/react-base/stack-trace/) shows an error and the calls that led to it.
- [Subagent](/docs/ai-elements/react-base/subagent/) shows the status and work of a delegated agent.
- [Terminal](/docs/ai-elements/react-base/terminal/) shows command output as it arrives.
- [Test Results](/docs/ai-elements/react-base/test-results/) shows test status, results, and failure details.
- [Tool](/docs/ai-elements/react-base/tool/) shows tool input, approval, output, and errors.

## Connect your data

Start with the local state in each example. Replace the local response with your application data when needed. Message, Reasoning, Plan, Queue, Sources, Task, Chain of Thought, Stack Trace, Subagent, Terminal, Test Results, and Tool include optional adapters for AI SDK message parts. Each adapter section names any extra package it needs. The Message adapter renders text parts as text and shows a fallback for unsupported parts. No Markdown renderer is installed.

These patterns have no separate component identity. Install their listed components. Use `get_component_api` for those components and use these docs for the pattern. Existing AI Elements wrappers require a manual migration; their names and props are not preserved automatically.