AI Elements
Overview
Copy-paste patterns for agentic and chat interfaces, built from UI Thing components.
Credits
Shout out to Shadcn Vue for the original AI Elements. Every pattern here was ported to UI Thing components, and several were extended with more states and options. A few patterns are new.
About
AI Elements are patterns for building agentic interfaces. Each one is a composition of UI Thing components that you copy into your project. There is no package to install. The code is yours.
A Chat is a list of Message turns inside a Message Scroller. The steps an agent takes inside a turn, like Reasoning, Tool and Plan, are built on Trace, so every step has the same shape. Code, terminal output and diffs are shown with Code Block.
ui-thing@latest add trace code-block), and copy the example into your project.Patterns
| Pattern | Shows | Built with |
|---|---|---|
| Chain of Thought | A summary that expands into the steps an agent took. | Trace, Badge |
| Chat | The thread. Message Scroller keeps your place while the reply streams. | Message Scroller, Message, Prompt Input |
| Checkpoint | A point in the conversation you can return to. | Marker, Button |
| Confirmation | A prompt to approve or deny a tool before it runs. | Item, Button, Trace |
| Context | How much of the context window the conversation has used. | Hover Card, Progress |
| File Tree | The files the agent changed, as a folder tree. | Collapsible |
| Inline Citation | A source in the sentence that opens on hover. | Hover Card |
| Message | One turn. The person's message, and the agent's reply with its actions. | Message, Bubble, Tooltip |
| Model Selector | Two menus. One picks the model the agent runs, the other how hard it thinks. | Dropdown Menu, Input Group |
| Plan | The steps the agent plans to take, and how far it has got. | Trace |
| Prompt Input | A message field with attachments and a send button. | Input Group, Attachment, Dropdown Menu |
| Queue | The agent's todo list, split into what is left and what is done. | Trace |
| Reasoning | The agent's thinking as it streams. | Trace |
| Sources | The links the agent used for a reply. | Trace |
| Stack Trace | A failed tool call and its stack frames. | Trace, Code Block |
| Subagent | A subagent run, with its tool calls and result. | Trace, Code Block, Badge |
| Suggestion | A short prompt you can send to the agent in one click. | Button, Input Group |
| Task | The steps the agent takes, as it takes them. | Trace |
| Terminal | A command the agent runs, with its output as it streams. | Trace, Code Block |
| Test Results | A test run by the agent, with its suites and failures. | Trace, Code Block |
| Tool | A tool call the agent makes, from input to output. | Trace, Code Block, Sheet |
More patterns
These are not part of Shadcn Vue's AI Elements. They were added for UI Thing.
| Pattern | Shows | Built with |
|---|---|---|
| Artifact | A file the agent made, with actions to copy, download or close it. | Card, Code Block |
| Branch | Step between the versions of a regenerated reply. | Message, Button |
| Feedback | Thumbs up and down, with a follow-up when something went wrong. | Message, Button, Textarea |
| Snippet | A command to copy in one click, with a package manager switch. | Input Group, Tabs |
| Voice Input | Dictate into the prompt with speech recognition. | Input Group, Tooltip |
Using them
- Add the components the pattern uses:
npx ui-thing@latest add trace code-block - Open a pattern above and copy its code into your project. Each page lists any other components it needs.
- Wire it to your data. The examples simulate streaming with VueUse so they run on their own. Swap the simulation for
new Chat()from@ai-sdk/vue, or whatever your backend gives you. The AI SDK sections of each page show how the parts map.
The demos share a tiny Markdown renderer so you can see fenced code render as a Code Block. In your app, use the Markdown library you already have and map fenced code to UiCodeBlock.