Shavin Dev Inspector & Agent Bridge

ShavinDevInspector (also exported as ShavinDevTools) is a floating, draggable design inspector and real-time agent bridge that auto-mounts in development when you wrap your app in ThemeProvider. It provides a live theme configurator, a real-time token discipline audit scanner, and bidirectional connection to the Agent-Browser Bridge (:7428).

The Dev Inspector connects directly to the Shavin Bridge Daemon running on port 7428. This creates a live telemetry pipeline between your browser and AI coding assistants (Cursor, Claude, Antigravity):

npx @shavin/cli bridge

The floating panel provides three specialized operational modes:

The injection chain is managed at the root layout:

1. You wrap your app in <ThemeProvider> at the root layout.
2. ThemeProvider evaluates showDevTools = devTools ?? (NODE_ENV !== "production").
3. When active, it renders <ShavinDevTools /> alongside your children.

Running npx @shavin/cli init automatically wraps your root layout.

Configure default theme presets, appearance mode, and dev inspector visibility on ThemeProvider:

If you mount ShavinDevTools directly to override placement or force staging previews:

The floating trigger button snaps to one of four screen corners and can be dragged across the screen:

import { ThemeProvider, ShavinDevTools } from "@shavin/ui";

// ThemeProvider mounts DevTools automatically.
// To customize placement, disable default devTools and mount ShavinDevTools explicitly:
<ThemeProvider devTools={false}>
  {children}
  <ShavinDevTools position="bottom-right" />
</ThemeProvider>

By default, the inspector self-guards and never renders in production (NODE_ENV === "production"). If you need it in a staging or preview deployment that runs in production mode, use the forceShow prop:

<ShavinDevTools forceShow position="bottom-right" />

To turn off the inspector entirely, pass devTools={false} to ThemeProvider:

<ThemeProvider devTools={false}>
  {children}
</ThemeProvider>