Guides

Get more out of UiToolbar with optional setup

React component detection

By default, UiToolbar selects elements by their HTML tag and CSS. For React apps, you can add a one-line script to unlock:

  • React component name (e.g. LoginForm)
  • Source file path and line number
  • Component props and state

This uses Bippy to traverse React's fiber tree. The script runs in the page world and communicates with the extension via postMessage.

Next.js (App Router)

Add to your root app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {process.env.NODE_ENV === 'development' && (
          <Script
            src="https://unpkg.com/@uitoolbar/visual-editor/dist/index.global.js"
            strategy="beforeInteractive"
          />
        )}
      </head>
      <body>{children}</body>
    </html>
  )
}

Next.js (Pages Router)

Add to pages/_document.tsx:

import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
        {process.env.NODE_ENV === 'development' && (
          <Script
            src="https://unpkg.com/@uitoolbar/visual-editor/dist/index.global.js"
            strategy="beforeInteractive"
          />
        )}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Vite

Add to your index.html:

<script src="https://unpkg.com/@uitoolbar/visual-editor/dist/index.global.js"></script>

Or load conditionally in your entry file:

if (import.meta.env.DEV) {
  import('@uitoolbar/visual-editor')
}

Any HTML page

Add the script tag before </head>:

<script src="https://unpkg.com/@uitoolbar/visual-editor/dist/index.global.js"></script>

CLI proxy mode

The CLI can proxy your dev server and inject the visual-editor script automatically — no code changes needed:

npx uitoolbar start http://localhost:3000

This starts a proxy on a new port with the script injected. Open the proxy URL instead of your dev server. Useful when you can't modify the app's source code.

Per-session undo

Every agent session snapshots your git state before making changes. To undo a session:

  • Click the undo button in the side panel session view
  • Or call the API: POST /undo/:sessionId
  • Or undo the last session: POST /undo

Undo reverts only that session's changes. Other work in your repo is untouched.

Multi-select workflows

Hold Shift and click to select multiple elements. All selected elements are sent as context to your agent, so you can describe changes that span multiple components in a single prompt.

Load unpacked (development)

Building UiToolbar from source:

git clone https://github.com/nicholasgriffintn/uitoolbar
cd uitoolbar && pnpm install && pnpm build:extension
  1. Open chrome://extensions
  2. Enable "Developer mode"
  3. Click "Load unpacked", select packages/extension/dist

After code changes, run pnpm build:extension and click the refresh icon in chrome://extensions.