windowcode

把 Claude Code 的 CLI 界面搬到浏览器：通过 WebSocket 双向桥接，在网页里发消息、看流式输出与工具调用卡片，并对危险操作弹窗审批，复用本机 ~/.claude 的 skills/MCP 配置。

爱鲜报评分

0.0

0 人评分

开源 · — #AI #Agent #JavaScript #Claude Code #WebSocket #Claude

星数

是

中文

JavaScript

主语言

是

活跃

贡献者

人工分析

EDITORIAL

适用场景

在浏览器中远程操作本机 Claude Code 会话
为 Claude Code 增加图形化权限审批流程
给团队内部搭建 AI 编码助手的 Web 前端
学习 Agent SDK 流式事件与权限回灌的实践
在受限工作目录（--cwd）内安全执行文件操作

优点

基于 Agent SDK 的 query()，支持逐次权限回调与会话续接
WebSocket 帧协议定义清晰，浏览器与 CLI 职责分离
默认继承 ~/.claude 的 skills/MCP/CLAUDE.md，无需重复配置
用 cwd 限定文件操作范围，具备基本隔离思路
前端 Markdown 渲染与代码高亮处理较完整，流式输出有防闪烁处理

缺点

v1 一个浏览器连接只对应一个会话，不支持多标签/多会话
会话分叉（fork）未实现，历史依赖 Claude Code 自身持久化
依赖本机已安装并登录 Claude Code，部署门槛不低
License 未标注，商用前需确认授权
仅 3 星的小项目，维护与文档完善度有待观察

上手难度进阶

windowcode 是什么

windowcode 把 Claude Code 的交互界面搬到浏览器：你在网页里输入消息，Node 端 CLI 驱动本机 Claude Code 执行，再把逐字文本、工具调用与结果流式回传。

浏览器 UI  ←WebSocket→  CLI (Node)  ←Agent SDK→  Claude Code

核心能力

双向桥接：浏览器发消息 → CLI 驱动 Claude Code → 流式回传文本增量、工具调用与工具结果。
独立工作目录：用 --cwd 指定 Claude Code 的工作目录，文件操作被限定在该范围内。
复用全局配置：默认加载本机 ~/.claude 下的 skills / MCP / CLAUDE.md，与交互式 CLI 行为一致。
权限审批回灌：Edit / Write / Bash 等危险工具调用会在浏览器弹出「允许 / 拒绝」，选择后回灌给 Claude Code 继续或放弃。

使用方式

前置条件：本机已安装并登录 Claude Code（claude CLI 可用），认证方式与 CLI 相同（OAuth / ANTHROPIC_API_KEY / Bedrock / Vertex）。

cd windowcode
npm install

# 当前目录起服务并自动打开浏览器
node bin/cli.js

# 指定端口与工作目录
node bin/cli.js --port 8080 --cwd /path/to/project

# 不自动开浏览器
node bin/cli.js --no-open

默认地址为 http://127.0.0.1:1717。

浏览器端交互

底部输入框，Enter 发送、Shift+Enter 换行。
Claude 文本按 GitHub Flavored Markdown 渲染，代码块用 highlight.js（github-dark 主题）高亮。
每轮工具调用显示为可折叠卡片，包含工具名、输入与结果。
危险操作弹出审批横条；运行中可点「停止」中断当前回合。

实现要点

项目没有裸跑 claude -p 子进程，而是使用 @anthropic-ai/claude-agent-sdk 的 query()，从而获得：

逐次动态权限回调 canUseTool；
结构化流式事件；
基于 session_id 的多轮会话续接。

配置上采取「不隔离全局能力、只隔离文件范围」的策略：settingSources: ['user','project','local'] 保留全局 skills/MCP，仅靠 cwd 限定工作目录。

目录结构概览

bin/cli.js        CLI 入口（参数解析、启动服务）
core/main.js      主流程
core/server.js    HTTP 静态服务 + WebSocket 帧
core/session.js   Agent SDK 会话封装
web/              浏览器端页面与预打包 vendor 依赖
scripts/          构建 hljs vendor 的脚本

已知限制

一个浏览器连接对应一个 Claude Code 会话，暂不支持多会话/多标签。
历史记录依赖 Claude Code 自身持久化，前端不另存。
会话续接只读 session_id，复杂分叉（fork）尚未实现。

登录后才可评论与评分

去登录注册

0 条评论