Quick start

This page is the fastest UI binding hello-world (useChat + a framework package). It is not the product chat framework — for a versioned multi-surface chat application, use AgentsKit Chat.

If you want the full AgentsKit foundation story with runtime, tools, memory, and observability, jump to Build your first agent.

#Basic chat

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

function App() {
  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>
  )
}

#What you got

Out of the box: streaming, message history, default styling. No extra setup.

#What this page is not

This quickstart shows the headless UI binding only — a thin React (or other framework) shell over AgentsKit primitives.

• Product chat apps (routes, actions, multi-renderer definition, Ask backend) → AgentsKit Chat
• Autonomous runs → @agentskit/runtime
• Tools and integrations → @agentskit/tools
• Persistence → @agentskit/memory
• Tracing → @agentskit/observability

For the foundation path, continue to Build your first agent.

#Swap providers

The adapter is the only thing that changes. Everything else stays the same.

import { openai } from '@agentskit/adapters'

const chat = useChat({
  adapter: openai({ apiKey: 'your-key', model: 'gpt-4o' }),
})

This is the plug-and-play principle in practice — no rewrites for a provider swap.

Not sure which to pick? See Choosing an adapter for a capability matrix and rules of thumb.

#Headless mode

Skip the theme import and style everything yourself — components render with data-ak-* attributes only:

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

function App() {
  const chat = useChat({ adapter: myAdapter })
  return (
    <ChatContainer className="my-chat">
      {chat.messages.map(msg => (
        <Message key={msg.id} message={msg} />
      ))}
      <InputBar chat={chat} />
    </ChatContainer>
  )
}

#Try the official examples

• apps/example-react — full chat with tool calls and memory
• apps/example-ink — same chat in your terminal
• apps/example-runtime — autonomous agent (no UI)
• apps/example-multi-agent — supervisor + workers