OpenCode for VS Code

A VS Code extension for OpenCode v2. It talks to the OpenCode v2 server API, so a session you start here also shows up in the TUI, the desktop app and the web UI, and the other way round.

Requirements

• VS Code 1.95 or newer
• The OpenCode v2 CLI (opencode --version should print 2.x). If opencode is not on your PATH, set OpenCode: Binary Path.
• At least one model provider connected (opencode auth, or Settings → Providers in the extension).

Getting started

1. Open the OpenCode view in the activity bar, or press Ctrl+Esc (Cmd+Esc on macOS).
2. Type a request and press Enter.
3. Select code in the editor and press Ctrl+Alt+K (Cmd+Alt+K) to attach the selection to the chat.

Features

Chat

• Text, reasoning and tool calls stream in as they happen. Tool calls show as cards: file edits with inline diffs, shell commands with output, searches, web fetches, subagent tasks, todo lists and MCP tools.
• @ mentions files and folders (fuzzy search), subagents and the current selection. / runs server commands (/init, /review, custom commands), skills and built-in actions. A message starting with ! runs a shell command.
• You can paste or drop images and files, or attach them with the paperclip button.
• Agent and model pickers. The model picker first shows the models grouped by provider, then a second step picks a variant such as reasoning effort (or default). Tab cycles primary agents, so you can switch between Build and Plan.
• The MCP button in the composer shows the configured MCP servers and their live status. Start or stop any server from the popup to match what the session needs (a green count badge shows how many are connected). This is runtime only: the server forgets the change on restart, and the Manage in settings link opens the full MCP pane.
• If you send while the agent is working, the message is queued. steer delivers it into the running turn; queue waits until the turn finishes (Esc stops the response). The session list is a popover off the header's history button in both surfaces; an editor tab's chat header is minimal (history + More actions, the latter including All sessions).
• A chat lives in one surface at a time. Open in new tab (header menu, session list, or the sidebar's Open Chat in New Tab button, Ctrl/Cmd+Shift+Esc) moves the current session into an editor tab and frees the sidebar; an editor-tab chat has a Move to side panel button that does the reverse and closes the tab.
• The composer shows how much of the context window is used and what the session has cost so far. Clicking the meter opens a breakdown by token category, the session totals and the cost.

Permissions and questions

• Permission requests appear inline with the command or diff. Reply with Allow once, Always allow or Reject, optionally adding feedback for the agent. The keyboard shortcuts are 1, 2 and 3.
• Questions from the agent appear as a form with the choices, multi-select, free text, numbers, booleans and conditional fields. Once answered, the question's tool card in the transcript shows the choices and highlights the one you picked (no raw JSON).
• OpenCode: Auto Approve approves requests automatically, like opencode --auto. It only applies to sessions open in this window.

Sessions

• Sessions are reached from the chat header's history button, which opens the searchable session list as a popover: open, open in a new tab, rename, fork, archive and delete inline, plus Import… and New session in the footer.
• Undo (/undo, or the edit button on a message) reverts the conversation and file changes to that point and puts the prompt back in the composer. Redo (/redo) restores it.
• /compact summarises the conversation to free up context.
• Subagent sessions open from their task card, with a back button to the parent session.

Diffs and editor integration

• Open diff shows an edit in the VS Code diff editor. The right-hand side is the real file, so you can keep editing it.
• Review session changes and Working tree changes open every changed file in the multi-file diff editor.
• File paths in responses are clickable, and image links open in the built-in image preview (other binary files are revealed in the Explorer). Code blocks have Copy, Insert at cursor and Open in new file buttons.
• Editor and Explorer context menus include Add Selection to Chat, Add File to Chat, Explain Selection and Fix Problems in File.

IDE tools for the agent

The extension makes VS Code's language features available to the agent as an MCP server named vscode. The tools are vscode_get_diagnostics, vscode_get_open_editors, vscode_get_selection, vscode_open_file, vscode_workspace_symbols, vscode_document_symbols, vscode_go_to_definition, vscode_find_references and vscode_hover. You can turn them off with opencode.ide.enableMcpBridge.

Terminals

• OpenCode: Open TUI in Terminal starts the TUI on the same server and session.
• New Server Terminal and Attach to Server Terminal connect to server-side PTYs.
• Follow on a running shell tool streams that command's output into a terminal.

Settings panel

Open it from the gear icon. It has an icon rail on the left and a content pane on the right; each rail icon jumps to one section, and icons show live signals (counts, and a red dot when something needs attention — a failed MCP server, a disabled provider or a connection error). A filter box narrows the rows of any section. It covers:

• General: connection status, server and version, workspace folder, reconnect/restart/reload, and the chat settings as toggles (shown here in user scope — opencode.chat.* and opencode.autoApprove are read from user settings, so a repo cannot change them)
• Providers: configured providers, stored credentials, and connecting a provider (API key, OAuth and CLI login flows)
• Models: the available models with the current default; each model has a Use button that applies it to the current session (or to the next session when none is open), and the active model is marked
• MCP: servers (connect, disconnect, add and remove — statuses update live via server events, no polling) and their resources
• Agents, Skills, Commands: what the server offers
• Permissions: saved “Always allow” rules
• Worktrees, Schedules: list, create, pause/resume and delete
• Processes: agent shell commands and server terminals
• Usage: all-time statistics and budget limits with spent/limit meters

Connection modes

opencode.server.mode controls how the extension finds a server:

Settings

The chat settings are also editable in the Settings panel (General section); the panel writes them to user scope. Server settings (opencode.server.*, opencode.binaryPath) are machine-scoped on purpose, and so is opencode.autoApprove — a repository cannot change the server, the executable, or whether tool calls are auto-approved.

Keyboard shortcuts

Development

npm install
npm run build          # bundles dist/extension.js and dist/webview.js
npm run typecheck
npm test               # unit tests
npm run test:vscode    # integration tests in an isolated VS Code instance
                       # (OPENCODE_TEST_LLM=1 also runs a live-model turn)
npm run package        # produces a .vsix

Press F5 in VS Code to launch an Extension Development Host.

Webview harness

scripts/harness serves the chat UI in a normal browser and plays the extension host against a real server. Use it to iterate on the UI quickly and to take screenshots:

npm run harness:build
OPENCODE_URL=http://127.0.0.1:4096 OPENCODE_PASSWORD=... HARNESS_DIR=/path/to/project node dist-harness/host.js
node scripts/harness/drive.mjs basic shots/     # scenarios: basic, pickers, mcp, settings, open, context, toolcard, permission, form, advanced, inbox, prompt, sessions

Architecture

• src/connection.ts finds or starts the server and creates the typed @opencode/client.
• src/events.ts keeps a single event stream open and reconnects with backoff.
• src/chat.ts contains the webview controllers (sidebar and tabs) and the VS Code side of their actions. The webview never receives credentials. It calls server methods through src/rpc.ts, which blocks a small set of sensitive methods and removes secrets from responses.
• webview/src is the React UI. store.ts and events.ts turn server events into chat state, actions.ts holds the user operations, and components/ holds the views.
• src/ideBridge.ts is the client MCP server that provides the IDE tools; src/terminals.ts connects PTYs; src/diff.ts and src/patch.ts provide the diff editor integration.