Microck/opencode-studio

English | 简体中文

一个用于管理 opencode 配置的本地 GUI。切换 MCP 服务器、编辑技能、管理插件、处理认证——无需手动编辑 JSON。

### 快速开始 #### 选项 1：公共站点 + 本地后端（推荐） ``` npm install -g opencode-studio-server ``` 访问 [opencode.micr.dev](https://opencode.micr.dev) 并点击侧边栏中的“Launch Backend”。 #### 选项 2：完全本地 **Windows** ``` quickstart.bat ``` **macOS / Linux** ``` chmod +x quickstart.sh && ./quickstart.sh ``` 打开 http://localhost:1080 ### 功能 - **MCP 管理器**：开启/关闭服务器，通过粘贴 npx 命令添加新服务器，删除未使用的配置 - **配置文件**：具有独立配置、历史记录和会话的隔离环境。即时切换。 - **技能编辑器**：浏览/编辑技能，从模板创建，从 URL 导入，批量导入多个 URL - **插件中心**：管理 JS/TS 插件，多种模板（hooks、watchers、lifecycle），批量导入 - **命令**：浏览并管理自定义斜杠命令 - **代理**：管理具有模式、模型、工具、权限的自定义代理（支持 OMO 格式） - **用量仪表板**：来自本地消息日志的 token 成本、模型明细、项目统计 - **认证**：按提供商登录/登出，保存并在凭证配置文件之间切换 - **GitHub 同步**：通过 `gh` CLI 将配置推送/拉取到私有 GitHub 仓库 - **备份/恢复**：导出/导入包含技能和插件的完整配置 - **设置**：常规配置、系统提示词编辑器、oh my opencode 模型偏好设置 - **i18n**：支持简体中文（zh-CN）翻译的国际化支持 ### i18n (国际化) OpenCode Studio 支持多种语言： - **English**（默认） - **Chinese (zh-CN)** - 完整中文翻译 可以通过侧边栏的语言切换器切换语言。选择会保存在 cookies 中，并在不同会话之间保持不变。 要添加新语言： 1. 创建 `client-next/messages/{locale}.json`（例如，日语为 `ja.json`） 2. 从 `en.json` 复制结构并翻译所有键 3. 将 locale 添加到 `client-next/src/i18n/request.ts` ### 工作原理 ``` flowchart LR A[Browser] -->|HTTP| B(Express API :1920+) B -->|Read/Write| C[~/.config/opencode/] C --> D[opencode.json] C --> E[skill/] C --> F[plugin/] ``` 1. **检测**：服务器自动查找您的 opencode 配置目录 2. **读取**：加载 opencode.json、技能、插件、认证信息 3. **编辑**：通过 UI 进行更改 4. **保存**：即时写回磁盘 ### 使用方法 | 路由 | 操作 | |:---|:---| | `/mcp` | 开关切换，通过 npx 命令添加，搜索/过滤 | | `/profiles` | 创建/切换隔离环境 | | `/skills` | 从模板创建，批量导入，在 monaco 中编辑 | | `/plugins` | 选择模板，批量导入，点击编辑 | | `/commands` | 浏览自定义斜杠命令 | | `/agents` | 管理具有模型、工具、权限的代理 | | `/usage` | token 成本，模型明细，项目统计 | | `/auth` | 登录/登出，保存/切换凭证配置文件 | | `/settings` | 常规设置，系统提示词，GitHub 同步，oh my opencode 模型 | ### 批量导入 粘贴多个原始 GitHub URL（每行一个）： ``` https://raw.githubusercontent.com/.../skills/brainstorming/SKILL.md https://raw.githubusercontent.com/.../skills/debugging/SKILL.md https://raw.githubusercontent.com/.../skills/tdd/SKILL.md ``` 点击 fetch → 带有复选框的预览 → 已有项目被取消勾选 → 导入所选内容 ### 深度链接 opencode studio 支持深度链接，可从外部站点一键安装。 | 协议 | 描述 | |:---|:---| | `opencodestudio://launch` | 仅启动后端 | | `opencodestudio://launch?open=local` | 启动后端 + 打开 localhost:1080+ | | `opencodestudio://install-mcp?name=NAME&cmd=COMMAND` | 安装 MCP 服务器 | | `opencodestudio://import-skill?url=URL` | 从 URL 导入技能 | | `opencodestudio://import-plugin?url=URL` | 从 URL 导入插件 | #### 示例 **添加 MCP 服务器按钮（用于文档/仓库）：** ``` ``` **导入技能按钮：** ``` Import Skill ``` **带环境变量：** ``` opencodestudio://install-mcp?name=api-server&cmd=npx%20-y%20my-mcp&env=%7B%22API_KEY%22%3A%22%22%7D ``` #### URL 编码 参数必须经过 URL 编码： - 空格 → `%20` - `/` → `%2F` - `:` → `%3A` - `{` → `%7B` - `}` → `%7D` #### 安全性 点击深度链接时，用户会看到一个确认对话框，显示命令或 URL 以及关于信任来源的警告。 ### 项目结构 ``` opencode-studio/ ├── client-next/ # next.js 16 frontend │ ├── src/app/ # pages (mcp, profiles, skills, plugins, auth, settings, usage) │ ├── src/components/ # ui components │ ├── src/i18n/ # internationalization config │ ├── messages/ # translation files (en.json, zh-CN.json) │ └── public/ # static assets ├── server/ │ └── index.js # express api ├── quickstart.bat ├── quickstart.sh └── package.json # runs both with concurrently ``` 配置位置： - opencode 配置: `~/.config/opencode/` - studio 数据: `~/.config/opencode-studio/` - 配置文件: `~/.config/opencode-profiles/` ### 故障排除 | 问题 | 解决方案 | |:---|:---| | “opencode not found” | 确保 `~/.config/opencode/opencode.json` 存在 | | 端口冲突 | 两个服务都会自动检测可用端口（后端 1920+，前端 1080+） | | 技能未显示 | 检查 `~/.config/opencode/skill/` 下是否有 SKILL.md 文件 | | 批量导入失败 | 确保 URL 是原始的 GitHub 链接 | | “Launch Backend”无效 | 先运行 `npm install -g opencode-studio-server` | | 协议处理程序未注册 | 以管理员身份运行 `opencode-studio-server --register` | | GitHub 同步无效 | 先运行 `gh auth login` | | 代理未显示 (OMO) | 确保包含 `agents` 字段的 `oh-my-openagent.json` 存在 | ### 许可证 MIT

标签：GUI客户端, JSON可视化编辑, MCP服务器, MITM代理, Next.js 16, NPM包, OpenCode Studio, OSV-Scalibr, SOC Prime, Web GUI, 代码编辑器辅助, 安全配置, 开发工具, 开源, 插件管理, 暗色界面, 本地服务器, 本地配置管理, 权限认证, 自动化攻击, 配置文件管理