react

@agentskit/react

Profile: major-package

Add streaming AI chat to any React app in 10 lines of code.

Tags: ai · agents · llm · agentskit · openai · anthropic · claude · gemini · chatgpt · react · react-hooks · chat-ui · ai-agents

Verified proof

• Package metadata and tests live under packages/react/.
• Package guide: https://www.agentskit.io/docs/reference/packages/react
• Stability map: docs/STABILITY.md

How this fits the ecosystem

@agentskit/react is the React UI layer: hooks and headless components for streaming chat, tool calls, memory, and agent-facing interfaces.

• AgentsKit: compose it with the other packages in this repo to build agents from small, swappable parts.
• Registry: look for ready agents and templates that already use this layer at registry.agentskit.io.
• Playbook: learn the production patterns behind this layer at playbook.agentskit.io.

Docs: package guide · agent handoff

Why react

• Ship faster — streaming chat with tool calls and memory works out of the box; Markdown is a raw content slot for your chosen renderer
• Works with your design system — completely headless; style it with Tailwind, MUI, shadcn, or plain CSS via data-ak-* attributes
• Agent-ready by default — built-in support for tool calls, thinking indicators, and multi-turn memory so you never hit a wall as your product grows
• Swap providers in one line — pass any adapter from @agentskit/adapters; your component code never changes

Install

npm install @agentskit/react @agentskit/adapters

Quick example

import { useChat, ChatContainer, Message, InputBar } from '@agentskit/react'
import { anthropic } from '@agentskit/adapters'
import '@agentskit/react/theme'

export function Chat() {
  const chat = useChat({
    adapter: anthropic({ apiKey: process.env.ANTHROPIC_API_KEY, model: 'claude-sonnet-4-6' }),
  })
  return (
    <ChatContainer>
      {chat.messages.map(msg => <Message key={msg.id} message={msg} />)}
      <InputBar chat={chat} />
    </ChatContainer>
  )
}

Features

• useChat hook — streaming, abort, tool calls, memory, and skills in one API
• Headless components: ChatContainer, Message, InputBar, ToolCallView, ThinkingIndicator
• InputBar blocks form submit and Enter while chat.status === 'streaming' (and when disabled)
• ToolCallView toggle exposes aria-expanded for assistive tech
• data-ak-* attributes for styling — zero hardcoded styles, full design-system control
• Theme via @agentskit/react/theme — opt-in CSS variables, override per component
• Works with React 18 and 19

Other framework bindings (shared state/action contract)

Every binding adapts the shared ChatReturn state/action contract. Pick the one for your stack; component props and host state shapes remain framework-specific:

Package	API
@agentskit/vue	useChat composable + ChatContainer component
@agentskit/svelte	createChatStore — Svelte 5 store
@agentskit/solid	useChat hook (Solid createStore)
@agentskit/react-native	useChat (Metro / Hermes safe)
@agentskit/angular	AgentskitChat service (Signal + RxJS)
@agentskit/ink	Terminal useChat + components

Ecosystem

Package	Role
@agentskit/core	Chat controller types, events
@agentskit/adapters	anthropic, openai, ollama, …
@agentskit/runtime	Same stack without a browser
@agentskit/tools	Tool definitions for useChat

Contributors

License

MIT — see LICENSE.

Docs

Full documentation · GitHub

Maturity and compatibility

• Stability: beta — see docs/STABILITY.md
• Node.js 20+ and TypeScript strict mode
• Published as @agentskit/react

Contributing

See CONTRIBUTING.md and the monorepo LICENSE.