11<p align =" center " >
2- <img src =" doc/assets/webcode-logo.png " width =" 220 " alt =" webcode logo " >
2+ <img src =" doc/assets/webcode-logo.png " width =" 150 " alt =" webcode logo " >
33</p >
44
55<h1 align =" center " >webcode</h1 >
66
7- <p align =" center " >
8- <strong >为网页 AI 提供本地编码能力。</strong >
9- </p >
7+ <p align =" center " ><strong >让网页 AI 在你的本地项目中工作。</strong ></p >
108
119<p align =" center " >
12- 通过 VS Code 插件与浏览器插件,打破网页 AI 与本地项目之间的边界,使 ChatGPT、Gemini、DeepSeek 等网页 AI 连接到本地 VS Code,获得读写文件、运行命令的能力,还支持 MCP 和 Skills。
10+ 通过 VS Code 扩展与浏览器 bridge,将网页 AI 连接到本地工作区,使用文件、搜索、命令、 MCP 与 Skills。
1311</p >
1412
1513<p align =" center " >
16- 中文 | <a href =" README_en.md " >English</a >
14+ <a href =" README_en.md " >English</a > ·
15+ <a href =" #快速开始 " >快速开始</a > ·
16+ <a href =" doc/README.md " >文档</a > ·
17+ <a href =" CONTRIBUTING.md " >参与贡献</a >
1718</p >
1819
1920<p align =" center " >
2223 </a >
2324 <img alt =" browser bridge version " src =" https://img.shields.io/github/package-json/v/three-water666/webcode?filename=bridge-browser%2Fpackage.json&label=bridge&color=f97316 " >
2425 <a href =" LICENSE " >
25- <img alt="license MIT" src="https://img.shields.io/badge/license-MIT-16a34a">
26+ <img alt="MIT license " src="https://img.shields.io/badge/license-MIT-16a34a">
2627 </a >
2728</p >
2829
29- ---
30-
3130<p align =" center " >
32- <img src =" doc/assets/webcode-usage-screenshot.png " width =" 960 " alt =" webcode 使用截图 " >
31+ <img src =" doc/assets/webcode-usage-screenshot.png " width =" 960 " alt =" webcode 使用界面 " >
3332</p >
3433
3534## 项目能力
3635
37- - 在网页 AI 对话中调用本地文件、搜索和命令工具,并在需要时请求用户审批。
38- - 通过 VS Code 扩展和浏览器 bridge 建立本地 Gateway 连接。
39- - 接入第三方 MCP server,并向网页 AI 提供工作区 Skills。
40- - 支持多个内置 AI 站点,也可通过 VS Code 设置添加或覆盖站点。
36+ - ** 本地编码工具** :在网页 AI 对话中读取和编辑文件、搜索代码、运行命令;需要时由用户审批。
37+ - ** 浏览器桥接** :从 VS Code 启动本地 Gateway,并连接支持的网页 AI。
38+ - ** 可扩展能力** :使用 MCP 接入第三方服务,将工作区 Skills 和项目规则提供给 AI。
4139
42- ## 文档导航
40+ ## 快速开始
4341
44- | 主题 | 文档 |
45- | ------ | ------ |
46- | 构建、开发和功能指南 | [ 文档目录] ( doc/README.md ) |
47- | 浏览器模式 | [ 浏览器模式指南] ( doc/BROWSER_MODE_GUIDE.md ) |
48- | 内置工具 | [ 内置工具说明] ( doc/BUILTIN_TOOLS.md ) |
49- | MCP 配置 | [ MCP 服务配置指南] ( doc/MCP_GUIDE.md ) |
50- | 站点扩展 | [ 站点支持指南] ( doc/PLATFORM_GUIDE.md ) |
51- | 常见问题 | [ FAQ] ( doc/FAQ_GUIDE.md ) |
52- | 开发与贡献 | [ 贡献指南] ( CONTRIBUTING.md ) |
42+ 1 . 在 VS Code 扩展商店搜索并安装 ` webcode gateway ` 。
43+ 2 . 在 VS Code 打开项目文件夹,点击状态栏中的 ` webcode: 关闭 ` ,选择“启动 webcode”。
44+ 3 . 从启动菜单选择目标 AI 站点。默认使用 [ Edge 独立保活模式] ( doc/BROWSER_MODE_GUIDE.md ) ,首次需要在独立浏览器 profile 中登录。
45+ 4 . 在新对话中输入任务,并在末尾添加 ` /webcode ` 或 ` @webcode ` ;确认初始化上下文后,由你手动发送。
5346
54- 语言版本: [ English ] ( README_en.md ) 。
47+ 当 bridge 显示 ` ON ` 时连接就绪。如果初始化上下文超出网页输入限制,webcode 会将完整内容作为 TXT 附件添加 。
5548
5649## 使用示例
5750
58- ### DeepSeek 网页版:鹈鹕测试
59-
60- 下面是本次录屏演示中通过 webcode 连接 DeepSeek 网页版生成的 SVG,任务是绘制一只骑自行车的鹈鹕,也称为“鹈鹕测试”。
61-
62- 提示词:
63-
64- > Generate an SVG of a pelican riding a bicycle.
65-
66- ** 操作演示(1.5 倍速)**
67-
68- https://github.com/user-attachments/assets/448873b4-922a-4cac-b421-70a189394576
69-
70- ** 生成结果**
71-
72- <p align =" center " >
73- <img src =" doc/assets/pelican-bicycle-deepseek.svg " width =" 560 " alt =" 通过 webcode 和 DeepSeek 网页版生成的 SVG:一只骑自行车的鹈鹕 " >
74- </p >
75-
76- [ 查看 SVG 源文件] ( doc/assets/pelican-bicycle-deepseek.svg )
77-
78- ## 安装与快速开始
79-
80- ### 1. 安装 VS Code 扩展
81-
82- 1 . 打开 VS Code 扩展商店。
83- 2 . 搜索 ` webcode gateway ` 。
84- 3 . 安装扩展。
85-
86- ### 2. 启动 Gateway
87-
88- 1 . 在 VS Code 中打开一个具体文件夹或工作区。
89- 2 . 点击 VS Code 右下角状态栏里的 ` webcode: 关闭 ` 。
90-
91- ![ VS Code 状态栏中的 webcode 关闭按钮] ( doc/assets/webcode-status-bar-off.png )
92-
93- 3 . 在弹出的菜单里点击 ` 启动 webcode ` 。
94- 4 . 等待状态栏文字变成 ` webcode: <端口> ` 。
95-
96- 当状态栏显示端口号时,说明本地 Gateway 已经启动。
97-
98- ### 3. 打开目标网页 AI
99-
100- 1 . 在启动菜单里选择目标站点,例如 ` Open ChatGPT ` 或其他支持的入口。
101- 2 . webcode 默认会用 [ ` Edge 独立保活模式 ` ] ( doc/BROWSER_MODE_GUIDE.md ) 打开 Microsoft Edge。
102- 3 . 独立 Edge profile 会自动加载内置的 webcode bridge。
103- 4 . 桥接页会自动与本地 Gateway 完成握手。
104- 5 . 握手成功后,浏览器会自动跳转到对应的 AI 站点。
105-
106- 首次使用时,需要在这个独立 Edge profile 中登录一次目标 AI 站点。当 bridge 显示 ` ON ` 时,表示连接已经可以使用。
107-
108- ### 4. 在对话中使用
109-
110- 1 . 打开目标 AI 站点中的新对话。
111- 2 . 先输入你的实际需求,再在同一条消息末尾添加 ` /webcode ` 或 ` @webcode ` ,或者直接回车。
112- 3 . 当 webcode 询问是否添加初始化上下文时,点击 ` 添加 ` 或按 Enter。
113- 4 . webcode 会把触发词替换为完整初始化上下文。确认消息内容后,由你手动发送。
114-
115- 如果初始化上下文超过当前 AI 站点的输入框限制,webcode 会优先把完整上下文作为 txt 附件添加到消息中,并在输入框里保留一段简短说明。
116-
117- 例如:
51+ 通过 DeepSeek 网页版完成“鹈鹕测试”:生成一只骑自行车的鹈鹕 SVG。
11852
119- - ` 读取 src/utils.ts,然后为它补一个单元测试。 /webcode `
120- - ` 列出当前工作区的文件结构。 @webcode `
121- - ` 把项目文档生成到 docs 目录里。 /webcode `
53+ - [ 观看操作演示(1.5 倍速)] ( https://github.com/user-attachments/assets/448873b4-922a-4cac-b421-70a189394576 )
54+ - [ 查看生成的 SVG] ( doc/assets/pelican-bicycle-deepseek.svg )
12255
123- ## 内置工具
56+ ## 能力与配置
12457
125- webcode 内置 ` read_file ` 、` attach_file ` 、` write_file ` 、` edit_file ` 、` search_files ` 、` search_code ` 、` execute_command ` 、` run_in_terminal ` 、` terminal_session ` 等本地工具,用于文本读取、TXT/图片/PDF 附件投递、文件写入、代码搜索、命令执行和终端会话管理。
126-
127- 具体工具清单见 [ 内置工具说明] ( doc/BUILTIN_TOOLS.md ) 。
128-
129- ## MCP
130-
131- 需要接入浏览器自动化、GitHub、数据库或其他外部能力时,可以通过 ` webcodeGateway.servers ` 配置第三方 MCP server。
132-
133- 具体配置方式见 [ MCP 服务配置指南] ( doc/MCP_GUIDE.md ) 。
134-
135- ## Skills
136-
137- webcode 可以把当前 VS Code 工作区中的本地 Skills 暴露给网页 AI,让模型按需读取项目工作流、模板、领域说明或脚本资源。
138-
139- 具体使用方式见 [ Skills 使用指南] ( doc/SKILLS_GUIDE.md ) 。
140-
141- ## 项目规则
142-
143- 初始化时,webcode 会从 VS Code 当前打开的主工作区根目录读取项目规则文件,并随初始化结果发送给网页 AI:
144-
145- - ` USER_RULES.md `
146- - ` AGENTS.md ` 或 ` CLAUDE.md `
147-
148- 如果 ` AGENTS.md ` 和 ` CLAUDE.md ` 同时存在,只发送 ` AGENTS.md ` 。浏览器扩展不再提供单独的个性化指令设置页。
149-
150- ## 配置
151-
152- VS Code 设置使用 ` webcodeGateway.* ` 命名空间。站点配置见[ 站点支持指南] ( doc/PLATFORM_GUIDE.md ) ,MCP server 配置见[ MCP 指南] ( doc/MCP_GUIDE.md ) ,浏览器选择见[ 浏览器模式指南] ( doc/BROWSER_MODE_GUIDE.md ) 。
153-
154- ## 目前已内置支持的 AI 平台及其他平台支持
155-
156- webcode 目前已内置支持以下 AI 平台:
157-
158- - ChatGPT
159- - Gemini
160- - Google AI Studio
161- - DeepSeek
162- - GLM
163- - Claude
164- - Qwen
165-
166- 如需支持其他平台,可以通过 VS Code 配置快速接入新的站点。稳定平台可以加入内置站点列表,实验或私有站点通常只需要配置 ` webcodeGateway.aiSites ` 。
167-
168- 具体步骤见 [ 站点支持扩展指南] ( doc/PLATFORM_GUIDE.md ) 。
169-
170- ## 从源码构建
171-
172- 源码下载、依赖安装、打包脚本、产物说明和本地安装方式见 [ 构建指南] ( doc/BUILD_GUIDE.md ) 。
173-
174- ## 常见问题
175-
176- 首次启动环境、触发词无反应、工具调用执行后页面没有变化、查看历史工具调用等问题见 [ 常见问题] ( doc/FAQ_GUIDE.md ) 。
58+ | 能力 | 说明 |
59+ | ------ | ------ |
60+ | 内置工具 | 文件读写、附件、代码搜索、命令和终端会话,见[ 内置工具说明] ( doc/BUILTIN_TOOLS.md ) 。 |
61+ | MCP | 通过 ` webcodeGateway.servers ` 配置第三方服务,见[ MCP 指南] ( doc/MCP_GUIDE.md ) 。 |
62+ | Skills | 暴露工作区 Skills;扩展也提供开发类内置 Skills,见[ Skills 指南] ( doc/SKILLS_GUIDE.md ) 。 |
63+ | AI 平台 | 内置支持 ChatGPT、Gemini、Google AI Studio、DeepSeek、GLM、Claude 和 Qwen;可配置其他站点,见[ 站点指南] ( doc/PLATFORM_GUIDE.md ) 。 |
64+ | 项目规则 | 初始化时读取根目录 ` USER_RULES.md ` 及 ` AGENTS.md ` 或 ` CLAUDE.md ` ;二者并存时优先 ` AGENTS.md ` 。 |
17765
178- ## 项目结构
66+ ## 文档
17967
180- - ` gateway-vscode/ ` :VS Code 扩展、Gateway、MCP 和本地工具。
181- - ` bridge-browser/ ` :浏览器扩展及页面桥接逻辑。
182- - ` shared/ ` :跨包共享类型和逻辑。
183- - ` evals/ ` :单元评测、端到端场景和 QA 脚本。
184- - ` doc/ ` :使用、构建和开发指南。
68+ - [ 文档目录] ( doc/README.md ) :构建、浏览器模式、MCP、Skills、站点接入和工具说明。
69+ - [ 构建指南] ( doc/BUILD_GUIDE.md ) :源码构建、打包和本地安装。
70+ - [ 常见问题] ( doc/FAQ_GUIDE.md ) :首次启动、触发词和工具结果回填。
71+ - [ 贡献指南] ( CONTRIBUTING.md ) · [ 安全策略] ( SECURITY.md ) · [ 变更记录] ( CHANGELOG.md )
18572
18673## 开发与测试
18774
188- 需要 Node.js 22 和 pnpm 10.25.0。克隆仓库后,在根目录运行 :
75+ 需要 Node.js 22 和 pnpm 10.25.0。在仓库根目录运行 :
18976
19077``` bash
19178pnpm install
@@ -196,16 +83,21 @@ pnpm test:extension
19683pnpm lint
19784```
19885
199- 各命令的范围及浏览器端到端测试说明见[ 构建指南] ( doc/BUILD_GUIDE.md ) 和[ 文档目录] ( doc/README.md ) 。
200-
201- ## 参与贡献
86+ ## 项目结构
20287
203- 欢迎提交 Issue 和 Pull Request。提交前请阅读[ 贡献指南] ( CONTRIBUTING.md ) ;安全问题请参阅[ 安全策略] ( SECURITY.md ) 。行为准则目前仍待维护者确认,见[ 行为准则草案] ( CODE_OF_CONDUCT.md ) 。
88+ | 目录 | 内容 |
89+ | ------ | ------ |
90+ | ` gateway-vscode/ ` | VS Code 扩展、Gateway、MCP 与本地工具 |
91+ | ` bridge-browser/ ` | 浏览器扩展与网页桥接 |
92+ | ` shared/ ` | 跨包共享类型和逻辑 |
93+ | ` evals/ ` | 端到端场景、Agent 评测和 QA |
94+ | ` doc/ ` | 用户、构建和开发文档 |
20495
205- ## 致谢
96+ ## 参与贡献
20697
207- 感谢 [ LINUX DO] ( https://linux.do/ ) 社区提供技术交流与开源分享的平台。
98+ 欢迎提交 Issue 和 Pull Request。提交前请阅读[ 贡献指南] ( CONTRIBUTING.md ) 。
99+ 安全问题请参阅[ 安全策略] ( SECURITY.md ) ;[ 行为准则] ( CODE_OF_CONDUCT.md ) 目前为待维护者确认的草案。
208100
209101## 许可证
210102
211- 本仓库采用 MIT License,详见 [ LICENSE ] ( LICENSE ) 。
103+ 本仓库采用 [ MIT License] ( LICENSE ) 。感谢 [ LINUX DO ] ( https://linux.do/ ) 社区提供技术交流与开源分享的平台 。
0 commit comments