useChat
The one hook every framework binding exposes. Same input, same return, same events.
useChat is the contract every AgentsKit UI binding mirrors. It wraps
createChatController from @agentskit/core with the idioms of your
host framework (React hook, Vue composable, Svelte store, Solid
signal, Angular service, React Native hook, Ink hook).
#Contract
type ChatReturn = {
messages: Message[]
status: 'idle' | 'streaming' | 'complete' | 'error'
input: string
usage: TokenUsage
error: Error | null
send: (text: string) => Promise<void>
retry: () => Promise<void>
stop: () => void
clear: () => Promise<void>
approve: (toolCallId: string) => Promise<void>
deny: (toolCallId: string, reason?: string) => Promise<void>
edit: (messageId: string, text: string, opts?: EditOptions) => Promise<void>
regenerate: (messageId?: string) => Promise<void>
setInput: (value: string) => void
proposeToolCall: (proposal: Pick<ToolCall, 'id' | 'name' | 'args'>) => Promise<ToolCall>
}#Inputs
type ChatConfig = {
adapter: AdapterFactory
tools?: ToolDefinition[]
skills?: SkillDefinition[]
memory?: ChatMemory
retriever?: Retriever
systemPrompt?: string
onError?: (e: Error) => void
onMessage?: (message: Message) => void
}#Cancellation
stop() aborts the active source, returns the controller to idle, and
settles every active assistant message as complete. Late stream and tool
updates from the stopped turn are ignored, and memory receives the settled
snapshot instead of a stale streaming message. Calling stop() again is
safe and has no additional effect.
#Per-framework usage
| Framework | Import | Shape |
|---|---|---|
| React | import { useChat } from '@agentskit/react' | const chat = useChat(config) |
| Vue | import { useChat } from '@agentskit/vue' | const chat = useChat(config) β values are refs |
| Svelte | import { createChatStore } from '@agentskit/svelte' | const chat = createChatStore(config) β Svelte 5 runes |
| Solid | import { useChat } from '@agentskit/solid' | const chat = useChat(config) β accessors |
| React Native | import { useChat } from '@agentskit/react-native' | Metro-safe, no DOM |
| Angular | import { AgentskitChat } from '@agentskit/angular' | constructor(private chat: AgentskitChat) β Signal + RxJS |
| Ink | import { useChat } from '@agentskit/ink' | Terminal-safe |
#Events and observers
Use onMessage for per-message updates or observers for the shared
AgentEvent stream. The controller does not expose an onEvent option on
ChatConfig; framework bindings mirror the same core contract.
Full schema: Concepts β mental model.
#Related
- Components: ChatContainer Β· Message Β· InputBar Β· ToolCallView Β· ThinkingIndicator
- Data attributes Β· Theming
- For agents β React
Explore nearby
- PeerUI + hooks
Every AgentsKit UI binding exposes the same contract. Pick the framework; the API stays the same.
- PeerChatContainer
Headless scrollable transcript container. Auto-scroll on new messages, virtualized-ready.
- PeerMessage
Renders one message β user, assistant, tool, or system. Streaming-aware, role-aware.