Works with every provider
Stop writing boilerplate
50 lines of stream parsing → 10 lines with AgentKit
const [messages, setMessages] = useState([])
const [input, setInput] = useState('')
const [streaming, setStreaming] = useState(false)
const abortRef = useRef(null)
const send = async () => {
setStreaming(true)
const userMsg = { role: 'user', content: input }
setMessages(prev => [...prev, userMsg])
const res = await fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({ messages: [...messages, userMsg] }),
signal: abortRef.current?.signal,
})
const reader = res.body.getReader()
const decoder = new TextDecoder()
let text = ''
while (true) {
const { done, value } = await reader.read()
if (done) break
text += decoder.decode(value)
setMessages(prev => [...prev.slice(0,-1),
{ role: 'assistant', content: text }])
}
setStreaming(false)
}
// + error handling, auto-scroll, cleanup...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({ model: 'claude-sonnet-4-6' })
})
return (
<ChatContainer>
{chat.messages.map(msg =>
<Message key={msg.id} message={msg} />
)}
<InputBar chat={chat} />
</ChatContainer>
)
}Why AgentKit?
Everything you need, nothing you don't
3 Hooks
useStream, useReactive, useChat — that's the entire API. Learn it in 5 minutes.
<5KB Bundle
Tiny footprint. No virtual DOM overhead. Just reactive streams wired to the DOM.
Any Provider
Claude, GPT, Vercel AI SDK, or bring your own ReadableStream. Swap in one line.
Headless + Theme
Components ship with data-ak-* attributes. Import the theme or style your way.
Agent-Friendly
Entire API fits in 2K tokens. AI agents generate correct AgentKit code first try.
Works Everywhere
Next.js, Vite, Remix, TanStack Start — any React 18+ app. Zero config.
10 Interactive Examples
Every example is a chat — because that's what AgentKit does
The entire API
Three hooks. Seven components. That's it.
// Hooks
const { text, status } = useStream(source)
const state = useReactive({ count: 0 })
const chat = useChat({ adapter })
// Components
<ChatContainer>
<Message message={m} />
<InputBar chat={chat} />
<Markdown content={s} />
<CodeBlock code={s} language="ts" copyable />
<ToolCallView toolCall={tc} />
<ThinkingIndicator visible />
// Theme (optional)
import '@agentkit-react/core/theme'Ready to ship?
Get from zero to AI chat in under a minute.
Inspired by Arrow.js — the first UI framework for the agentic era.