agentskit.js

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

FrameworkImportShape
Reactimport { useChat } from '@agentskit/react'const chat = useChat(config)
Vueimport { useChat } from '@agentskit/vue'const chat = useChat(config) β€” values are refs
Svelteimport { createChatStore } from '@agentskit/svelte'const chat = createChatStore(config) β€” Svelte 5 runes
Solidimport { useChat } from '@agentskit/solid'const chat = useChat(config) β€” accessors
React Nativeimport { useChat } from '@agentskit/react-native'Metro-safe, no DOM
Angularimport { AgentskitChat } from '@agentskit/angular'constructor(private chat: AgentskitChat) β€” Signal + RxJS
Inkimport { 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.

Explore nearby

✎ Edit this page on GitHubΒ·Found a problem? Open an issue β†’Β·How to contribute β†’

On this page

Ask the docs
Ask anything about AgentsKit. Answers come from the docs corpus and cite their sources.