agentskit.js
Examples

Multi-Agent Planning

A planner agent that breaks tasks into steps and delegates to specialists. Built with @agentskit/react and the planner skill.

A planner agent that breaks tasks into steps and delegates to specialists. Built with @agentskit/react and the planner skill.

🤖Multi-Agent Plannerplanner → researcher + coder
I'm the **Planner** agent. Give me a complex task and I'll break it down, delegating to **researcher** and **coder** specialists.

Code

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

function MultiAgentDemo() {
  const chat = useChat({
    adapter: yourAdapter,
    skills: [planner],
    systemPrompt: 'Break tasks into steps. Delegate research and coding to specialists.',
  })

  return (
    <ChatContainer>
      {chat.messages.map(msg => <Message key={msg.id} message={msg} />)}
      <InputBar chat={chat} placeholder="Give me a complex task..." />
    </ChatContainer>
  )
}

With Real Delegation (Runtime)

For actual multi-agent execution where child agents run independently:

import { createRuntime } from '@agentskit/runtime'
import { planner, researcher, coder } from '@agentskit/skills'

const runtime = createRuntime({
  adapter: yourAdapter,
  delegates: {
    researcher: { skill: researcher },
    coder: { skill: coder },
  },
})

const result = await runtime.run('Build a REST API for task management', {
  skill: planner,
})

Try it

cd apps/example-multi-agent
pnpm dev
✎ Edit this page on GitHub·Found a problem? Open an issue →·How to contribute →
Edit on GitHub

Runtime Agent

Run a standalone agent from code — no UI required. The runtime executes a ReAct loop: call tools, observe results, decide next action.

shadcn Chat

AgentsKit's useChat hook styled with shadcn/ui patterns. This demo recreates the shadcn look — in a real app, you'd use actual shadcn components.

On this page

CodeWith Real Delegation (Runtime)Try it