Chrome extension

Turn any page into an inspection + design surface, edit styles live, jump to source, and hand elements to the AI — from one tab.

The Chrome extension turns any page into an inspection + design surface, and hosts the side-panel AI chat. Select an element to read and edit its styles, copy/paste looks between elements, jump to its source, or hand it to the AI — all without leaving the tab.

Visual inspector

Hover to highlight, click to select. The side panel shows the selected element across these views:

View	What it shows
Design	The main editing surface, with three sub-views: Styles (editable controls — typography, color, spacing, box-shadow, transform, layout box — that write live to the element), CSS code (the generated `selector { … }` for your edits, editable), and React (the component tree + source location for the node).
Colors	A dedicated color inspector for the element / page palette.
Fonts	Typography specimen — family, size, weight, line-height, letter-spacing.
Assets	Images/media under the element, each with a preview, a download, and the resolved absolute source URL.
Bucket	History + clipboard — copied elements/styles you can reapply.

Design panel — edit styles live

The Design tab is a real editor, not a read-out. Change a value and it's written to the live DOM immediately:

Layout box

Margin / padding / size controls (the box model), edited visually.

Box shadow

Build and stack shadows with a dedicated control.

Transform

Translate / scale / rotate the element.

Type & color

Font, size, weight, spacing and color, applied as you edit.

This is the Figma-like styling workflow — see the Design your page like Figma guide.

Copy — snapshot the element (styles + markup) to the Raplify clipboard.
Paste styles — apply the copied element's styles onto the selected element.
Paste element — replace the selected element with the copied one.
Ask AI — open the compose popover (below).

"Ask AI" on an element — comment to the AI

Click Ask AI on the selected element to open an anchored compose popover. Type what you want, and Raplify packages the full context and sends it as one chat turn:

a screenshot of the element (captured via the privileged tab-capture, cropped to its rect; falls back to in-page capture),
its CSS selector,
its React component path + source location,
your prompt.

While the AI works, an animated outline + “Raplify is working on this…” badge sits around that element until the turn completes. It's effectively commenting on a UI element to ask the AI for a change or to flag an issue.

Click a node in the React view (or a file reference in a chat tool card) to jump to its source. Raplify routes the open intelligently (openSourceInEditor): if the Raplify dev-editor currently holds bridge access to that file's project it opens in-browser wired to the live workspace; otherwise it opens native VS Code via a vscode://file/<path>:<line>:<col> link. One click from a live element to the exact line of code.

Side-panel AI chat

The same @raplify/ui chat surface used in VS Code and IntelliJ, wired to the bridge:

Lanes + queue

Each lane is its own agent session; send while a turn runs and it queues FIFO.

Model + mode

Inline model selector and permission-mode selector (Ask / Accept edits / Plan / Bypass).

Image attach

Attach images to a prompt (base64 image blocks) — e.g. the element screenshot.

History

Past sessions persisted, listed, reopenable, deletable. “+” starts fresh.

Tool cards

Read / Write / Bash render as cards; file refs are clickable → jump to source.

Rich markdown

Math ( $…$ ) and footnotes render in assistant replies.

Crash + reconnect

Crash shows a Restart banner; a dropped socket reconnects and resumes the in-flight turn.

Commands gallery

Project commands as a modal grid (icons, run/edit), incl. “Generate with AI”.

Floating launcher

A draggable, edge-snapping floating Raplify button on the page (toggleable). Click it to open the side panel for that tab. It hover-expands to surface quick inspector actions.

Connecting to your editor

The extension drives your editor through the secure bridge. A page opened with a one-time ?raplify-code-token= / ?raplify-vscode-token= param auto-authorizes that origin only, then strips the param. Full flow: Install & connect the bridge.

Roadmap

One-click Preview of your edited page and Share (hand the styled page to a teammate) are planned, not shipped today.