AgentKit

Ship AI chat in 10 lines of React.

Drop-in hooks and components for streaming AI interfaces. Works with Claude, GPT, Vercel AI SDK, or any LLM. So simple an AI agent can write it for you.

Install

npm install @agentkit-react/core

10-Line Chat

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

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

That's it. Streaming, auto-scroll, keyboard handling, light/dark theme — all included.

Why AgentKit?

| | AgentKit | Vercel AI SDK | assistant-ui | |---|---------|--------------|-------------| | API surface | 3 hooks | Full toolkit | 50+ components | | Setup | 10 lines | ~30 lines | ~50 lines | | Headless | Yes | No UI included | Opinionated | | Agent-friendly | Entire API fits in 2K tokens | Large docs surface | Large docs surface | | Bundle | <5KB | ~30KB | ~80KB |

Swap providers in one line

import { anthropic, openai, vercelAI, generic } from '@agentkit-react/core/adapters'

// Claude
useChat({ adapter: anthropic({ apiKey, model: 'claude-sonnet-4-6' }) })

// GPT
useChat({ adapter: openai({ apiKey, model: 'gpt-4o' }) })

// Vercel AI SDK (route handler)
useChat({ adapter: vercelAI({ api: '/api/chat' }) })

// Any ReadableStream
useChat({ adapter: generic({ send: async (msgs) => fetch('/api', { body: JSON.stringify(msgs) }).then(r => r.body!) }) })

Works everywhere

Next.js (App Router)

// app/chat/page.tsx
'use client'
import { useChat, ChatContainer, Message, InputBar } from '@agentkit-react/core'
import { anthropic } from '@agentkit-react/core/adapters'
import '@agentkit-react/core/theme'

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

Vite

// src/App.tsx
import { useChat, ChatContainer, Message, InputBar } from '@agentkit-react/core'
import { openai } from '@agentkit-react/core/adapters'
import '@agentkit-react/core/theme'

function App() {
  const chat = useChat({ adapter: openai({ apiKey: import.meta.env.VITE_OPENAI_KEY, model: 'gpt-4o' }) })
  return (
    <ChatContainer>
      {chat.messages.map(msg => <Message key={msg.id} message={msg} />)}
      <InputBar chat={chat} />
    </ChatContainer>
  )
}

Remix

// app/routes/chat.tsx
import { useChat, ChatContainer, Message, InputBar } from '@agentkit-react/core'
import { vercelAI } from '@agentkit-react/core/adapters'
import '@agentkit-react/core/theme'

export default function Chat() {
  const chat = useChat({ adapter: vercelAI({ api: '/api/chat' }) })
  return (
    <ChatContainer>
      {chat.messages.map(msg => <Message key={msg.id} message={msg} />)}
      <InputBar chat={chat} />
    </ChatContainer>
  )
}

TanStack Start

// src/routes/chat.tsx
import { useChat, ChatContainer, Message, InputBar } from '@agentkit-react/core'
import { anthropic } from '@agentkit-react/core/adapters'
import '@agentkit-react/core/theme'

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

The entire API

3 Hooks

// Stream any async source
const { text, status, error, stop } = useStream(source)

// Reactive state (proxy-based, minimal re-renders)
const state = useReactive({ count: 0 })

// Full chat session
const chat = useChat({ adapter })

7 Components

<ChatContainer>         {/* scrollable chat layout */}
<Message message={m} /> {/* chat bubble with streaming */}
<InputBar chat={chat} /> {/* input + send */}
<Markdown content={s} /> {/* markdown renderer */}
<CodeBlock code={s} language="ts" copyable />
<ToolCallView toolCall={tc} />
<ThinkingIndicator visible />

Headless + Optional Theme

Components ship unstyled with data-ak-* attributes. Import the theme for instant polish:

import '@agentkit-react/core/theme' // light/dark, CSS custom properties

Override any token:

:root {
  --ak-color-bubble-user: #10b981;
  --ak-radius: 16px;
}

For AI Agents

The entire API fits in under 2,000 tokens. See the agent-friendly reference — paste it into your LLM context and start generating chat UIs.

Credits

Inspired by Arrow.js — the first UI framework for the agentic era.

License

MIT