opencode-studio
installs/mo · npmstarsforks
How to install opencode-studio?
microck/opencode-studio
$git clone https://github.com/Microck/opencode-studio---
README.md
| 1 | <p align="center"> |
| 2 | <a href="https://github.com/Microck/opencode-studio"> |
| 3 | <img src="client-next/public/logo-dark.png" alt="logo" width="100"> |
| 4 | </a> |
| 5 | </p> |
| 6 | |
| 7 | <p align="center"> |
| 8 | <strong>English</strong> | <a href="README_CN.md"><strong>简体中文</strong></a> |
| 9 | </p> |
| 10 | |
| 11 | <p align="center">a local gui for managing opencode configurations. toggle mcp servers, edit skills, manage plugins, handle auth - no json editing required.</p> |
| 12 | |
| 13 | <p align="center"> |
| 14 | <a href="https://www.npmjs.com/package/opencode-studio-server"><img src="https://img.shields.io/npm/dt/opencode-studio-server?style=flat-square&label=downloads&color=000000" alt="downloads"></a> |
| 15 | <a href="LICENSE"><img src="https://img.shields.io/badge/license-mit-000000?style=flat-square" alt="license"></a> |
| 16 | </p> |
| 17 | |
| 18 | <p align="center"> |
| 19 | <img src="https://github.com/user-attachments/assets/487bba2b-a9ea-455b-a2ac-ccc5c3b95af7" alt="preview" width="1000"> |
| 20 | </p> |
| 21 | |
| 22 | --- |
| 23 | |
| 24 | ### quickstart |
| 25 | |
| 26 | #### option 1: public site + local backend (recommended) |
| 27 | |
| 28 | ```bash |
| 29 | npm install -g opencode-studio-server |
| 30 | ``` |
| 31 | |
| 32 | visit [opencode.micr.dev](https://opencode.micr.dev) and click "Launch Backend" in the sidebar. |
| 33 | |
| 34 | #### option 2: fully local |
| 35 | |
| 36 | **windows** |
| 37 | ```batch |
| 38 | quickstart.bat |
| 39 | ``` |
| 40 | |
| 41 | **macos / linux** |
| 42 | ```bash |
| 43 | chmod +x quickstart.sh && ./quickstart.sh |
| 44 | ``` |
| 45 | |
| 46 | open http://localhost:1080 |
| 47 | |
| 48 | --- |
| 49 | |
| 50 | ### features |
| 51 | |
| 52 | - **mcp manager**: toggle servers on/off, add new ones by pasting npx commands, delete unused configs |
| 53 | - **profiles**: isolated environments with separate configs, history, and sessions. switch instantly. |
| 54 | - **skill editor**: browse/edit skills, create from templates, import from url, bulk import multiple urls |
| 55 | - **plugin hub**: manage js/ts plugins, multiple templates (hooks, watchers, lifecycle), bulk import |
| 56 | - **commands**: browse and manage custom slash commands |
| 57 | - **agents**: manage custom agents with mode, model, tools, permissions (supports OMO format) |
| 58 | - **usage dashboard**: token costs, model breakdown, project stats from local message logs |
| 59 | - **auth**: login/logout per provider, save and switch between credential profiles |
| 60 | - **github sync**: push/pull config to a private github repo via `gh` cli |
| 61 | - **backup/restore**: export/import complete config including skills and plugins |
| 62 | - **settings**: general config, system prompt editor, oh my opencode model preferences |
| 63 | - **i18n**: internationalization support with Chinese (zh-CN) translation |
| 64 | |
| 65 | --- |
| 66 | |
| 67 | ### i18n (Internationalization) |
| 68 | |
| 69 | OpenCode Studio supports multiple languages: |
| 70 | |
| 71 | - **English** (default) |
| 72 | - **Chinese (zh-CN)** - 完整中文翻译 |
| 73 | |
| 74 | Language can be switched via the language switcher in the sidebar. Selection is saved in cookies and persists across sessions. |
| 75 | |
| 76 | To add a new language: |
| 77 | 1. Create `client-next/messages/{locale}.json` (e.g., `ja.json` for Japanese) |
| 78 | 2. Copy structure from `en.json` and translate all keys |
| 79 | 3. Add locale to `client-next/src/i18n/request.ts` |
| 80 | |
| 81 | --- |
| 82 | |
| 83 | ### how it works |
| 84 | |
| 85 | ```mermaid |
| 86 | flowchart LR |
| 87 | A[Browser] -->|HTTP| B(Express API :1920+) |
| 88 | B -->|Read/Write| C[~/.config/opencode/] |
| 89 | C --> D[opencode.json] |
| 90 | C --> E[skill/] |
| 91 | C --> F[plugin/] |
| 92 | ``` |
| 93 | |
| 94 | 1. **detect**: server finds your opencode config directory automatically |
| 95 | 2. **read**: loads opencode.json, skills, plugins, auth |
| 96 | 3. **edit**: make changes through the ui |
| 97 | 4. **save**: writes back to disk instantly |
| 98 | |
| 99 | --- |
| 100 | |
| 101 | ### usage |
| 102 | |
| 103 | | route | actions | |
| 104 | |:---|:---| |
| 105 | | `/mcp` | toggle switches, add via npx command, search/filter | |
| 106 | | `/profiles` | create/switch isolated environments | |
| 107 | | `/skills` | create from template, bulk import, edit in monaco | |
| 108 | | `/plugins` | pick template, bulk import, click to edit | |
| 109 | | `/commands` | browse custom slash commands | |
| 110 | | `/agents` | manage agents with model, tools, permissions | |
| 111 | | `/usage` | token costs, model breakdown, project stats | |
| 112 | | `/auth` | login/logout, save/switch credential profiles | |
| 113 | | `/settings` | general, system prompt, github sync, oh my opencode models | |
| 114 | |
| 115 | --- |
| 116 | |
| 117 | ### bulk import |
| 118 | |
| 119 | paste multiple raw github urls (one per line): |
| 120 | |
| 121 | ``` |
| 122 | https://raw.githubusercontent.com/.../skills/brai |
People who liked this also viewed
6 picksType
- fastmcp🚀 The fast, Pythonic way to build MCP servers and clients.MCP ServersJul 2026
- playwright-mcpPlaywright MCP serverMCP ServersJul 2026
- ext-appsOfficial repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP serversMCP ServersJul 2026
- langchain-mcp-adaptersLangChain 🔌 MCPMCP ServersJul 2026
- mcporterCall MCPs via TypeScript, masquerading as simple TypeScript API. Or package them as cli.MCP ServersJul 2026
- mcp-proxyA bridge between Streamable HTTP and stdio MCP transportsMCP ServersJul 2026
