A web dashboard for managing your OpenCode configuration — skills, commands, agents, MCP servers, providers, models — and tracking your spending metrics and token usage, all from your browser.
OpenCode Dashboard runs as an OpenCode server plugin. When you start OpenCode, the plugin automatically:
- Starts a local web server on port
11337 - Opens the dashboard in your default browser
From there you can visually manage everything in your OpenCode config — create skills, add MCP servers, tweak agent prompts, configure providers — without hand-editing JSON files.
If you open a second OpenCode instance while one is already running, the plugin detects the existing dashboard and skips starting a duplicate. No extra browser tabs, no port conflicts.
Tell your AI:
Add @igorvelho/opencode-dashboard-plugin to the plugin list in my opencode.json
That's it. Start OpenCode and the dashboard opens automatically at http://localhost:11337.
Requirements: OpenCode 1.4.0 or newer.
Add the plugin to your OpenCode config at ~/.config/opencode/opencode.json:
{
"$schema": "https://opencode.ai/config.json",
"plugin": ["@igorvelho/opencode-dashboard-plugin"]
}OpenCode will automatically install the plugin from npm on next startup.
Start a new OpenCode session. Your default browser should open to the dashboard. You should see the version number in the bottom-left corner of the sidebar.
OpenCode caches plugins after first install. To update to the latest version, clear the plugin cache and restart OpenCode:
rm -rf ~/.cache/opencode/packages/@igorvelho*- Metrics & Usage — Track token usage, API costs, and session statistics with visual charts and breakdowns by project and model
- Skills — Create, edit, and delete custom skills with a markdown editor and YAML frontmatter support
- Commands — Manage slash commands (file-based and JSON-defined, read-only for built-in commands)
- Agents — Configure custom agents with system prompts, model overrides, and tool permissions
- MCP Servers — Add, remove, and toggle MCP server configurations with a visual editor
- Providers & Models — Configure AI providers and their model settings
- Config Editor — Raw JSONC editor for
opencode.jsonwith syntax highlighting - Backup & Restore — Full or redacted config backups with automatic secret detection
- Workspace Management — Switch between multiple OpenCode config directories
| Environment Variable | Description | Default |
|---|---|---|
OPENCODE_CONFIG_DIR | Path to OpenCode config directory | ~/.config/opencode |
PORT | Dashboard server port | 11337 |
The plugin auto-opens the dashboard in your default browser on all platforms:
| Platform | Method |
|---|---|
| WSL | cmd.exe /c start (opens in Windows browser) |
| macOS | open |
| Windows | cmd /c start |
| Linux | xdg-open |
Contributions are welcome! Fork the repo, create a branch, and submit a PR.
- Node.js 18+
- npm
git clone https://github.com/igorvelho/opencode-dashboard.git
cd opencode-dashboard
# Install dependencies (three separate node_modules — root, server, client)
npm install
cd server && npm install
cd ../client && npm install
cd ..npm run devThis starts both the API server (port 3001) and the Vite dev server (port 5173) via concurrently. Open http://localhost:5173 — the Vite dev server proxies API requests to the backend.
npm test# run all tests (server)
npm run test:watch --prefix server # watch modeTests live in server/tests/ and use temp directories with real file I/O (no filesystem mocks).
npm run build
npm startOpen http://localhost:11337 — the server serves the built client as static files.
opencode-dashboard/
├── client/ React 19 + Vite + Tailwind v4 + shadcn/ui
├── server/ Express API (TypeScript)
├── shared/ TypeScript types and Zod validation schemas
└── plugin/ OpenCode server plugin (starts dashboard, opens browser)
| Layer | Stack |
|---|---|
| Client | React 19, TypeScript, Vite, shadcn/ui (base-nova), Tailwind CSS v4, React Router |
| Server | Express, TypeScript, gray-matter, jsonc-parser, Zod |
| Shared | TypeScript types and Zod schemas used by both client and server |
| Plugin | OpenCode server plugin — manages lifecycle, auto-opens browser |
This project uses a CI-driven release process. You never need to manually build or deploy.
- Make your changes on a feature branch
- Submit a PR to
master— only the maintainer can merge - On merge to master, GitHub Actions automatically:
- Builds the client (Vite) and server (TypeScript)
- Strips types from the plugin source
- Publishes the built output to npm as
@igorvelho/opencode-dashboard-plugin - Creates a git tag and GitHub Release (if the version in
package.jsonwas bumped)
To cut a new version: bump version in both the root package.json and plugin/package.json, merge to master, and CI handles the rest.
MIT License — see LICENSE for details.