How to
Style the chat
Theme tokens and native composition slots.
Style the chat
Semantic tokens travel with the definition; each renderer maps them natively.
Quick theme
code
import { resolveChatTheme } from '@agentskit/chat'
const theme = resolveChatTheme({
colors: {
accent: '#6157ff',
background: '#0d1117',
surface: '#161b22',
text: '#e6edf3',
},
})code
import { AgentChat } from '@agentskit/chat/react'
import '@agentskit/react/theme'
<AgentChat definition={definition} theme={theme} />Live
Hi — this is a live AgentsKit Chat shell. Ask anything about multi-surface chat.
Slots
Replace presentation without changing the definition:
code
<AgentChat
definition={definition}
slots={{ Message: BrandedMessage, Input: BrandedInput }}
/>Full matrix: Styling.