Devtools server

Expose a live SSE stream of agent events so any browser-based dashboard can display them in real time.

createDevtoolsServer taps into the same observer event stream as loggers and tracers, then makes those events available over SSE. Connect a browser UI with a standard EventSource — no WebSocket server, no custom protocol.

import { createDevtoolsServer, toSseFrame } from '@agentskit/observability'

const devtools = createDevtoolsServer()

const runtime = createRuntime({ adapter, observers: [devtools.observer] })

// Next.js / Hono / Bun SSE route
export const GET = () =>
  new Response(
    new ReadableStream({
      start(controller) {
        devtools.subscribe((event) =>
          controller.enqueue(new TextEncoder().encode(toSseFrame(event))),
        )
      },
    }),
    { headers: { 'content-type': 'text/event-stream' } },
  )

Connect any web UI with EventSource('/devtools').

#Production control surface (pause / step / replay)

createDevtoolsServer is dev-only — read-only event tap. The auth-gated production counterpart is createControlSurface, which lets ops pause an agent loop, step it one iteration, override the next tool call's result, and replay a finished run.

import { createControlSurface } from '@agentskit/observability'

const control = createControlSurface({
  authorize: (req) => verifyOpsToken(req.headers.get('authorization')),
  audit: (entry) => auditSink.write(entry),
})

const runtime = createRuntime({ adapter, observers: [control.observer] })

control.pause(runId)            // freeze loop at next checkpoint
control.step(runId)             // advance one iteration
control.overrideTool(runId, { name: 'send_email', result: { stubbed: true } })
control.snapshot(runId)         // structured RunSnapshot
control.replay(runId)           // re-execute from the recorded transcript

Every action passes through authorize and emits a ControlAuditEntry — pair with audit log.

#Live multi-agent topology graph

createTopologyGraph consumes the same observer stream and renders a live DAG of agents, delegates, and tool edges. Pre-built views in @agentskit/react and @agentskit/ink:

import { createTopologyGraph } from '@agentskit/observability'
import { TopologyGraphView } from '@agentskit/react'

const graph = createTopologyGraph()
const runtime = createRuntime({ adapter, observers: [graph.observer] })

<TopologyGraphView snapshot={graph.snapshot()} />

Snapshot shape is JSON-serialisable — pipe through SSE for a remote dashboard, or render in Ink for terminal observability.

Explore nearby

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

Devtools server

#Production control surface (pause / step / replay)

#Live multi-agent topology graph

#Related

Explore nearby

On this page