OpenCode Studio: A Local Web GUI for Managing OpenCode Configuration

What OpenCode Is and What the Studio Adds

OpenCode is an AI coding assistant that runs locally and connects to various language model providers. It is configured through files in `~/.config/opencode/`, including a main `opencode.json`, a `skill/` directory for prompt skill files, and a `plugin/` directory for JavaScript and TypeScript plugins. Configuring OpenCode typically means opening these files in a text editor and editing JSON or Markdown by hand.

OpenCode Studio adds a browser-based graphical layer over that configuration. The studio reads the same files OpenCode uses and writes changes back to disk immediately. No separate sync step is needed: saving a change in the UI takes effect the next time OpenCode reads its configuration.

The project is published to npm as `opencode-studio-server`. The frontend is a Next.js 16 application. The backend is an Express API at port 1920 (or the next available port) that reads and writes the OpenCode config directory. The two pieces run concurrently.

Installing OpenCode Studio: Public Site or Fully Local

The recommended quickstart uses the public hosted frontend with a local backend. Install the server globally:

npm install -g opencode-studio-server

Then visit opencode.micr.dev in a browser and click "Launch Backend" in the sidebar. The hosted page connects to the local backend, which reads and writes your OpenCode config. No local frontend setup is needed.

For a fully local setup without connecting to the public site, use the included quickstart scripts. On macOS or Linux:

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

On Windows, run `quickstart.bat`. After startup, open `http://localhost:1080`. The frontend binds to port 1080 and the backend API to port 1920, with both services auto-detecting the next available port if those are taken.

The studio configuration is stored in `~/.config/opencode-studio/` and isolated from the OpenCode configuration itself. Profile data lives in `~/.config/opencode-profiles/`. If the studio cannot find `~/.config/opencode/opencode.json`, it reports an "opencode not found" error.

MCP Manager and Provider Authentication

The MCP manager at route `/mcp` shows all MCP server entries from the OpenCode configuration. Each server can be toggled on or off with a switch, which writes the change to `opencode.json` immediately. Adding a new MCP server does not require editing JSON: paste an npx command into the input field and the studio parses the command and creates the entry.

The auth page at `/auth` handles provider login and logout for each supported model provider. Multiple credential profiles can be saved and switched between, which is useful when working across different accounts or organizations. The deep link `opencodestudio://install-mcp?name=NAME&cmd=COMMAND` provides a one-click path for external sites and documentation to trigger MCP server installation. A confirmation dialog is shown before the command is applied.

The studio also supports the GitHub sync feature for configuration management. Using the `gh` CLI, it can push and pull the full OpenCode configuration, including skills and plugins, to and from a private GitHub repository. This provides a backup and portability mechanism for moving configuration between machines.

Skill and Plugin Management with Bulk Import

The skill editor at `/skills` lets developers browse existing skill files, edit them in a Monaco editor, create new ones from templates, and import from URLs. A bulk import feature accepts a list of 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

Clicking fetch shows a preview with checkboxes. Skills that already exist are unchecked by default to prevent accidental overwrite. The deep link `opencodestudio://import-skill?url=URL` allows any web page to trigger a single skill import with one click.

The plugin hub at `/plugins` follows the same structure: browse plugins, edit in Monaco, create from templates (hooks, watchers, lifecycle patterns), and bulk import from URLs. The deep link `opencodestudio://import-plugin?url=URL` triggers plugin import the same way skill import works.

Profiles, Agents, Usage Dashboard, and i18n

The profiles page creates isolated environments with separate configurations, session histories, and credentials. Switching profiles is instant, which makes it practical to maintain separate contexts for different clients or projects without reinstalling anything.

The agents page at `/agents` manages custom agents in OMO (Oh My Openagent) format. Each agent is configured with a mode, model, tools list, and permissions. The studio reads the `oh-my-openagent.json` file; if it does not exist or lacks an `agents` field, the page shows nothing.

The usage dashboard at `/usage` reads local message log files from OpenCode and presents token costs, model breakdown, and project statistics. This runs entirely locally: no data leaves the machine. The statistics help track which models are consuming the most tokens across different projects.

The studio supports English and Chinese (zh-CN). Language selection is saved in a cookie. Adding a new language requires creating a JSON translation file in `client-next/messages/`, copying the structure from `en.json`, and registering the locale in `client-next/src/i18n/request.ts`.

OpenCode Studio Versus Manual Configuration and CLI Commands

Managing OpenCode configuration without the studio means editing `~/.config/opencode/opencode.json` directly, placing Markdown files in `~/.config/opencode/skill/`, and running provider login commands from the terminal. For a developer who configures OpenCode once and rarely changes it, the studio adds no real value.

The studio's advantage grows with the frequency and breadth of configuration changes. Toggling an MCP server requires opening JSON, finding the right entry, and changing a boolean by hand. In the studio, it is a toggle switch. Adding ten skill files from a GitHub repository requires downloading each one manually or writing a shell script. In the studio, paste the URLs and click fetch.

The public site plus local backend option is the path of least friction for new users, but it introduces a dependency on opencode.micr.dev being available. The fully local option eliminates that dependency at the cost of running a local Next.js frontend build. The project's license is MIT and the npm package is `opencode-studio-server` at version 2.4.5 as of August 2026.

Editorial conclusion

OpenCode Studio suits developers who use OpenCode regularly and find that managing skills, MCP servers, plugins, and auth profiles through JSON files or CLI commands is too slow. The GUI covers every major configuration surface in one browser tab. It is the wrong choice for teams that need no visual interface or that use OpenCode infrequently: in those cases the overhead of running the server adds more friction than it removes. Before adopting it, verify that OpenCode is installed and that `~/.config/opencode/opencode.json` exists, since the studio will report an error without it. The last push was on 2026-09-26.

Frequently asked questions

Official sources

1. Issues
2. Microck/opencode-studio on GitHub
3. Project website
4. README
5. Releases