Overview
Raplify across three editor surfaces — a Chrome inspector + design surface, VS Code and IntelliJ chat, all wired over one secure local bridge.
Raplify makes the whole dev loop rapid from one place. A Chrome extension turns any page into a design + inspection surface; VS Code and IntelliJ extensions host the same AI chat next to your code. They talk over one secure local bridge so the browser can drive your editor.
The pieces
Chrome extension
Visual inspector (Design / CSS / React / Typography / Assets), live style editing, copy-paste styles, the dev-editor, a side-panel AI chat, and “Ask AI” on any element.
VS Code extension
The Raplify chat view, the project-commands gallery, and the local bridge that issues the pairing token + receives “open this file” jumps from the browser.
IntelliJ extension
A JetBrains plugin (Kotlin) with the same right-side AI chat tool window + “Ask Raplify about this code / file” editor actions.
How they connect
VS Code (or IntelliJ) runs a secure local bridge — a token-derived-port WebSocket guarded by an HMAC handshake. The editor generates a pairing token; the Chrome extension receives it (a one-time URL param or paste), authorizes that exact origin, and connects. From then on the browser can stream AI turns and ask the editor to open files. See Install & connect the bridge.
What ships today vs. what's planned
This documentation is grounded in the actual code. Where a capability isn't built yet it's marked clearly so nothing here implies more than what's real.
| Capability | Surface | Status |
|---|---|---|
| Visual inspector + live style editing | Chrome | ✅ Ships |
| Copy / paste styles, copy element | Chrome | ✅ Ships |
| “Ask AI” on an element (screenshot + selector + React tree → chat) | Chrome | ✅ Ships |
| UI → code jump (click element → open source in editor) | Chrome → VS Code | ✅ Ships |
| Side-panel AI chat (lanes/queue, model + mode, image attach, history) | Chrome · VS Code · IntelliJ | ✅ Ships |
| Secure bridge + per-origin token connect | VS Code / IntelliJ ↔ Chrome | ✅ Ships |
| Git worktrees per lane | Bridge | ✅ Ships |
| Visual inspector inside the JetBrains IDE | IntelliJ | 🚧 Roadmap |
| One-click Preview & Share a styled page | Chrome | 🚧 Roadmap |
Tip
New here? Start with Install & connect the bridge, then the Design your page like Figma workflow.