Sooua
登录
返回文章列表
OpenCode··8 分钟阅读

Web 界面与 IDE

OpenCode 提供三种界面形态，适应不同场景：TUI（终端）、Web（浏览器）、IDE 插件。理解各自特点，能帮助你在正确场景选择最高效的工具。

#OpenCode#AI 编程#终端 Agent

目标：了解 OpenCode 的多种使用界面

概述

OpenCode 提供三种界面形态，适应不同场景：TUI（终端）、Web（浏览器）、IDE 插件。理解各自特点，能帮助你在正确场景选择最高效的工具。

三种界面架构对比图

特性对比矩阵

特性TUIWebIDE 插件
启动速度⚡ 最快🐢 较慢（需启动服务器）⚡ 快
资源占用最低中等中等
交互方式纯键盘鼠标 + 键盘鼠标 + 键盘
远程访问❌ SSH tunnel✅ 直接访问❌ 需配合远程开发
代码 Diff文本对比图形化 Diff原生 Diff 视图
文件编辑命令式点击编辑直接编辑
团队协作❌ 单人✅ 支持❌ 单人
演示分享❌ 不便✅ 屏幕共享即可❌ 不便
自定义主题有限丰富继承 IDE 主题
适用场景日常编码协作/远程/演示深度开发

TUI（终端界面）

默认界面，已在前面教程详细介绍。

opencode

特点：

  • 键盘驱动，效率最高
  • 占用资源最少
  • 适合长时间编码
  • 与 tmux、zsh 等工具链无缝配合

TUI 常用快捷键

快捷键功能
Ctrl + N新建会话
Ctrl + /查看命令列表
/进入命令模式
Esc取消/返回
Tab自动补全

真实场景案例 ①：服务器运维

运维工程师通过 SSH 连接到远程服务器，直接在终端运行 opencode，让 AI 分析日志、排查故障。无需图形界面，在纯终端环境中完成所有操作。

Web 界面

通过浏览器访问 OpenCode。

启动

# 默认启动
opencode web
 
# 指定端口
opencode web --port 8080
 
# 后台运行
opencode web --detach

Web 服务器配置

在 opencode.json 中配置：

{
  "server": {
    "port": 4096,
    "host": "0.0.0.0",        // 允许远程访问
    "cors": true,             // 启用 CORS
    "auth": {                 // 基础认证（可选）
      "type": "basic",
      "username": "${WEB_USER}",
      "password": "${WEB_PASS}"
    }
  }
}

Nginx 反向代理配置

# /etc/nginx/sites-available/opencode
server {
    listen 80;
    server_name opencode.yourdomain.com;
 
    location / {
        proxy_pass http://localhost:4096;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_cache_bypass $http_upgrade;
    }
}

启用配置：

sudo ln -s /etc/nginx/sites-available/opencode /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

HTTPS 配置（Let's Encrypt）

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d opencode.yourdomain.com

访问

http://localhost:4096

Web 界面特点

  • 图形界面，更直观
  • 支持鼠标操作
  • 适合演示和协作
  • 可远程访问

Docker 部署 Web 界面

# Dockerfile
FROM node:20-alpine
 
RUN npm install -g opencode
 
EXPOSE 4096
 
CMD ["opencode", "web", "--port", "4096", "--host", "0.0.0.0"]
# docker-compose.yml
version: '3.8'
services:
  opencode:
    build: .
    ports:
      - "4096:4096"
    environment:
      - OPENAI_API_KEY=${OPENAI_API_KEY}
      - OPENCODE_CONFIG=/config/opencode.json
    volumes:
      - ./config:/config
      - ./projects:/projects
    restart: unless-stopped

真实场景案例 ②：团队共享开发环境

某团队在内部服务器部署 OpenCode Web 界面，通过 Nginx + 公司 SSO 认证。设计师、产品经理等非技术人员也能通过浏览器使用 AI 辅助，查询文档、生成 SQL、分析数据，无需安装任何软件。

IDE 扩展

VS Code 插件安装步骤

方式一：官方市场（推荐）

  1. 打开 VS Code
  2. 点击左侧扩展图标（或按 Ctrl+Shift+X）
  3. 搜索 "OpenCode"
  4. 点击 安装
  5. 安装完成后，点击左侧 OpenCode 图标
  6. 按提示配置 API 密钥或登录

方式二：手动安装（开发版）

# 克隆插件仓库
git clone https://github.com/opencode-ai/vscode-opencode.git
cd vscode-opencode
 
# 安装依赖
npm install
 
# 打包
npx vsce package
 
# 在 VS Code 中安装 .vsix 文件
# Ctrl+Shift+P -> Extensions: Install from VSIX

VS Code 配置

// .vscode/settings.json
{
  "opencode.model": "anthropic/claude-sonnet-4-5",
  "opencode.autoComplete": true,
  "opencode.inlineEdit": true,
  "opencode.diffView": true
}

VS Code 常用功能

功能命令面板快捷键
打开侧边栏OpenCode: Open PanelCtrl+Shift+A
内联编辑OpenCode: Inline EditCtrl+K Ctrl+I
解释代码OpenCode: Explain-
生成注释OpenCode: Generate Docs-
审查文件OpenCode: Review File-

JetBrains 插件

目前 JetBrains 插件处于开发阶段。临时方案：

  1. 使用 File Watcher 配合 OpenCode CLI
  2. 通过 External Tools 配置快捷命令
# 配置为 External Tool
opencode edit --file $FilePath$ --prompt "$SelectedText$"

Vim / Neovim

Neovim 用户可通过以下方式集成：

-- lazy.nvim 配置
{
  'opencode-ai/opencode.nvim',
  dependencies = { 'nvim-lua/plenary.nvim' },
  config = function()
    require('opencode').setup({
      model = 'anthropic/claude-sonnet-4-5'
    })
  end
}

真实场景案例 ③：IDE 内联编辑提效

前端开发者在使用 VS Code 插件时，选中一段冗长的 JSX 组件，按 Ctrl+K Ctrl+I 呼出 OpenCode 内联编辑，输入"提取为独立组件并添加 Props 类型"，AI 直接在编辑器中生成新组件文件并替换原代码，无需切换窗口。

远程开发场景

场景一：SSH 远程服务器 + TUI

# 本地
ssh user@remote-server
 
# 远程服务器上
opencode

适合：服务器运维、远程容器调试

场景二：Web 界面远程访问

# 远程服务器
opencode web --host 0.0.0.0 --port 4096
 
# 本地浏览器
open http://remote-server:4096

配合 SSH 隧道更安全：

ssh -L 4096:localhost:4096 user@remote-server
# 本地访问 http://localhost:4096

场景三：VS Code Remote SSH + 插件

  1. 安装 VS Code Remote - SSH 扩展
  2. 连接到远程服务器
  3. 在远程服务器上安装 OpenCode VS Code 插件
  4. 像在本地一样使用

场景四：Docker 开发容器

// .devcontainer/devcontainer.json
{
  "name": "OpenCode Dev",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },
  "postCreateCommand": "npm install -g opencode",
  "forwardPorts": [4096],
  "customizations": {
    "vscode": {
      "extensions": ["opencode-ai.opencode"]
    }
  }
}

真实场景案例 ④：跨平台团队协作

某分布式团队中，Mac 用户用 VS Code 插件，Linux 用户用 TUI，Windows 用户用 Web 界面。所有成员通过 Git 共享 opencode.json 和规则，AI 输出风格一致，协作无障碍。

界面选择建议

场景推荐界面原因
日常编码TUI速度快、资源少、键盘驱动
代码审查IDE 插件原生 Diff、内联编辑
团队协作Web无需安装、远程访问
演示分享Web屏幕共享直观
远程服务器TUI / WebSSH 或浏览器即可
复杂重构IDE 插件符号跳转、全局搜索配合
快速查询TUI打开即聊
非技术人员使用Web零学习成本

FAQ

Q: Web 界面和 TUI 功能完全一致吗？

A: 核心功能一致，但部分高级功能（如某些快捷键）可能仅在 TUI 中可用。Web 界面更注重视觉体验和易用性。

Q: 可以同时运行 TUI 和 Web 吗？

A: 可以。它们共享同一份配置，但会话独立。注意 API 用量会分别计费。

Q: VS Code 插件支持哪些模型？

A: 支持与 OpenCode CLI 相同的所有模型，通过 opencode.model 设置切换。

Q: Web 界面如何设置密码保护？

A: 可通过 server.auth 配置基础认证，或在前端使用 Nginx/Traefik 等反向代理统一认证。

避坑清单 ⚠️

坑后果正确做法
Web 界面 host: 0.0.0.0 无认证任何人可访问你的 AI 会话添加认证或限制内网访问
在公共 WiFi 使用 Web 界面通信被窃听使用 HTTPS + VPN
VS Code 插件与 CLI 配置不同步行为不一致统一使用项目级 opencode.json
远程服务器暴露 OpenCode 端口安全隐患使用 SSH 隧道或 VPN
Web 界面长期后台运行浪费 API 用量不用时停止服务
IDE 插件版本与 CLI 不匹配功能异常保持两者同步更新

练习

  1. 尝试启动 Web 界面，对比与 TUI 的使用体验
  2. 安装 VS Code 插件，体验内联编辑功能
  3. 配置 Nginx 反向代理，为 Web 界面添加域名访问
  4. 在远程服务器上通过 SSH 隧道使用 OpenCode Web

下一篇：15. 代理技能

分享

评论

请 登录 后参与讨论。

加载中…

相关文章

OpenCode··6 分钟

故障排查指南

flowchart TD

#OpenCode#AI 编程#终端 Agent
OpenCode··3 分钟

企业部署与治理

flowchart TB

#OpenCode#AI 编程#终端 Agent
OpenCode··5 分钟

IDE 扩展开发

flowchart TB

#OpenCode#AI 编程#终端 Agent