Packages
@agentskit/react
React hooks + headless chat components driving the shared ChatController.
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.
Install
npm install @agentskit/react @agentskit/core @agentskit/adaptersHello 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>
)
}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
Related
Source
npm: @agentskit/react · repo: packages/react