Data attributes
AgentsKit UI components are headless. Every stylable hook is a data-ak-* attribute so your CSS (or your LLM) can target them reliably.
Components emit zero styles. They emit data attributes. Style with your favorite CSS stack; generate UI with an LLM and the attributes tell it exactly where to hook.
#Reference
| Attribute | Where | Values |
|---|---|---|
data-ak-chat-container | root of ChatContainer | — |
data-ak-message | root of Message | — |
data-ak-role | on Message root | user · assistant · tool · system |
data-ak-streaming | on Message root | true · false |
data-ak-part | every message part | text · tool-call · tool-result · image · file |
data-ak-tool-call | root of ToolCallView | — |
data-ak-status | on ToolCallView | pending · running · done · error · awaiting-approval |
data-ak-input-bar | root of InputBar | — |
data-ak-thinking | root of ThinkingIndicator | — |
data-ak-markdown | root of Markdown | — |
data-ak-code-block | root of CodeBlock | — |
#Generative UI
Because selectors are stable and framework-agnostic, LLMs can generate CSS / className overrides that work cross-framework. See Generative UI recipe.
#Related
- Theming — CSS variables + preset themes
Explore nearby
- PeerUI + hooks
Every AgentsKit UI binding exposes the same contract. Pick the framework; the API stays the same.
- PeeruseChat
The one hook every framework binding exposes. Same input, same return, same events.
- PeerChatContainer
Headless scrollable transcript container. Auto-scroll on new messages, virtualized-ready.