OpenCode Panel
A React chat sidebar for AI coding in VS Code, powered by
opencode. Bring your own model
(Anthropic / OpenAI / Gemini / local). Everything runs locally — nothing
leaves your machine except the API call to your chosen provider.

Chat panel
|

Model · Agent · Effort picker
|

Per-workspace chat history
|

Slash commands
|

Manage MCP servers
|

Context-window usage
|
Highlights
@file and @chat mentions — fuzzy file picker with chip-styled tokens and recently-opened files boosted; @chat pulls a past conversation into the prompt as context.
- Image, PDF, and text attachments — paperclip or clipboard paste; images render as preview thumbnails, and about fifty code and plain-text extensions are accepted alongside images and PDFs.
- Review Changes card per file with
Keep / Undo per row and for all, SCM-style status badges, and attribution when a subagent made the edit. Undo locates each hunk by its line anchor before touching the file.
- Edit + regenerate — click any past user message; the conversation rewinds via opencode's
session.revert. A stopped reply offers Retry.
- Model · Agent · Effort picker — one in-panel popover: search models grouped by provider, fold providers you do not use, pick from recent models, set the effort / reasoning budget for models that expose variants (gpt-5.5, claude-opus, etc.), and switch opencode agents.
- Slash commands —
/compact, /init, /undo, /redo, /fork, /new, and your workspace's custom opencode commands, from a picker that opens on /.
- MCP servers and AI providers managed from the panel —
/mcp adds local or remote servers and connects or authenticates them; /provider connects any provider opencode supports by API key or OAuth, and the model picker reflects the change on next open.
- Chat history per workspace, including sessions started from the opencode TUI or another client in the same project; opening one makes it a regular conversation with edit and rewind.
- Context-window usage ring in the composer — amber at 85%, red at 95%, hover for the token count against the model's limit.
Setup
OpenCode Panel talks to a locally-running opencode server. One-time prerequisite:
# Install opencode (pick one)
curl -fsSL https://opencode.ai/install | bash # macOS / Linux
irm https://opencode.ai/install.ps1 | iex # Windows
npm install -g opencode-ai # any platform
brew install sst/tap/opencode # macOS Homebrew
# Sign in to your provider (one time)
opencode auth login
OpenCode Panel works with opencode 1.x and, experimentally, with opencode 2.0. It reads the binary's version at startup and talks to each through its own API; nothing needs configuring. opencode 2.0 is a separate beta line with its own installers (curl -fsSL https://opencode.ai/v2/install | bash, npm install -g @opencode/cli, brew install anomalyco/tap/opencode-v2). On 2.0, sharing is not available yet. Set opencui.opencode2 to off to refuse 2.0 binaries.
Then install the extension:
code --install-extension haoyangzeng.opencui
Or search "OpenCode Panel" in the VS Code Extensions sidebar. Open the panel via the activity-bar icon or Cmd+L / Ctrl+L.
If opencode isn't on PATH, set opencui.binaryPath in settings to its absolute path.
Settings
| Setting |
Default |
Description |
opencui.binaryPath |
opencode |
Path to the opencode binary. |
opencui.serverPort |
0 |
Local opencode HTTP port (0 = auto). |
opencui.model |
"" |
Default model (providerID/modelID). Change at runtime via the chat header. |
Develop
bun install
bun run watch # esbuild + vite single-file
Open the folder in VS Code and press F5 to launch an Extension Development Host.
License
MIT. See LICENSE.