Skip to content

Commit ee53428

Browse files
committed
docs: polish bilingual README presentation
- Reorder the README flow around quick start, capabilities, and development. - Align Chinese and English sections and compact repeated guidance.
1 parent 452c02a commit ee53428

2 files changed

Lines changed: 94 additions & 311 deletions

File tree

‎README.md‎

Lines changed: 47 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
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">
@@ -22,170 +23,56 @@
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
19178
pnpm install
@@ -196,16 +83,21 @@ pnpm test:extension
19683
pnpm 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

Comments
 (0)