# AI

21 patterns for agent and chat interfaces, built from Trace, Message, Bubble, Code Block and the other suiss/ui components.

Source: https://suiss.app/ui/docs/ai

Each pattern is a composition of suiss/ui components that you copy into your project. There is no extra package to install, and the patterns work with any model or SDK.

A [Chat](https://suiss.app/ui/docs/ai/chat) is a list of [Message](https://suiss.app/ui/docs/ai/message) turns inside a [Message Scroller](https://suiss.app/ui/docs/components/message-scroller). The steps an agent takes inside a turn, such as [Reasoning](https://suiss.app/ui/docs/ai/reasoning), [Tool](https://suiss.app/ui/docs/ai/tool) and [Plan](https://suiss.app/ui/docs/ai/plan), are built on [Trace](https://suiss.app/ui/docs/components/trace), so every step has the same shape.

- [Chain of Thought](https://suiss.app/ui/docs/ai/chain-of-thought): A summary line that expands into the steps an agent took, such as reads, searches and tool calls.
- [Chat](https://suiss.app/ui/docs/ai/chat): A conversation thread where each turn holds a message, the agent's steps and its reply, inside a Message Scroller.
- [Checkpoint](https://suiss.app/ui/docs/ai/checkpoint): Marks a point in the conversation that you can return to, dropping every message after it.
- [Confirmation](https://suiss.app/ui/docs/ai/confirmation): Asks for approval before an agent runs a tool, then shows the call as a step once the person answers.
- [Context](https://suiss.app/ui/docs/ai/context): Shows how much of the model's context window the conversation has used, with a breakdown on hover.
- [File Tree](https://suiss.app/ui/docs/ai/file-tree): The files an agent changed, shown as a folder tree you can open, with the selected file marked.
- [Inline Citation](https://suiss.app/ui/docs/ai/inline-citation): A source link inside the sentence it supports, with a preview of the page on hover.
- [Message](https://suiss.app/ui/docs/ai/message): One turn of a conversation: the person's message, and the agent's reply with actions to copy, rate and retry it.
- [Model Selector](https://suiss.app/ui/docs/ai/model-selector): Two menus in the prompt input: one picks the model the agent runs, the other picks how much effort it spends.
- [Plan](https://suiss.app/ui/docs/ai/plan): The steps the agent plans to take, and how far it has got, under one line with a progress count.
- [Prompt Input](https://suiss.app/ui/docs/ai/prompt-input): The field people type into to message an agent, with attachments, model menus and a send button.
- [Queue](https://suiss.app/ui/docs/ai/queue): The agent's todo list, split into what is left and what is done.
- [Reasoning](https://suiss.app/ui/docs/ai/reasoning): A line for the agent's thinking that opens while the model thinks and closes when it is done.
- [Sources](https://suiss.app/ui/docs/ai/sources): The links the agent used for a reply, in a row that opens into a list of links.
- [Stack Trace](https://suiss.app/ui/docs/ai/stack-trace): A failed tool call with its stack frames, linking your own frames and folding the framework ones.
- [Subagent](https://suiss.app/ui/docs/ai/subagent): A subagent run, with the tool calls it made and what it found.
- [Suggestion](https://suiss.app/ui/docs/ai/suggestion): Short prompts that people can send to an agent in one click, in a row above the prompt input.
- [Task](https://suiss.app/ui/docs/ai/task): A piece of work the agent is doing, with each search, read or edit listed under it as it happens.
- [Terminal](https://suiss.app/ui/docs/ai/terminal): A shell command an agent runs, such as a lint, a test run or a build, with its output underneath.
- [Test Results](https://suiss.app/ui/docs/ai/test-results): A test run by the agent, with a summary, its suites and the error for each failure.
- [Tool](https://suiss.app/ui/docs/ai/tool): A tool call the agent makes, from input to output, including errors, approvals and output in a sheet.