wehub-resource-sync
e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
48 lines
1.3 KiB
Markdown
48 lines
1.3 KiB
Markdown
# `@assistant-ui/react-devtools`
|
|
|
|
React DevTools UI for `@assistant-ui/react`. Embed an event log, context viewer, and runtime inspector in any host application.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @assistant-ui/react-devtools
|
|
```
|
|
|
|
## Usage
|
|
|
|
Drop `DevToolsModal` inside your `AssistantRuntimeProvider`. It renders a floating launcher and an inline panel (isolated in a shadow root), and is a no-op in production builds.
|
|
|
|
```tsx
|
|
import { AssistantRuntimeProvider } from "@assistant-ui/react";
|
|
import { DevToolsModal } from "@assistant-ui/react-devtools";
|
|
|
|
export function App() {
|
|
return (
|
|
<AssistantRuntimeProvider runtime={runtime}>
|
|
<DevToolsModal />
|
|
{/* ...your assistant-ui... */}
|
|
</AssistantRuntimeProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Custom tabs
|
|
|
|
The panel is extensible through a plugin registry. Each plugin receives the inspected instance's projected data and renders a tab body.
|
|
|
|
```tsx
|
|
import { createDevToolsPlugin, DevToolsModal } from "@assistant-ui/react-devtools";
|
|
|
|
const myTab = createDevToolsPlugin({
|
|
id: "my-tab",
|
|
label: "My tab",
|
|
Component: ({ data }) => <pre>{JSON.stringify(data.state, null, 2)}</pre>,
|
|
});
|
|
|
|
<DevToolsModal plugins={[myTab]} />;
|
|
```
|
|
|
|
## Documentation
|
|
|
|
Full reference at [assistant-ui.com/docs/devtools](https://www.assistant-ui.com/docs/devtools).
|