@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.
• AKOS: run the same concepts with enterprise deployment, governance, and observability at akos.agentskit.io.

Docs: package guide · agent handoff

Why react

• Ship faster — streaming chat with tool calls, memory, and markdown rendering works out of the box, no wiring required
• 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 (same contract)

Every binding exposes the same ChatReturn surface. Pick the one for your stack:

| 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.