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' | 'error' | 'awaiting-tool'
  error: Error | null
  send: (text: string, opts?: SendOptions) => Promise<void>
  retry: () => Promise<void>
  stop: () => void
  clear: () => void
  approve: (toolCallId: string, result?: unknown) => void
  deny: (toolCallId: string, reason?: string) => void
  edit: (messageId: string, text: string) => Promise<void>
}

#Inputs

type ChatConfig = {
  adapter: Adapter
  tools?: Tool[]
  skills?: Skill[]
  memory?: Memory
  rag?: Retriever
  system?: string
  onEvent?: (e: ChatEvent) => void
  onError?: (e: Error) => 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 `ref`s
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 (`onEvent`)

chat.start · message.append · message.update · tool.call · tool.result · error · status.change · chat.end.

Full schema: Concepts → mental model.

Components: ChatContainer · Message · InputBar · ToolCallView · ThinkingIndicator
Data attributes · Theming
For agents → React

Explore nearby

✎ Edit this page on GitHub·Found a problem? Open an issue →·How to contribute →