raplify-vscode

A VS Code extension that puts a Claude Code chat panel on the right side of the editor and exposes the same chat session over a local WebSocket bridge (so the Raplify Chrome extension — or any other client — can drive it too).

What it does

Adds a Raplify Chat activity-bar view (right side, like Copilot).
Spawns the claude CLI as a Node child_process with --output-format stream-json --input-format stream-json --verbose.
Streams every JSON event from the CLI into the webview, rendering all block types: system init, text, tool_use, tool_result, thinking, and the final result (cost / tokens / duration).
Mirrors the same protocol over a ws://127.0.0.1:4791 server. Any client (Chrome extension, CLI script, browser tab) can send user.prompt, session.stop, session.clear frames and will receive every claude.event and session.status update in real time.

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                       VS Code Extension Host                    │
│                                                                 │
│  ┌────────────────┐        ┌─────────────────────┐              │
│  │ ChatViewProv.  │◄─────► │   ChatController    │              │
│  │  (webview)     │        │  (routes intents)   │              │
│  └────────────────┘        └────────┬────────────┘              │
│         ▲                           │                           │
│         │BridgeMessage              │ BridgeMessage             │
│         │                           ▼                           │
│         │                  ┌─────────────────┐                  │
│         │                  │ ClaudeCliRunner │──► claude (CLI)  │
│         │                  └─────────────────┘                  │
│         │                           │                           │
│         │                  ┌─────────────────┐                  │
│         └─────────────────►│ WebSocketDriver │◄─► ws clients    │
│                            └─────────────────┘   (Chrome ext.)  │
└─────────────────────────────────────────────────────────────────┘

Every peer (webview, WebSocket client) speaks the same BridgeMessage protocol defined in src/websocket/protocol.ts.

Project layout

Folder	Purpose
`src/theme/`	Colors, fonts, spacing. Edit one file to restyle the chat.
`src/claude/`	`ClaudeCliRunner`, `ClaudeStreamParser`, message types.
`src/websocket/`	WebSocket server + wire protocol.
`src/chat/`	`ChatController` + `messageRouter`.
`src/webview/`	`ChatViewProvider`, HTML template, and webview client.
`src/utils/`	`logger`, `disposable`, `nonce`.
`src/test/`	Mocha tests + fixtures.

Each file is small and single-purpose; comments at the top of each module explain the why.

Development

npm install
npm run watch        # rebuild on change
# F5 in VS Code to launch the Extension Development Host

Tests

npm test             # runs all mocha suites (parser, runner, router,
                     # controller, WebSocket driver, theme)

The CLI runner is tested with a fake spawn implementation (src/test/fixtures/fakeChild.ts) so no real claude binary is required.

Settings

Key	Default	Description
`raplify.claudeBinary`	`claude`	CLI binary used to spawn sessions.
`raplify.claudeExtraArgs`	`[]`	Extra CLI args appended after the streaming flags.
`raplify.workingDirectory`	`""`	Cwd for the spawned CLI. Empty = first workspace folder.
`raplify.webSocket.enabled`	`true`	Toggle the local WS bridge.
`raplify.webSocket.host`	`127.0.0.1`	Bind host.
`raplify.webSocket.port`	`4791`	Bind port.

WebSocket protocol

Connect to ws://127.0.0.1:4791. On connect you receive:

{ "kind": "hello", "server": "raplify-vscode", "version": "0.1.0", "capabilities": [...] }

Send a prompt:

{ "kind": "user.prompt", "prompt": "Refactor this function", "requestId": "r1" }

You will receive a session.status running frame, then a stream of claude.event frames (each event is the raw stream-json line the CLI emitted), and a session.status exited frame when the run ends.

To stop or clear:

{ "kind": "session.stop" }
{ "kind": "session.clear" }

Raplify VSCode

Raplify