opencode-studio

opencode-studio provides a local GUI to manage opencode configurations. It offers an MCP manager to toggle servers, a profiles system for isolated environments, a skill editor to browse and edit skills, and a plugin hub to manage JavaScript/TypeScript plugins. You can also handle authentication, run custom slash commands, monitor usage and costs, and sync configurations with GitHub. To start the MCP server, install the opencode-studio-server package globally and launch the backend from the GUI. The tool is designed to avoid manual JSON editing by providing an intuitive UI for all configuration tasks, including adding MCPs via npx commands and importing skills or plugins in bulk.

Prerequisites:

• Node.js and npm installed on your system
• Internet access to fetch packages

Option A — Public site + local backend (recommended):

1. Install the MCP server globally:

npm install -g opencode-studio-server

2. Open your browser and visit the OpenCode Studio backend UI (the frontend will guide you to launch the backend).

Option B — Fully local (advanced):

1. Clone the repository or install the CLI as above.
2. Run the backend from your local environment using the provided command in the UI or via:

npx -y opencode-studio-server

Prerequisites recap:

• Node.js (recommended latest LTS)
• npm or yarn for package management
• Network access to fetch dependencies

Note: The project uses Next.js for the frontend and Express for the backend, with configuration stored under ~/.config/opencode/ and related directories.

Tips and common issues:

• Default ports: backend runs on 1920+ and frontend on 1080+. If you have conflicts, the tools will attempt to auto-detect available ports.
• Ensure the opencode config directory exists at ~/.config/opencode/ for the MCP to load and save settings.
• You can add MCPs by pasting npx commands in the UI; this is especially handy for quickly wiring in new servers.
• If the backend UI says 'Launch Backend' not working, reinstall the CLI globally with npm install -g opencode-studio-server.
• For deep linking and protocol handlers, you may need to register the protocol handler with admin rights; consult the official docs for your OS.
• The package name for the Node.js MCP server is opencode-studio-server.