Install & connect the bridge

Raplify drives your editor from the browser over a secure local bridge. The editor issues a pairing token; the browser proves it knows the token (HMAC handshake) and is scoped to the exact origin you connected. Here's the whole flow.

Prerequisites

• Node.js and the Claude CLI (claude) installed and on your PATH.
• An editor: VS Code 1.85+ or a JetBrains IDE 2023.2+.
• Google Chrome for the inspector / side-panel surface.

1 · Install the editor extension

VS Code

Install the Raplify extension (.vsix via Extensions ▸ ⋯ ▸ Install from VSIX…). The Raplify chat icon appears in the activity bar and the bridge starts automatically.

IntelliJ / JetBrains

Settings ▸ Plugins ▸ ⚙ ▸ Install Plugin from Disk… → raplify-intellij-0.1.0.zip. Open the Raplify Chat tool window. It auto-pairs (no token step needed).

Chrome

Load the extension (chrome://extensions → Developer mode → Load unpacked → the built dist/, or install the packed .zip). You get the inspector, the floating launcher, and the side panel.

2 · Connect Chrome ↔ VS Code (the token flow)

The bridge uses one shared secret per project (stored at ~/.raplify-bridge/tokens.json, owner-only). There are two ways to hand it to the browser.

Option A — one-click, pre-paired URL (recommended)

1. In VS Code, click the $(plug) Raplify Bridge item in the status bar to open the connection panel.
2. Use the pre-paired browser URL — it opens your site with a one-time ?raplify-code-token= param that authorizes that origin only, then strips the param.

Option B — copy & paste the token

1. In the connection panel, click Copy token.
2. In the Chrome side panel, paste it into the connect field. The active origin is authorized and the socket connects.

3 · Verify

Once connected, the side-panel chat shows connected, and clicking a node in the React view (or a file reference in a chat tool card) jumps to its source in your editor. Next: the Design your page like Figma workflow.