dreamhunter2333

Claude VS Ext Web — Development skill for Claude Code

Development community

Web-based Claude Code interface - Run VSCode Claude Code extension in browser.

How to install Claude VS Ext Web

This entry records only its repository, not the path inside it, so there is no exact command to give. Open dreamhunter2333/claude-vs-ext-web and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude VS Ext Web does

Web-based Claude Code interface - Run VSCode Claude Code extension in browser.

Alternatives in Development

Claude Coder — Kodu is an autonomous coding agent that lives in your IDE 5.2k ★
Claude Engineer — A version of command line interface(CLI) that leverages the power of Claude Opus(3-4.7) 954 ★
Harnessrouter — HarnessRouter Community Edition: the self-hosted, Apache-2.0 edition of the unified interface for agent harnes 618 ★

README

claude-vs-ext-web — Web-Based Claude Code

[English](README.md) | [简体中文](README.zh-CN.md)

A standalone web interface for [Claude Code](https://claude.ai/code) that runs in any modern browser. claude-vs-ext-web reuses the official VSCode Claude Code extension's React chat UI through a custom shim layer, with a Node.js backend managing `claude` processes via WebSocket.

Screenshots

How It Works

graph TB
    subgraph Browser
        A[VSCode Extension Webview
React, unmodified]
        B[shim.js
replaces acquireVsCodeApi with WS]
        A --> B
    end

    subgraph "Node.js Server"
        C[Express + WebSocket Server]
        D[Routes API]
        E[Message Handler]
        F[Session Manager]
        G[claude binary
stream-json protocol]

        C --> D
        C --> E
        E --> F
        F -->|stdin/stdout| G
    end

    B -->|WebSocket /ws| C

**Key Insight**: Instead of rebuilding the chat UI from scratch, claude-vs-ext-web serves the extension's original webview files and injects a shim that replaces VSCode's `acquireVsCodeApi()` with a WebSocket bridge. The extension's React app works unmodified in the browser.

Features

Full Claude Code Chat UI — The same React-based interface from the VSCode extension
Project Discovery — Auto-discovers projects from ~/.claude/projects/ session history
Session Resume — Resume previous conversations from saved history
Permission Control — Tool permission request/response flow with user approval
Model Selection — Switch between Claude models (Sonnet, Opus, etc.)
Theme Switching — GitHub Dark / GitHub Light themes, persisted in localStorage
Multi-Session — Each project gets its own isolated claude proces