pi-grep

Inspect React components via the Fiber tree and spawn contextual Pi agent sessions — right from your dev server.

Cmd+Click → Component info → Pi agent → Floating chat panel

Install

npm install pi-grep

Usage

1. Start the WebSocket bridge

npx pi-grep server

2. Wrap your app

import { PiProvider, PiPanel, useComponentInspector } from "pi-grep";

function App() {
  const { createSession } = usePiContext();

  useComponentInspector({
    onComponentSelect: (info) => {
      createSession({ component: info });
    },
  });

  return (
    <PiProvider backendUrl="ws://localhost:3344">
      <YourApp />
      <PiPanel />
    </PiProvider>
  );
}

3. Cmd+Click any component

Hold Cmd (react-grep shows names), then Cmd+Click — a Pi agent spawns with the component's file path and props as context.

Architecture

Browser (React)          Node.js Server (pi-grep)
┌─────────────────┐     ┌──────────────────────┐
│  PiProvider      │←───→│  WebSocket :3344     │
│  PiPanel         │     │  ┌──────────────┐    │
│  useComponent    │     │  │ SessionManager│    │
│  Inspector       │     │  │ spawns        │    │
└─────────────────┘     │  │ pi --mode rpc  │    │
                         │  └──────┬───────┘    │
                         └─────────┼────────────┘
                                   │
                         ┌─────────▼────────┐
                         │  pi --mode rpc   │
                         │  subprocesses    │
                         └──────────────────┘

Development

cd packages/pi-grep
npm install
npm run build    # builds client + server bundles

To sync into user-dashboard:

cd user-dashboard
npm run sync-pi-grep

License

MIT