@uiprotocol/devtools

Embeddable devtools panel for inspecting @uiprotocol/core runtime state.

Part of the UIProtocol monorepo.

Installation

npm install @uiprotocol/devtools @uiprotocol/core @uiprotocol/react

Requires react >= 18 and react-dom >= 18 as peer dependencies.

API

DevToolsPanel

Drop-in panel component that reads from the runtime context.

import { DevToolsPanel } from "@uiprotocol/devtools";

<DevToolsPanel defaultTab="surfaces" />

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultTab | "surfaces" \| "commands" \| "events" \| "trust" | "surfaces" | Initial active tab |

Tabs

| Tab | Description | |-----|-------------| | Surfaces | Inspect active surfaces, their nodes, and data models | | Commands | View the command log with trust verdicts | | Events | Live stream of runtime events | | Trust | View the current trust policy and blocked commands |

Hooks

| Hook | Description | |------|-------------| | useCommandLog(runtime) | Returns command log entries with trust verdicts | | useEvents(runtime) | Returns live event stream entries |

Types

| Type | Description | |------|-------------| | DevToolsTab | "surfaces" \| "commands" \| "events" \| "trust" | | DevToolsPanelProps | { defaultTab?: DevToolsTab } | | CommandLogDisplayEntry | { command, verdict, timestamp } | | EventLogEntry | { type, payload, timestamp } |

Usage

Place the panel inside a RuntimeProvider:

import { RuntimeProvider } from "@uiprotocol/react";
import { DevToolsPanel } from "@uiprotocol/devtools";

function App() {
  return (
    <RuntimeProvider componentsMap={componentsMap}>
      <MyApp />
      {process.env.NODE_ENV === "development" && (
        <DevToolsPanel />
      )}
    </RuntimeProvider>
  );
}

License

MIT