OpenCode CLI

VS Code extension that brings the OpenCode AI coding agent into your editor with a rich webview panel, agent management, and an onboarding wizard.

Features

Chat Panel — converse with the OpenCode agent directly inside VS Code
Agent Manager — view, enable/disable agents from the webview
Auto-install & Setup Wizard — detects missing opencode binary, installs via npm, guides through opencode auth login
Server Lifecycle — automatically spawns opencode serve on startup and monitors health
Doctor Command — run OpenCode CLI: Doctor to collect diagnostics (binary, version, npm, server health)
Status Bar — OC indicator with color states (green=ready, yellow=starting, red=error)

Requirements

OpenCode CLI (npm install -g opencode-ai)
An LLM provider configured via opencode auth login

Extension Settings

Setting	Default	Description
`opencodeCli.port`	4096	Port for the `opencode serve` instance
`opencodeCli.autoInstall`	true	Automatically attempt `npm install -g opencode-ai` if the binary is missing
`opencodeCli.autoStartServer`	true	Auto-start `opencode serve` when VS Code opens
`opencodeCli.serverPassword`	""	HTTP basic auth password for the server

Commands

Command	Keybinding (Mac)	Keybinding (Win)
`OpenCode CLI: Open Panel`	`Cmd+K O`	`Ctrl+K O`
`OpenCode CLI: New Session`	—	—
`OpenCode CLI: Doctor`	—	—

Commands are available in the editor title menu and editor context menu for Markdown, TypeScript, JavaScript, and Python files.

Architecture

opencode-cli/
├── src/
│   ├── extension.ts        # Activation, status bar, command registration
│   ├── cli.ts              # Binary detection & auto-install
│   ├── server.ts           # ServerManager — spawns & monitors opencode serve
│   ├── panel.ts            # WebviewPanel provider (CSP, message bridge)
│   └── webview/
│       ├── index.tsx        # Preact entry
│       ├── App.tsx          # Tab navigation (Chat / Setup / Agents)
│       ├── ChatPanel.tsx    # Session-based chat UI
│       ├── SetupWizard.tsx  # Onboarding flow
│       └── AgentManager.tsx  # Agent list & toggle
├── media/                   # Static assets & compiled webview bundle
├── build.js                 # esbuild bundler (node + browser dual target)
└── package.json

The webview is built with Preact and communicates with the extension host via postMessage. The extension host forwards API calls to the local opencode serve process over HTTP.

Development

git clone https://github.com/daniel-sosa/opencode-cli.git
cd opencode-cli
npm install
npm run build    # build both extension + webview
npm run watch    # watch mode
npm run package  # package .vsix with vsce

To test locally, open the opencode-cli folder in VS Code and press F5.

Publishing

npm run publish

Requires vsce auth token with publisher daniel-sosa.