OpenCode VSCode Extension

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

Prerequisites

OpenCode CLI must be installed:

curl -fsSL https://opencode.ai/install | bash

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

Development Setup

Install Dependencies

npm install

Build the Extension

npm run build

This builds both:

Extension code → dist/extension.js
Webview UI → out/main.js and out/main.css

Development Workflow

Start watch mode (in a terminal):
```
npm run watch
```
Launch Extension Development Host:
- Press F5 in VSCode/Cursor
- Or open Run and Debug panel (Cmd+Shift+D) and click "Run Extension"
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):
- Changes hot-reload automatically
- Just save and see updates instantly

How It Works

Architecture

┌─────────────────────────────────────┐
│  React Webview (Chat UI)           │
│  - Input box                        │
│  - Message history                  │
│  - Thinking indicator               │
└──────────┬──────────────────────────┘
           │ postMessage
           ▼
┌─────────────────────────────────────┐
│  Extension Host (Node.js)           │
│  - OpenCodeService                  │
│    ├─ Manages OpenCode client      │
│    ├─ Creates sessions              │
│    └─ Sends prompts                 │
└──────────┬──────────────────────────┘
           │ @opencode-ai/sdk
           ▼
┌─────────────────────────────────────┐
│  OpenCode Server (embedded)         │
│  - Runs on localhost                │
│  - Uses workspace opencode.json     │
│  - Handles AI interactions          │
└─────────────────────────────────────┘

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 (React):

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 (React)

Configuration

The extension automatically uses:

Workspace opencode.json (if present in project root)
Global OpenCode config at ~/.config/opencode/opencode.json

Example workspace config:

{
  "model": "anthropic/claude-3-5-sonnet-20241022",
  "mcp": {
    // MCP server configurations
  }
}

Project Structure

opencode-vscode-2/
├── src/
│   ├── extension.ts              # Extension entry point
│   ├── OpenCodeService.ts        # OpenCode client/server manager
│   ├── OpenCodeViewProvider.ts   # Webview provider
│   └── webview/                  # React UI
│       ├── App.tsx               # Chat component
│       ├── App.css               # Styles
│       ├── main.tsx              # React entry point
│       └── vscode.d.ts           # VSCode API types
├── media/
│   └── icon.svg                  # Activity bar icon
├── dist/                         # Compiled extension (Vite output)
├── out/                          # Compiled webview (Vite output)
├── vite.config.extension.ts      # Extension build config
├── vite.config.ts                # Webview build config
├── tsconfig.json                 # TypeScript config
└── package.json

Tech Stack

Extension: TypeScript (ESM), VSCode Extension API, OpenCode SDK
Webview: React, TypeScript
Build: Vite for both extension and webview
Styling: CSS with VSCode theme variables

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

OpenCode GUI

Tanishq Kancharla