ChatContainer
Headless scrollable transcript container. Auto-scroll on new messages, virtualized-ready.
Top-level wrapper for a chat transcript. Renders data-ak-chat-container
with auto-scroll anchor. No hardcoded styles — theme via
data attributes and CSS variables.
#Props
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — |
autoScroll | boolean | true |
className | string | — |
#Per-framework
| Framework | Import |
|---|---|
| React | import { ChatContainer } from '@agentskit/react' |
| Vue | import { ChatContainer } from '@agentskit/vue' |
| Svelte | import ChatContainer from '@agentskit/svelte/ChatContainer.svelte' |
| Solid | import { ChatContainer } from '@agentskit/solid' |
| React Native | import { ChatContainer } from '@agentskit/react-native' — ScrollView-backed |
| Angular | <ak-chat-container> — from AgentskitUiModule |
| Ink | import { ChatContainer } from '@agentskit/ink' — Ink <Box> |
#Example
import { ChatContainer, Message, InputBar, useChat } from '@agentskit/react'
export function App() {
const chat = useChat({ adapter: openai(...) })
return (
<ChatContainer>
{chat.messages.map((m) => <Message key={m.id} message={m} />)}
<InputBar chat={chat} />
</ChatContainer>
)
}#Related
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.
- PeerMessage
Renders one message — user, assistant, tool, or system. Streaming-aware, role-aware.