OpenCode GUI installs statistics

OpenCode VSCode Extension

Install for VSCode

A VSCode sidebar extension for OpenCode - the AI coding agent. Simple chat interface to interact with OpenCode directly from your sidebar.

Note: This is an independent community project and is not officially affiliated with or maintained by the OpenCode team.

Prerequisites

1. OpenCode CLI must be installed:

2. OpenCode must be configured with API credentials: Select your provider (OpenCode Zen, Anthropic, OpenAI, etc.) and add your API key.

Development Setup

Install Dependencies

Build the Extension

This builds both: • Extension code → dist/extension.js • Webview UI → out/main.js and out/main.css

Development Workflow

1. Start watch mode (in a terminal):

2. Launch Extension Development Host: • Press F5 in VSCode/Cursor • Or open Run and Debug panel (Cmd+Shift+D) and click "Run Extension"

3. Use the extension: • Look for the OpenCode icon in the Activity Bar (left side) • Click it to open the sidebar • Type a message and hit Send or press Enter

Making Changes

• Extension code (src/extension.ts, src/OpenCodeService.ts, src/OpenCodeViewProvider.ts): • Save your changes • Reload the Extension Development Host window: Cmd+R (Mac) or Ctrl+R (Windows/Linux) • Webview UI (src/webview/App.tsx, src/webview/App.css, src/webview/hooks/): • Changes hot-reload automatically • Just save and see updates instantly

How It Works

Architecture

Key Components

Extension Side (TypeScript/ESM): • src/extension.ts: Entry point, initializes OpenCodeService • src/OpenCodeService.ts: Manages OpenCode client/server, sessions, and prompts • src/OpenCodeViewProvider.ts: Webview provider, handles message passing

Webview Side (SolidJS): • src/webview/App.tsx: Chat UI with input, message history, thinking indicator • src/webview/App.css: Styles using VSCode theme variables

Build System: • vite.config.extension.ts: Bundles extension (ESM → CJS for VSCode) • vite.config.ts: Bundles webview (SolidJS)

Configuration

The extension automatically uses: 1. Workspace opencode.json (if present in project root) 2. Global OpenCode config at ~/.config/opencode/opencode.json

Example workspace config:

Project Structure

Tech Stack

• Extension: TypeScript (ESM), VSCode Extension API, OpenCode SDK • Webview: SolidJS, TypeScript • Build: Vite for both extension and webview • Styling: CSS with VSCode theme variables • Server: Bun (spawned process running OpenCode server)

Features

✅ Simple chat interface ✅ Send prompts and get AI responses ✅ Thinking indicator during processing ✅ Message history (user and assistant) ✅ Workspace configuration support ✅ Full TypeScript type safety ✅ VSCode theme integration

Future Enhancements

• Real-time streaming responses • File attachments from workspace • Markdown rendering in responses • Code syntax highlighting • Multi-session support • Session persistence • Undo/redo functionality

Publishing

To publish a new version:

1. Bump the version in package.json 2. Set environment variable: export OVSX_PAT=your_open_vsx_token 3. Login to VS Code Marketplace: npx vsce login 4. Run: pnpm publish

This publishes to both VS Code Marketplace and Open VSX Registry.

Note: You'll need: • A VS Code Marketplace Personal Access Token (PAT) from Azure DevOps with "Marketplace (Manage)" scope • An Open VSX token set as OVSX_PAT environment variable

Troubleshooting

"Failed to start OpenCode" • Install OpenCode CLI: https://opencode.ai/install • Make sure OpenCode CLI is installed and on PATH: • macOS/Linux: which opencode • Windows: where opencode • Configure authentication: opencode auth login • If you installed OpenCode recently, fully restart VS Code so the extension host gets the updated PATH

"No response received" • Check API credentials are valid • Verify workspace has internet connection • Check VSCode Developer Console for errors (Help → Toggle Developer Tools)

Description from the VS Code Marketplace listing.