Component catalog
Closed catalog of schema-backed UI components a model may propose — index for humans and agents.
Component catalog
AgentsKit Chat ships a closed set of interactive components. The model may only propose registered keys; unknown keys and invalid props stay inert.
How to read this section
| Surface | Purpose |
|---|---|
| This page | Index + contract matrix (skim / agent handoff) |
| One page per key | Live preview, props schema, frame JSON, correct host callback |
| Examples lab | Side-by-side live renders only — not a second catalog |
Index
Each card opens a dedicated page with preview, props, frame, and agent notes.
Button group
button-groupQuick actions with one selection (save, cancel, open…).
events: select
Choice list
choice-listBranching UX, onboarding, pick-one flows across every shell.
events: select
Form
formCollect structured input (email, text, select, checkbox, number).
events: submit
Confirmation
confirmationDelete, overwrite, or any binary human gate without a full tool call.
events: confirm, cancel
Progress
progressLong-running work the user should see without polling another UI.
events: —
Source list
source-listRAG / docs answers that must show where claims came from.
events: open
Link card
link-cardDeep-link to docs, tickets, or external resources.
events: open
Error notice
error-noticeSurface recoverable failures without crashing the shell.
events: retry
Tool call
tool-callShow what the agent is doing without inventing a custom panel.
events: —
Approval request
approval-requestHuman-in-the-loop gates for tools that require confirmation.
events: approve, deny
Table
tableCompare options, list records, or show structured results.
events: —
File attachment
file-attachmentSurface downloads or generated artifacts in the transcript.
events: open
Contract matrix (for agents)
| Component | Events | Value | A11y role | Capabilities |
|---|---|---|---|---|
button-group | select | id | group | display, selection |
choice-list | select | id | group | display, selection |
form | submit | form | form | display, input |
confirmation | confirm, cancel | none | group | display, action |
progress | — | — | progressbar (live=polite) | display, progress |
source-list | open | id | list | display, navigation |
link-card | open | url | link | display, navigation |
error-notice | retry | none | alert | display, action |
tool-call | — | — | status (live=polite) | display |
approval-request | approve, deny | none | group | display, action |
table | — | — | table | display |
file-attachment | open | url | link | display, download |
Host callbacks
| Keys | Callback |
|---|---|
choice-list only | onComponentSelect |
| Other interactive keys | onComponentInteract |
progress, tool-call, table | none (display-only) |
Every key has renderer parity on react, react-native, ink, vue, svelte, solid, and angular.
Register everything
import { StandardComponentCatalog, defineComponentManifest, defineChat } from '@agentskit/chat'
export const definition = defineChat({
id: 'app',
components: defineComponentManifest(StandardComponentCatalog),
chat: { adapter },
})Prefer StandardComponentCatalog in production. To ship a subset, pass the named *Component exports (see each page).
Host callbacks
<AgentChat
definition={definition}
onComponentSelect={(event) => {
// choice-list only — { choiceId, instanceId, componentKey }
}}
onComponentInteract={(event) => {
// Always type: 'interact'. Branch on event.event + event.value
// e.g. event.event === 'submit' | 'approve' | 'open' | 'select' | ...
}}
/>For agents (machine-readable rules)
| Rule | Detail |
|---|---|
| Protocol | agentskit.chat.component version 1 |
| Envelope | type: "render", componentKey, instanceId, props, fallback |
| Keys | Only keys in StandardComponentCatalog unless the host registered custom entries |
| Props | Schema-bounded JSON — see per-page tables; do not invent fields |
| Fallback | Always include fallback.kind + fallback.summary for non-graphical shells |
| Security | URLs must be relative or http(s) without credentials |
| Inert on error | Unknown keys and invalid props do not render |
Open the per-key page for frame JSON and the exact export name.
Related
- Examples lab — side-by-side live demos
- Choice list — primary interactive deep dive
- Action policy
- Confirmation