Quick start

This page is the fastest hello-world. If you want the full AgentsKit 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 UI layer only. AgentsKit gets more compelling when you compose the rest of the ecosystem:

• @agentskit/runtime for autonomous runs
• @agentskit/tools for tool use and integrations
• @agentskit/memory for persistence across runs
• @agentskit/observability for tracing and auditability

For that 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