OpenCode: OpenCode Web使用
最后更新：2026-08-31
OpenCode 提供了 Web UI，让你通过浏览器与 AI 协作开发。
1. 你将学到
- Web UI 启动方式
- 界面功能介绍
- 与 TUI 的区别
- 使用场景
2. 启动 Web UI
BASH
opencode web
可选参数：
| 参数 | 说明 |
|---|---|
--port |
监听端口（默认 4096） |
--hostname |
监听地址 |
--cors |
允许跨域 |
启动后，浏览器会自动打开，或手动访问 http://localhost:4096。
3. 界面功能
(1) 对话区域
与 TUI 类似的对话界面，支持自然语言输入。
(2) 文件浏览器
左侧文件树，可以：
- 浏览项目文件
- 点击文件查看内容
- AI 修改后实时更新
(3) 代码预览
- 修改的代码以 diff 形式展示
- 支持语法高亮
- 可以逐个接受或拒绝修改
(4) 工具执行
显示 AI 执行的工具调用详情：
- 文件读写操作
- Shell 命令执行
- 搜索结果
4. Web UI vs TUI
| 特性 | Web UI | TUI |
|---|---|---|
| 界面 | 浏览器图形界面 | 终端字符界面 |
| 文件浏览 | 文件树 | @ 引用 |
| 代码预览 | Diff 视图 | 终端显示 |
| 移动访问 | 支持 | 不支持 |
| 远程协作 | 支持 | 不支持 |
| 资源占用 | 较高 | 较低 |
5. 使用场景
(1) 远程开发
在服务器上启动 opencode web，本地浏览器访问，实现远程 AI 协作。
(2) 团队协作
配置 --hostname 0.0.0.0，团队成员可通过局域网访问同一个 OpenCode 实例。
(3) 移动办公
在手机或平板浏览器上访问 OpenCode，随时随地进行开发协作。
6. 局域网配置
BASH
opencode web --hostname 0.0.0.0 --port 4096
其他设备访问 http://<服务器IP>:4096。
安全提示： 局域网暴露时建议设置密码：
BASHexport OPENCODE_SERVER_PASSWORD=your_password opencode web --hostname 0.0.0.0
❓ 常见问题
Q Web UI 支持 HTTPS 吗？
A OpenCode 内置 HTTP 服务。如需 HTTPS，建议在前端配置 Nginx 反向代理并添加 SSL 证书。
Q 多人同时使用同一个 Web UI 会话会冲突吗？
A 会。当前 Web UI 是单会话模式，多人同时操作会互相影响。多人协作建议各自启动独立的 OpenCode 实例。
Q Alice 在办公室用 Web UI，Bob 在家用 TUI，能协作吗？
A 可以。两人操作同一个项目（通过 Git 管理），但使用不同的 OpenCode 界面。代码变更通过 Git 同步。
📖 小节
opencode web启动浏览器界面- 支持文件浏览、代码预览、工具执行
- 适合远程开发和团队协作场景
- 局域网使用时注意安全配置
📝 作业
-
基础题：启动 OpenCode Web UI，在浏览器中完成一次对话。
-
进阶题：配置 Web UI 允许局域网访问，并从另一台设备连接。
-
挑战题：同时使用 Web UI 和 TUI 操作同一个项目，对比两者的使用体验。
