GraphCanon
Home/Developer Tools/opencode-studio
opencode-studio logo

opencode-studio

Microck/opencode-studio

web GUI for securely managing local OpenCode configuration

GitHub Website

GraphCanon updated 3w · GitHub synced 3w

688 stars51 forksLast push 1mo TypeScript

Decision brief

Microck/opencode-studio provides a web-based graphical interface for securing and managing local OpenCode configuration, written in TypeScript.

Good fit when

  • - 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

Avoid when

  • - 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

Observed Jul 17, 2026 · Source: enrich:decision_facts

opencode-studio alternativesTrust report

Verify the decision

Adoption

Package downloads where a registry match exists. GitHub stars (688) are secondary evidence.

npm downloads (30d)
838·npm downloads API·3w

Maintenance and security

Full trust report
Maintenance
Very active (4d since push)
As of 3w
Provenance
Not a fork · Personal account
As of 3w
Security (OSV)
No MCP manifest
As of 1mo

Public GitHub metadata and optional OSV scans. Signals, not a guarantee. Trust methodology.

Install

npm install opencode-studio
npm

Similar tools

Same-category neighbours. No typed graph edges are catalogued for this tool yet.

Evidence and technical details

Sourced facts, taxonomy, compatibility claims, README excerpt, and machine-readable endpoints.

Overview

Microck/opencode-studio offers a web-based graphical interface to manage OpenCode configuration locally in a secure fashion.

Capability facts

CLI
CLI entrypoint

Source: package.json:bin|scripts · Jul 27, 2026

MCP server
No MCP server detected

Source: repo_scan · Jul 27, 2026

Languages
typescript, javascript

Source: github.language+package.json · Jul 27, 2026

Categories

Developer Tools

Compatibility

Sourced claims from the README excerpt - not unsourced marketing copy.

Node.js runtimeNode.js

Source: README excerpt (regex_v1, Jul 27, 2026)

npm install -g opencode-studio-server
Source link

Tags

cli-toolsconfiguration-managerdesktop-appguimcpmodel-context-protocolnextjsopencode

README

English | 简体中文

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

downloads license

preview

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

routeactions
/mcptoggle switches, add via npx command, search/filter
/profilescreate/switch isolated environments
/skillscreate from template, bulk import, edit in monaco
/pluginspick template, bulk import, click to edit
/commandsbrowse custom slash commands
/agentsmanage agents with model, tools, permissions
/usagetoken costs, model breakdown, project stats
/authlogin/logout, save/switch credential profiles
/settingsgeneral, system prompt, github sync, oh my opencode models

bulk import

paste multiple raw github urls (one per line):

https://raw.githubusercontent.com/.../skills/brai

For agents

This page has a .md twin and JSON over the API.

/tools/microck-opencode-studio.mdGET /api/graphcanon/tools/microck-opencode-studioGET /api/graphcanon/graph?tool=microck-opencode-studio

Was this helpful?

Anonymous feedback helps us improve pages and translations.