@agentskit/react-native

React Native / Expo hook + headless chat components. Metro-safe (no DOM deps). Same ChatReturn contract every AgentsKit framework binding ships.

Tags: ai · agents · llm · agentskit · react-native · expo · mobile · chat · streaming

Why

• One contract, every framework — useChat returns the exact same shape as the web React / Vue / Svelte / Solid / Angular / Ink bindings.
• Metro-safe — no DOM APIs; works on iOS, Android, and Expo out of the box.
• Native components — <ChatContainer> wraps ScrollView, <InputBar> wraps TextInput; 8 headless components at full parity with @agentskit/react.
• Streaming, tools, HITL — all core features work identically to @agentskit/react.

Headless on React Native

React Native has no DOM, so there are no data-ak-* attributes. The web-parity story is carried by testID props (ak-message, ak-input, ak-send, …): the same stable hooks the web components expose via data-ak-*, surfaced through RN's native testID (Appium / e2e). Role and status are conveyed via accessibilityLabel. No StyleSheet/colors are baked in — pass your own through the optional style prop where a host primitive accepts it.

Install

npm install @agentskit/react-native @agentskit/adapters

Peers: react, react-native.

Quick example

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

export function Chat() {
  const chat = useChat({
    adapter: anthropic({ apiKey: process.env.EXPO_PUBLIC_ANTHROPIC_API_KEY!, model: 'claude-sonnet-4-6' }),
  })

  return (
    <ChatContainer>
      {chat.messages.map((m) => <Message key={m.id} message={m} />)}
      <InputBar chat={chat} />
    </ChatContainer>
  )
}

API

• useChat(config) — hook returning ChatReturn (DOM-free, useSyncExternalStore).
• Headless components (RN primitives, testID-keyed):
  • ChatContainer — ScrollView wrapper with auto-scroll to end.
  • Message — message prop → View + Text; role/status via accessibilityLabel.
  • InputBar — chat: ChatReturn → TextInput + Send Pressable; sends on submit, disabled while empty or streaming.
  • Markdown — content + streaming → Text.
  • CodeBlock — code, language, copyable, onCopy → View + Text + optional copy Pressable.
  • ToolCallView — toolCall; collapsible details via a toggle Pressable.
  • ThinkingIndicator — visible + label; renders null when not visible.
  • ToolConfirmation — toolCall, onApprove, onDeny; renders null unless status === 'requires_confirmation'.

Ecosystem

| Package | Role | |---------|------| | @agentskit/core | ChatReturn contract | | @agentskit/adapters | LLM providers | | @agentskit/tools | Built-in + integration tools | | @agentskit/memory | Chat + vector backends | | @agentskit/react · vue · svelte · solid · angular · ink | Same contract, different host |

Contributors

License

MIT — see LICENSE.

Docs

Full documentation · GitHub