agentskit.js
Recipes

Devtools server

Expose a live feed of agent events so any browser extension or custom dashboard can inspect a running agent.

The AgentsKit devtools server is a transport-agnostic pub/sub hub for agent events. Plug it into your runtime as an observer; attach any transport (SSE response, WebSocket, in-process sink) as a client. New clients get a replay of the recent ring buffer so they can jump in mid-session. The envelope shape is the contract a browser extension (or your own dashboard) speaks against.

Install

Comes with @agentskit/observability.

Wire it up

import { createDevtoolsServer } from '@agentskit/observability'
import { createRuntime } from '@agentskit/runtime'
import { anthropic } from '@agentskit/adapters'

export const devtools = createDevtoolsServer({ bufferSize: 500 })

export const runtime = createRuntime({
  adapter: anthropic({ apiKey: process.env.ANTHROPIC_API_KEY!, model: 'claude-sonnet-4-6' }),
  observers: [devtools.observer],
})

devtools.observer receives every AgentEvent the runtime emits and fans it out to every attached client.

Expose over SSE (Node http example)

import { createServer } from 'node:http'
import { toSseFrame } from '@agentskit/observability'
import { devtools } from './runtime'

createServer((req, res) => {
  if (req.url !== '/agentskit/devtools') {
    res.statusCode = 404
    res.end()
    return
  }
  res.writeHead(200, {
    'content-type': 'text/event-stream',
    'cache-control': 'no-cache',
    connection: 'keep-alive',
  })
  const detach = devtools.attach({
    id: `c-${Date.now()}`,
    send: envelope => res.write(toSseFrame(envelope)),
    close: () => res.end(),
  })
  req.on('close', detach)
}).listen(4999)

Point your browser extension at http://localhost:4999/agentskit/devtools and it receives:

  1. { type: 'hello', protocol: 1, serverId, since }
  2. One { type: 'agent-event' } per retained event
  3. { type: 'replay-end', seq }
  4. Live feed of new agent-event envelopes

Protocol

type DevtoolsEnvelope =
  | { type: 'hello'; protocol: 1; serverId: string; since: string }
  | { type: 'agent-event'; seq: number; at: number; event: AgentEvent }
  | { type: 'replay-end'; seq: number }

seq is monotonic per server, at is Date.now() at publish time.

Programmatic access

No browser needed — devtools.buffer() returns a snapshot of retained events for in-process assertions, tests, or CLI tools.

See also

✎ Edit this page on GitHub·Found a problem? Open an issue →·How to contribute →
Edit on GitHub

Fallback chain

Try adapters in order — on error, fall through to the next without duplicating tool calls.

Local trace viewer

Persist agent spans to disk and open a self-contained HTML waterfall — Jaeger-style, no server required.

On this page

InstallWire it upExpose over SSE (Node http example)ProtocolProgrammatic accessSee also