Opencode Studio

English | 简体中文

a local gui for managing opencode configurations. toggle mcp servers, edit skills, manage plugins, handle auth - no json editing required.

---

quickstart

option 1: public site + local backend (recommended)

npm install -g opencode-studio-server

visit opencode.micr.dev and click "Launch Backend" in the sidebar.

option 2: fully local

windows

quickstart.bat

macos / linux

chmod +x quickstart.sh && ./quickstart.sh

open http://localhost:1080

---

features

• mcp manager: toggle servers on/off, add new ones by pasting npx commands, delete unused configs
• profiles: isolated environments with separate configs, history, and sessions. switch instantly.
• skill editor: browse/edit skills, create from templates, import from url, bulk import multiple urls
• plugin hub: manage js/ts plugins, multiple templates (hooks, watchers, lifecycle), bulk import
• commands: browse and manage custom slash commands
• agents: manage custom agents with mode, model, tools, permissions (supports OMO format)
• usage dashboard: token costs, model breakdown, project stats from local message logs
• auth: login/logout per provider, save and switch between credential profiles
• github sync: push/pull config to a private github repo via gh cli
• backup/restore: export/import complete config including skills and plugins
• settings: general config, system prompt editor, oh my opencode model preferences
• i18n: internationalization support with Chinese (zh-CN) translation

---

i18n (Internationalization)

OpenCode Studio supports multiple languages:

• English (default)
• Chinese (zh-CN) - 完整中文翻译

Language can be switched via the language switcher in the sidebar. Selection is saved in cookies and persists across sessions.

To add a new language:

1. Create client-next/messages/{locale}.json (e.g., ja.json for Japanese)
2. Copy structure from en.json and translate all keys
3. Add locale to client-next/src/i18n/request.ts

---

how it works

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. detect: server finds your opencode config directory automatically
2. read: loads opencode.json, skills, plugins, auth
3. edit: make changes through the ui
4. save: writes back to disk instantly

---

usage

route	actions
/mcp	toggle switches, add via npx command, search/filter
/profiles	create/switch isolated environments
/skills	create from template, bulk import, edit in monaco
/plugins	pick template, bulk import, click to edit
/commands	browse custom slash commands
/agents	manage agents with model, tools, permissions
/usage	token costs, model breakdown, project stats
/auth	login/logout, save/switch credential profiles
/settings	general, system prompt, github sync, oh my opencode models

---

bulk import

paste multiple raw github urls (one per line):

https://raw.githubusercontent.com/.../skills/brainstorming/SKILL.md
https://raw.githubusercontent.com/.../skills/debugging/SKILL.md
https://raw.githubusercontent.com/.../skills/tdd/SKILL.md