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({ bufferSize: 500 })
const runtime = createRuntime({ adapter, observers: [devtools.observer] })
// Adapt this client to your framework. `attach` replays the bounded buffer
// and then sends live envelopes; detach it when the client disconnects.
const detach = devtools.attach({
id: 'browser-1',
send: envelope => console.log(toSseFrame(envelope)),
close: () => {},
})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({
bearerToken: process.env.AGENT_OPS_TOKEN!,
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.inject(runId, { tool: 'send_email', result: JSON.stringify({ stubbed: true }) })
control.snapshot(runId) // structured RunSnapshot
control.replay(snapshot) // restore paused state + pending overridesEvery HTTP action requires the configured bearer token and emits a ControlAuditEntry — pair with audit log.
#Live multi-agent topology graph
createTopologyGraph consumes typed topology events 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()
graph.ingest({ topology: 'supervisor', phase: 'dispatch', agent: 'researcher', task: 'find sources' })
<TopologyGraphView snapshot={graph.toJSON()} />Snapshot shape is JSON-serialisable — pipe through SSE for a remote dashboard, or render in Ink for terminal observability.
#Related
Explore nearby
- PeerObservability
Attach loggers, tracers, and cost guards to any runtime — no code changes beyond adding an observer.
- PeerLoggers + tracers
Attach console, LangSmith, or OpenTelemetry observers to any runtime — mix and match, all receive the same event stream.
- PeerTrace viewer
Generate a self-contained HTML trace file from any run — inspect spans offline without a tracing backend.