DevTools

Stream UI includes a built-in developer tools panel for inspecting the spec tree, watching live state, and tracking action events. No additional packages needed.

Setup

Mount <StreamUIDevTools /> inside your <StreamUIProvider> (or alongside <Renderer>, which creates one internally). Conditionally render it for development only:

import { Renderer, StreamUIDevTools } from "@prototyperai/stream-ui"
import { prototyperComponents } from "@prototyperai/stream-ui/components"

function App() {
  return (
    <div>
      <Renderer spec={spec} registry={prototyperComponents} />
      {process.env.NODE_ENV === "development" && <StreamUIDevTools />}
    </div>
  )
}

When used with StreamUIProvider directly:

import { StreamUIProvider, ElementRenderer, StreamUIDevTools } from "@prototyperai/stream-ui"

function App() {
  return (
    <StreamUIProvider spec={spec} registry={registry}>
      <ElementRenderer elementKey={spec.root} />
      {process.env.NODE_ENV === "development" && <StreamUIDevTools />}
    </StreamUIProvider>
  )
}

The DevTools render as a fixed panel at the bottom of the viewport. Click the "Stream UI" tab to open it.

Tabs

Spec Tree

Displays the element hierarchy as an interactive tree. Each node shows:

• Key — the element's string key (e.g., "card", "heading")
• Type — the component type in angle brackets (e.g., <Card>)
• Badges — indicators for root, children count, events, repeat, and conditional visibility

Click any node to inspect its details in the right pane:

• Props — the element's raw props object (before expression resolution)
• Events — the on binding map (if any)
• Visibility — the visible condition (if any)
• Repeat — the repeat configuration (if any)

State

Shows the full live state model as formatted JSON. Updates in real-time as state changes through actions, two-way bindings, or direct store.set() calls.

Action Log

A timestamped log of every action executed. Each entry shows:

• Timestamp — when the action fired
• Action name — the action that was called (e.g., setState, pushState)
• Params — the resolved parameter values

Use the Clear button to reset the log.

Props

External Action Logging

By default, the DevTools manage their own internal action log. For external control (e.g., if you want to log actions from custom handlers), use the useDevToolsActionLog() hook:

import { StreamUIDevTools, useDevToolsActionLog } from "@prototyperai/stream-ui"

function App() {
  const { log, record, clear } = useDevToolsActionLog()

  // Call `record` whenever a custom action fires
  function handleCustomAction(name: string, params: Record<string, unknown>) {
    record(name, params)
    // ... execute the action
  }

  return (
    <div>
      <Renderer
        spec={spec}
        registry={registry}
        handlers={{ myAction: (params) => handleCustomAction("myAction", params) }}
      />
      <StreamUIDevTools actionLog={log} />
    </div>
  )
}

useDevToolsActionLog() Return Value

ActionLogEntry

Production Builds

The DevTools panel is designed for development only. Always wrap it in a condition to exclude it from production bundles:

{process.env.NODE_ENV === "development" && <StreamUIDevTools />}

If you use Next.js, the dead-code elimination in production builds will strip the DevTools component entirely when wrapped in this check.