@assistant-ui/react-devtools

@assistant-ui/react-devtools

React-first development tools for assistant-ui components. This package ships the reusable React helpers, runtime adapters, and UI necessary to embed the DevTools experience in any host application.

Features

• Component Library: React components for debugging assistant-ui experiences
• Event Logging: Track and inspect assistant-ui events and state changes
• Context Viewer: View Assistant API context and state in real-time
• Embeddable Host: Frame bridges that power custom hosts, including the Chrome extension

Installation

As React Component Library

npm install @assistant-ui/react-devtools

As Chrome Extension

See apps/devtools-extension for the standalone Chrome extension source and build scripts (pnpm --filter @assistant-ui/devtools-extension run build).

Usage

React Components

import { DevToolsUI, DevToolsModal } from '@assistant-ui/react-devtools';

// Use the full DevTools UI
<DevToolsUI />

// Or use as a modal overlay
<DevToolsModal />

Chrome Extension

The Chrome extension now lives under apps/devtools-extension as a separate workspace app. It consumes this package at build time to reuse the shared runtime and UI.

Build Scripts

• npm run build - Build the React component library
• npm run build:lib - Alias for build
• npm run dev - Development build with watch mode

Package Structure

packages/react-devtools/
├── src/                     # React component library source
│   ├── DevToolsHooks.ts     # Core devtools functionality
│   ├── DevToolsModal.tsx    # Modal wrapper component (iframe host)
│   └── index.ts             # Main exports
└── scripts/                 # Build scripts

Development

The devtools package builds with @assistant-ui/x-buildutils to transpile the TypeScript sources that power the React helpers and adapters consumed across the workspace.

License

MIT