Styling
Semantic theme tokens and native composition slots for every AgentsKit Chat shell.
Styling
Pass the same semantic theme to any application shell. Input is runtime-validated; unknown tokens fail early; missing tokens use accessible defaults.
Theme object
import { resolveChatTheme } from '@agentskit/chat'
const theme = resolveChatTheme({
colors: {
accent: '#6157ff',
background: '#0d1117',
surface: '#161b22',
text: '#e6edf3',
muted: '#8b949e',
border: '#30363d',
onAccent: '#ffffff',
danger: '#f85149',
},
spacing: { small: 8, medium: 12, large: 16 },
radius: { medium: 8, large: 12 },
})import { AgentChat } from '@agentskit/chat/react'
import '@agentskit/react/theme'
<AgentChat definition={chat} theme={theme} placeholder="Ask…" />Live: Basic chat example uses a dark theme on this site.
Capability map
| Intent | React / Vue / Svelte / Solid / Angular | React Native | Ink |
|---|---|---|---|
| colors | CSS variables | wrapper / text styles | InkTheme |
| spacing | CSS variables | numeric styles | unsupported |
| radius | CSS variables | border radius | unsupported |
| font | CSS stack | native / custom family | unsupported |
Helpers: toChatCssVariables (DOM), toChatNativeStyles (RN), toChatInkTheme (terminal).
Native slots
| Shell | Composition API |
|---|---|
| React / RN / Ink | slots map (Message, Input, …) |
| Vue | named scoped slots |
| Svelte | typed snippets |
| Solid | render props |
| Angular | named content templates |
Slots: container, message, input, thinking, confirmation, choiceList (and standard component slot where available). Composition is never serialized into ChatDefinition.
<AgentChat
definition={chat}
theme={theme}
slots={{ Message: BrandedMessage }}
/>Defaults provide live regions, labeled controls, alerts, and one active Ink keyboard owner. Replacements must keep equivalent a11y.
Fully headless
import { useChat } from '@agentskit/react' // or @agentskit/vue, etc.
const state = useChat(definition.chat)Streaming, tools, memory, retry/edit/regenerate, and cancel stay on AgentsKit. Chat does not wrap that hook.