@agentskit/react

@agentskit/react is the fastest path from the AgentsKit contracts to a browser product. It gives you the same core chat model as the rest of the ecosystem, but with React ergonomics and headless UI primitives.

#When to reach for it

• You're building a web chat UI in React.
• You want streaming + tool calls + memory + skills in one hook.
• You want headless components with data-ak-* attributes so you style everything with your own CSS / Tailwind / shadcn.

#Best fit

• Start here when you need a customer-facing or internal chat experience in React.
• Pair with @agentskit/adapters for provider flexibility.
• Pair with @agentskit/runtime and @agentskit/tools when the chat needs to do real work.
• Pair with @agentskit/memory and @agentskit/rag when the assistant needs longer context.

#Install

npm install @agentskit/react @agentskit/core @agentskit/adapters

#Hello world

import { useChat } from '@agentskit/react'
import { anthropic } from '@agentskit/adapters'

export function Chat() {
  const chat = useChat({ adapter: anthropic({ apiKey, model: 'claude-sonnet-4-6' }) })
  return (
    <form onSubmit={e => { e.preventDefault(); chat.send(chat.input) }}>
      {chat.messages.map(m => <div key={m.id}>{m.content}</div>)}
      <input value={chat.input} onChange={e => chat.setInput(e.target.value)} />
    </form>
  )
}

This is the UI entry point for the ecosystem, not a separate product. The same contracts keep working as you add runtime, tools, memory, and production layers.

#Surface

• useChat(config): ChatReturn.
• <ChatContainer>, <Message>, <InputBar>, <ToolCallView>, <ToolConfirmation>, <ThinkingIndicator>, <CodeBlock>, <Markdown>.
• Theme: @agentskit/react/theme.

#Siblings (same contract)

Vue · Svelte · Solid · React Native · Angular · Ink

#Recipes

• Cost-guarded chat
• Confirmation-gated tool
• Edit and regenerate
• RAG chat

#Stability

• Version: 0.5.8
• Tier: beta
• Contract: evolving
• Roadmap: see packages roadmap for what this package needs to reach v1.0.

#Related

• Concepts: Runtime
• UI + hooks
• Support agent use case
• For agents: react

#Source

npm: @agentskit/react · repo: packages/react