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
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 combines messages with a prompt input.
- Message shows a response with actions and attachments.
- Prompt Input collects text and files.
- Suggestion offers prompts to start a conversation.
- Model Selector selects the model for a request.
- Context shows context usage and its details.
- Checkpoint marks a point that the user can restore.
- Confirmation asks the user to approve an action.
- Inline Citation links an answer to its sources.
- 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 shows thinking as it streams, with an optional duration.
- Plan shows the steps known before work starts.
- Queue separates work still to do from completed work.
- Sources lists the unique sources used for an answer.
- 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 groups reasoning, tools, and sources into steps.
- Stack Trace shows an error and the calls that led to it.
- Subagent shows the status and work of a delegated agent.
- Terminal shows command output as it arrives.
- Test Results shows test status, results, and failure details.
- 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.