AI elements
AiConversation
The conversation’s scroll area in the dock and on /agent. It follows a streaming reply until the reader scrolls up.
AiConversationContent · AiConversationTurn · AiConversationScrollButton
AiUserMessageAiMessage
A turn’s two sides: the person’s words in the tinted bubble, the agent’s on the page under its name, with a footer for the reply’s controls.
AiMessageHeader · AiMessageBody · AiMessageFooter
Reasoning
What the model thought before it answered, folded under a line that says how long it took.
ReasoningTrigger · ReasoningContent
Tool
One call into the tool layer with its parameters and its result. The app gives every tool part one of these.
ToolHeader · ToolContent · ToolInput · ToolOutput
Parameters
{
"platform": "meta",
"status": "active",
"range": "last_7_days"
}Result
{
"campaigns": [
{
"id": "cmp_8f21",
"name": "Spring sale – prospecting",
"dailyBudget": {
"minor": 12000,
"currency": "USD"
},
"spend": {
"minor": 104620,
"currency": "USD"
},
"roas": 2.2
},
{
"id": "cmp_3c07",
"name": "Retargeting – cart",
"dailyBudget": {
"minor": 5000,
"currency": "USD"
},
"spend": {
"minor": 38850,
"currency": "USD"
},
"roas": 4
}
]
}Error
AiToolsUsed
The calls behind an answer, folded into one line. It opens while the run streams and closes once it ends. A failure shows in the closed line, and a failed call opens on its error.
AiToolsUsedReasoning · AiToolRow · toolsUsedLabel
Read the campaigns first, then compare each one’s spend with its budget.
Read the budget capError
Confirmation
A draft_changes result as the agent’s card: the Review tile, the batch and its state, a row per draft, and Approve and Reject, which in the app call the review page’s own actions.
ConfirmationHeader · ConfirmationBody · ConfirmationFooter · ConfirmationRequest · ConfirmationAccepted · ConfirmationRejected · ConfirmationActions · ConfirmationAction · useConfirmation
Nothing changes on Meta until this is approved, here or in Review.
- Daily budget
- Spring sale – prospecting: $120.00 → $80.00
- Ad group status
- Spring sale – broad 25–44: active → paused
- Daily budget
- Search – brand: $50.00 → $60.00
Cleared by a rule you wrote. The change is on its way to Google Ads.
- Campaign status
- TikTok – launch video: active → paused
Rejected. Nothing changed.
Plan
Steps under a title that folds: the agent’s plan before it runs.
PlanHeader · PlanTitle · PlanDescription · PlanTrigger · PlanContent · PlanFooter
- Lower Spring sale – prospecting to $80.00 a day
- Pause Spring sale – broad 25–44
Response
The agent’s words as markdown. Streamdown renders them and finishes half-written syntax while a reply streams.
AiMention
A record the agent names, as a chip with its object’s tile. In the app a link the agent writes to a campaign, an ad group or any other record becomes one, and opens the record.
The overspend sits in Spring sale – prospecting, most of it in its Spring sale – broad 25–44 ad group.
InlineCitation
A claim with its source on a pill beside it; the card opens on click.
InlineCitationText · InlineCitationCard · InlineCitationCardTrigger · InlineCitationCardBody · InlineCitationSource
I lowered the daily budget rather than setting a lifetime one, because Meta stops delivering an ad set once its lifetime budget is spent.
Sources
The pages the agent read for an answer, under one line. Only http and https addresses become links.
SourcesTrigger · SourcesContent · Source
Context
How much of the model’s context window the conversation has used. Click the ring for the breakdown.
ContextTrigger · ContextContent · ContextContentHeader · ContextContentBody · ContextInputUsage · ContextOutputUsage · ContextReasoningUsage · ContextCacheUsage · ContextContentFooter
CodeBlock
Code or JSON with a copy button, highlighted by shiki in one theme per mode.
CodeBlockHeader · CodeBlockTitle · CodeBlockFilename · CodeBlockActions · CodeBlockCopyButton · CodeBlockContent
{
"campaigns": [
{
"id": "cmp_8f21",
"name": "Spring sale – prospecting",
"dailyBudget": {
"minor": 12000,
"currency": "USD"
},
"spend": {
"minor": 104620,
"currency": "USD"
},
"roas": 2.2
},
{
"id": "cmp_3c07",
"name": "Retargeting – cart",
"dailyBudget": {
"minor": 5000,
"currency": "USD"
},
"spend": {
"minor": 38850,
"currency": "USD"
},
"roas": 4
}
]
}Task
A unit of work the agent ran, with the things it touched.
TaskTrigger · TaskContent · TaskItem · TaskItemFile
ChainOfThought
The steps of a longer answer, each one done, running or waiting.
ChainOfThoughtHeader · ChainOfThoughtContent · ChainOfThoughtStep · ChainOfThoughtSearchResults · ChainOfThoughtSearchResult
Checkpoint
A marked point in a long conversation, with a control to go back to it.
CheckpointTrigger
Queue
Work waiting its turn, numbered until it is done and ticked after.
QueueSection · QueueSectionTrigger · QueueSectionLabel · QueueSectionContent · QueueList · QueueItem · QueueItemIndicator · QueueItemContent · QueueItemDescription · QueueItemActions · QueueItemAction · QueueItemAttachment
Artifact
A finished piece of output, such as a report, set apart from the reply with its own actions.
ArtifactHeader · ArtifactTitle · ArtifactDescription · ArtifactActions · ArtifactAction · ArtifactClose · ArtifactContent
Weekly spend report
Meta, Google Ads and TikTok, last 7 days
AiThinkingAiLoaderAiShimmer
What shows while the agent works. In the app it is the thinking row, the spinner and a word, under the person’s message and on a loading page. The dots and the line naming a step are the kit’s.
Reading 3 campaigns
AiComposerAiModelPicker
The message box at both densities: default on /agent, compact in the dock.
AiComposerHeader · AiComposerEditor · AiComposerToolbar · AiComposerToolbarGroup · AiComposerAction · AiComposerButton · AiComposerSubmit · AiComposerRail
AiSuggestions
The four prompts an empty conversation offers. The app stacks them as rows over its composer; the kit’s chips scroll in one row below. A click on either puts the prompt in the composer above.
AiSuggestion
AiAttachmentChips
Files on a message or waiting in the composer: an image, a PDF that can be removed, and a note still uploading.
AiAttachmentChip
The set
These are the Admin Kit’s AI elements, ported onto the package’s Base UI primitives and tokens, one file per element in packages/ui/components/ai/. None of them imports the AI SDK. Each takes plain props (a state string, a token count, a list of sources), so the same part renders in the app, in a test and on this page. The campaigns and figures above are invented for the page.
Import from the barrel, or from one element’s own path:
import { Confirmation, Plan, Tool } from "@tempio/ui/components/ai";
import { AiComposer } from "@tempio/ui/components/ai/composer";In the app
The app keeps the AI SDK (useChat, the chat route, the stream) and maps each message part onto an element in one place, the app’s part mapping in components/agent/parts.tsx. Text goes to Response, a file to AiAttachmentChip and the usage data to Context. Reasoning and tool calls fold into runs. Each unbroken run between two parts that render is one AiToolsUsed line, “3 tools used”. It is open while the run streams and closed once the run is done, and it holds an AiToolsUsedReasoning line for each stretch of reasoning and an AiToolRow for each call. A link in a reply to one of the app’s own records becomes an AiMention with that record’s tile. The dock and the full page at /agent render the same components; the dock passes density="compact".
Every change request renders as a Confirmation. The draft_changes result renders as one with a ConfirmationHeader (the Review tile, the batch’s state and a tag), a ConfirmationBody holding a PropertyGrid with a row per draft, and a ConfirmationFooter with Open in Review, Reject and Approve. Approve and Reject call the review page’s own actions, so approving in the chat and approving in Review are the same act. The agent holds no approve scope. A change goes live when you approve it or when a rule you wrote does, and the card says so.