Developer Tools

EmbeddedBrowser

Split-pane webview docked next to the chat. Point at any DOM element on your local site, tell the AI what to change, and the prompt already carries the exact selector, viewport, outer HTML, computed styles, and a cropped screenshot. Inspect, instruct, iterate, without leaving Plexon.

Download
The embedded browser docked to the right of the chat, with its URL bar, inspect crosshair, and send-to-chat controls

Click Any Pixel, Edit the Source

Open the embedded browser next to your chat, point at a button on your running dev server, and tell the AI what to change. The message that lands in chat already carries the exact CSS selector, inner text, viewport dimensions, outer HTML, a computed-styles digest, and a cropped PNG of the element. No more hand-describing elements in prose; no more pasting partial screenshots and hoping the model guesses which button. The inner loop between "I see the bug" and "the AI knows exactly where" is now a single click.

  • Split pane docked to the right of chat: resizable divider, remembered across restarts
  • Works against any URL the user can reach: localhost:3000, staging.example.com, a Vite preview, a Next.js dev server
  • One inspection produces a structured message the AI can act on with its normal file-editing tools
  • Zero setup: no extension to install in the browser, no dev-server instrumentation, no source maps required

Four-Tier Selector Strategy

Selectors are ranked by how likely they are to survive the next refactor. QA test hooks (data-testid, data-qa, data-cy, data-test, data-ui) come first: they exist precisely to be stable identifiers. Other data-* attributes come next: usually author-controlled and intentional. HTML ids follow, stable when hand-written, but framework-generated ids churn between renders. A positional CSS path with :nth-of-type() is the last resort. The inspector shows all four as clickable chips; the user picks which one the AI should target, and their typed instruction is preserved across chip swaps.

  • data-testid / data-qa / data-cy / data-test / data-ui: test-framework conventions first
  • Other data-* attributes: author-controlled, usually semantic
  • #id: exact when hand-written, noisy when framework-generated
  • Positional CSS path with :nth-of-type() collision handling: always valid, rarely stable
  • Active selector chip is highlighted; clicking a different chip never wipes the instruction in progress

Every Signal the Model Needs Inline

The prompt Plexon sends carries more than just the selector. The viewport dimensions go with every message so the AI can reason about responsive breakpoints. A computed-styles digest covers the properties that actually matter for a typical edit (display, position, color, background-color, font-size, font-weight, padding, margin, width, height) filtered out of the thousands that getComputedStyle returns. The outer HTML of the element is truncated to 4 KB and included in a collapsible <details> block so it is visible when the model needs it but does not dominate the context window. And a cropped PNG of the element itself rides along as an image attachment for vision-capable models.

  • Selector + inner text (truncated to 200 characters) + full page URL
  • Viewport width × height: essential for responsive-design instructions
  • Computed styles digest: 10 high-signal properties, not the 300+ getComputedStyle returns
  • Outer HTML capped at 4 KB with ellipsis marker, wrapped in <details> so it does not crowd the prompt
  • Cropped element screenshot attached as image_url: same channel as pasted images, so any vision model sees it

Inspect, Instruct, Iterate

Click the crosshair icon in the URL bar to enter inspect mode. A blue highlight follows the mouse across the page with an int32-max z-index so it outranks any host page stacking context, including modal dialogs and fullscreen surfaces. Click an element; inspect mode exits automatically and a docked popover appears under the viewport with the captured metadata. Type your instruction (Enter sends, Shift+Enter inserts a newline, Escape inside the webview exits inspect mode without selecting) and Plexon pushes the message into your current chat session. The AI uses its normal read/edit/grep tools to locate the source component and apply the change; your dev server hot-reloads; you click reload in the browser pane, re-inspect, and go again.

  • Crosshair icon toggles inspect mode; the button flips primary-coloured while active
  • Hover highlight uses a lightweight DOM overlay, not a heavyweight debugging protocol: no network cost, no frame drops
  • Plain click = single element edit and exit inspect mode; Ctrl+Click = add to selection and keep picking
  • The inspector docks at the bottom of the browser pane: always in the same place, never overlapping the element you clicked
  • Esc, the × button, or toggling the crosshair off all exit inspect mode cleanly
  • Back / forward / reload, smart URL normalisation (localhost → http://, example.com → https://, anything else → DuckDuckGo search)

Edit One Element or a Dozen in One Message

Hold Ctrl while clicking to stack multiple selections. Each one renders as its own row in the inspector with its screenshot, selector chips, and a × to drop just that entry. One instruction field applies to every selected element ("make all of these cards the same height and pin the CTA to the bottom") and the prompt switches to a numbered list with one cropped screenshot per element attached. The plus button in the inspector header re-enters inspect mode so you can keep stacking without digging into the URL bar.

  • Ctrl+Click appends; plain click replaces: familiar conventions from file managers and editors
  • Each selection is an independent row with its own selector chips and remove button
  • Sent prompt numbers every entry and attaches one image_url block per captured screenshot
  • One instruction → many elements. Same-height card rows, matching button styles, consistent padding, all with a single send

Safe-by-Default Isolation

The embedded page runs fully isolated. The guest page has no access to Plexon’s internals and no way to reach the backend. A minimal inspection layer installs the hover / click / Esc listeners and posts element metadata back to the host over a narrow, one-way channel. The main window runs sandboxed, exposing none of its privileged APIs to guest content. Popups opened from guest pages spawn their own isolated browser windows with none of Plexon’s inspection hooks, so a malicious localhost page cannot exfiltrate anything useful. For a dev tool that loads user-chosen pages on the user’s own machine, the threat model is intentionally minimal, and explicitly documented.

  • Full isolation on every embedded page: guest content cannot read Plexon’s internals
  • Embedded views are opt-in for the main window only; guest pages cannot spawn more
  • Inspection uses a capture-phase listener and an isolated overlay; it never mutates the host page’s DOM subtree
  • Screenshot capture runs at CSS-pixel resolution, clamped to the viewport, with no debugging-protocol exposure
  • The inspection layer ships with the app: no setup, and no extension to install

One-Click Integration With the Chat Pipeline

The send path is the same pipeline typed messages use. The inspector’s "Send to AI" button builds a ContentBlock[] with a text block (selector + viewport + outer HTML + styles) and an image_url block (the cropped screenshot as a base64 data URL), calls chatStore.addMessage and DaemonService.sendMessage, and lets the daemon’s normal streaming response come back to the regular chat view. No new provider code, no new message shape, no new storage. The browser is a richer input, not a separate conversation. When the daemon streams a file edit tool call, you see it in the chat while your browser pane shows the live page. Hit reload after the hot-reload kicks in; inspect the next element; send the next instruction.

  • ContentBlock[] with text + image_url: identical to the shape pasted images use, so every provider already handles it
  • Session auto-creation follows the same fallback chain as typed messages (client-side UUID if createSession RPC transiently fails)
  • No changes to the daemon, system prompts, or provider adapters: pure client-side feature
  • User messages show up in the chat transcript with the embedded screenshot thumbnail, so the history stays readable
  • Works in every chat mode (Code, Plan, Ask, Auto, Orchestrator) without per-mode branching

What the embedded browser gives you

Split-Pane Layout

A dockable webview sits beside the chat with a draggable divider (clamped 320–1400 px). Width and last-visited URL persist across sessions via localStorage. Toggle on/off with the globe icon in the input toolbar.

One-Click Element Picker

Click the crosshair icon, hover to highlight, click to select. The hover overlay rides on top of any host-page stacking context (z-index int32-max). Esc exits inspect mode cleanly.

Four-Tier Selector Strategy

QA hooks → data-* → id → positional CSS path. Chips let the user switch selectors without losing their typed instruction. Designed so the AI targets the most refactor-resilient handle available.

Cropped Element Screenshot

webview.capturePage with the element rect, clamped to CSS pixels inside the viewport. Attached as an image_url ContentBlock: same channel as pasted images, so every vision-capable provider just works.

Computed-Styles Digest

Ten high-signal properties (display, position, color, background-color, font-size, font-weight, padding, margin, width, height) filtered out of the hundreds getComputedStyle returns. Keeps prompts tight.

Outer HTML In a Collapsible Block

The element’s outerHTML is included in a <details> block capped at 4 KB with a truncation marker. Visible when the model needs it, never crowding the prompt.

Smart URL Normalisation

localhost:3000 → http://localhost:3000, 192.168.x.y → http://…, example.com → https://…, anything with spaces → DuckDuckGo search (no tracking). Back / forward / reload / stop buttons behave like any browser.

Sends Into the Current Chat

The "Send to AI" button builds a ContentBlock[] (text + screenshot), calls addMessage + DaemonService.sendMessage, and lets the regular streaming pipeline respond. No new provider code, no new session scope.

Fully Isolated Guest Pages

Guest pages run fully isolated. No access to Plexon’s internals, no access to app state. The inspection layer uses capture-phase listeners and an isolated overlay; it never mutates the host page’s subtree.

Works With Any Local Stack

Next.js, Vite, SvelteKit, Astro, Remix, a bare npx serve: Plexon treats them all the same. The embedded browser is a plain web view; whatever a modern browser can render, the inspector can target.

No Extension, No Setup

No browser extension to install, no dev-server plugin to add, no source maps required. The feature is entirely renderer-side plus a narrow IPC handler for the preload path.

Integrates With Every Chat Mode

Send from inside Code, Plan, Ask, Auto, or Orchestrator mode. The AI uses the same read/edit/grep tools it would for any other prompt. The browser just gives it a better starting position.

Complements Desktop Automation

The Desktop Automation connector drives native apps across the whole desktop; the embedded browser focuses on inspecting and editing your local web UI. Use them together: the connector orchestrates, the browser tightens the inner loop.

Fast Iteration Loop

Inspect → instruct → AI edits source → dev server hot-reloads → click reload in the browser pane → inspect the next element. No context switch, no manual copy-paste, no prose description of which button you meant.