{"data":{"slug":"microck-opencode-studio","name":"opencode-studio","tagline":"web GUI for securely managing local OpenCode configuration","github_url":"https://github.com/Microck/opencode-studio","owner":"Microck","repo":"opencode-studio","owner_avatar_url":"https://avatars.githubusercontent.com/u/45483921?v=4","primary_language":"TypeScript","stars":688,"forks":51,"topics":["cli-tools","configuration-manager","desktop-app","developer-tools","gui","mcp","model-context-protocol","nextjs","opencode","react"],"archived":false,"github_pushed_at":"2026-07-22T21:30:17+00:00","maintenance_label":"Very active","url":"https://www.graphcanon.com/tools/microck-opencode-studio","markdown_url":"https://www.graphcanon.com/tools/microck-opencode-studio.md","api_url":"https://www.graphcanon.com/api/graphcanon/tools/microck-opencode-studio","graph_url":"https://www.graphcanon.com/api/graphcanon/graph?tool=microck-opencode-studio","description":"web GUI for securely managing local OpenCode configuration","homepage_url":"https://opencode-studio.micr.dev","license":null,"open_issues":0,"watchers":4,"ai_summary":"Microck/opencode-studio offers a web-based graphical interface to manage OpenCode configuration locally in a secure fashion.","readme_excerpt":"
a local gui for managing opencode configurations. toggle mcp servers, edit skills, manage plugins, handle auth - no json editing required.
\n\n
\n \n \n
\n\n
\n \n
\n\n---\n\n### quickstart\n\n#### option 1: public site + local backend (recommended)\n\n```bash\nnpm install -g opencode-studio-server\n```\n\nvisit [opencode.micr.dev](https://opencode.micr.dev) and click \"Launch Backend\" in the sidebar.\n\n#### option 2: fully local\n\n**windows**\n```batch\nquickstart.bat\n```\n\n**macos / linux**\n```bash\nchmod +x quickstart.sh && ./quickstart.sh\n```\n\nopen http://localhost:1080\n\n---\n\n### features\n\n- **mcp manager**: toggle servers on/off, add new ones by pasting npx commands, delete unused configs\n- **profiles**: isolated environments with separate configs, history, and sessions. switch instantly.\n- **skill editor**: browse/edit skills, create from templates, import from url, bulk import multiple urls\n- **plugin hub**: manage js/ts plugins, multiple templates (hooks, watchers, lifecycle), bulk import\n- **commands**: browse and manage custom slash commands\n- **agents**: manage custom agents with mode, model, tools, permissions (supports OMO format)\n- **usage dashboard**: token costs, model breakdown, project stats from local message logs\n- **auth**: login/logout per provider, save and switch between credential profiles\n- **github sync**: push/pull config to a private github repo via `gh` cli\n- **backup/restore**: export/import complete config including skills and plugins\n- **settings**: general config, system prompt editor, oh my opencode model preferences\n- **i18n**: internationalization support with Chinese (zh-CN) translation\n\n---\n\n### i18n (Internationalization)\n\nOpenCode Studio supports multiple languages:\n\n- **English** (default)\n- **Chinese (zh-CN)** - 完整中文翻译\n\nLanguage can be switched via the language switcher in the sidebar. Selection is saved in cookies and persists across sessions.\n\nTo add a new language:\n1. Create `client-next/messages/{locale}.json` (e.g., `ja.json` for Japanese)\n2. Copy structure from `en.json` and translate all keys\n3. Add locale to `client-next/src/i18n/request.ts`\n\n---\n\n### how it works\n\n```mermaid\nflowchart LR\n A[Browser] -->|HTTP| B(Express API :1920+)\n B -->|Read/Write| C[~/.config/opencode/]\n C --> D[opencode.json]\n C --> E[skill/]\n C --> F[plugin/]\n```\n\n1. **detect**: server finds your opencode config directory automatically\n2. **read**: loads opencode.json, skills, plugins, auth\n3. **edit**: make changes through the ui\n4. **save**: writes back to disk instantly\n\n---\n\n### usage\n\n| route | actions |\n|:---|:---|\n| `/mcp` | toggle switches, add via npx command, search/filter |\n| `/profiles` | create/switch isolated environments |\n| `/skills` | create from template, bulk import, edit in monaco |\n| `/plugins` | pick template, bulk import, click to edit |\n| `/commands` | browse custom slash commands |\n| `/agents` | manage agents with model, tools, permissions |\n| `/usage` | token costs, model breakdown, project stats |\n| `/auth` | login/logout, save/switch credential profiles |\n| `/settings` | general, system prompt, github sync, oh my opencode models |\n\n---\n\n### bulk import\n\npaste multiple raw github urls (one per line):\n\n```\nhttps://raw.githubusercontent.com/.../skills/brai","github_created_at":"2025-12-29T21:59:28+00:00","created_at":"2026-07-11T11:54:52.302182+00:00","updated_at":"2026-07-27T12:00:57.665534+00:00","categories":[{"slug":"developer-tools","name":"Developer Tools","url":"https://www.graphcanon.com/categories/developer-tools","markdown_url":"https://www.graphcanon.com/categories/developer-tools.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/developer-tools"}],"tags":[{"slug":"cli-tools","name":"cli-tools"},{"slug":"configuration-manager","name":"configuration-manager"},{"slug":"desktop-app","name":"desktop-app"},{"slug":"gui","name":"gui"},{"slug":"mcp","name":"mcp"},{"slug":"model-context-protocol","name":"model-context-protocol"},{"slug":"nextjs","name":"nextjs"},{"slug":"opencode","name":"opencode"}],"trust":{"provenance":{"is_fork":false,"github_id":1124936542,"owner_type":"User","methodology":"github_public_v1","parent_repo":null,"near_duplicate_slugs":[]},"computed_at":"2026-07-27T12:00:56.449Z","maintenance":{"label":"Very active","score":96,"methodology":"github_public_v1","releases_90d":3,"days_since_push":4,"last_release_at":"2026-07-22T21:30:34Z"},"security_summary":{"status":"no_manifest","scanner":null,"low_count":0,"high_count":0,"last_scan_at":"2026-07-11T11:54:53.462Z","medium_count":0,"scan_profile":"mcp_manifest","critical_count":0}},"capability_facts":{"mcp":{"source":"repo_scan","observed_at":"2026-07-27T12:00:56.914Z","server_manifest":false},"scan":{"source":"repo_scan","observed_at":"2026-07-27T12:00:56.914Z"},"has_cli":{"value":true,"source":"package.json:bin|scripts","observed_at":"2026-07-27T12:00:56.914Z"},"languages":{"value":["typescript","javascript"],"source":"github.language+package.json","observed_at":"2026-07-27T12:00:56.914Z"}},"decision_facts":{"hosting":null,"pricing":null,"requirements":null,"constraints":null,"when_to_use":["- When you require a secure way to manage local OpenCode configurations through a user-friendly web GUI","- If your development workflow involves Next.js or React, this tool can integrate seamlessly into existing projects"],"when_not_to_use":["- If the lack of licensing information causes concerns over long-term support and updates for opencode-studio","- For teams that do not use or plan to incorporate React or Next.js in their development stack may find this tool less beneficial than other configuration managers"],"source":"enrich:decision_facts","observed_at":"2026-07-17T04:14:41.420Z"},"constraint_facets":null,"decision_summary":[{"label":"Adopt for","value":"Microck/opencode-studio provides a web-based graphical interface for securing and managing local OpenCode configuration, written in TypeScript."}]}}
![\"logo\"](\"client-next/public/logo-dark.png\"){kind=logo}
\n \n![\"downloads\"](\"https://img.shields.io/npm/dt/opencode-studio-server?style=flat-square&label=downloads&color=000000\")
![\"license\"](\"https://img.shields.io/badge/license-mit-000000?style=flat-square\"){kind=icon}