A full-featured chat UI for OpenCode — the AI coding agent that runs in your terminal — now available as a sidebar extension for VS Code and any VS Code-compatible editor (VSCodium, Cursor, Windsurf, etc.).
Compatible with VS Code, VSCodium, Cursor, Windsurf, and any editor supporting the VS Code extension protocol. Install from the VS Marketplace or Open VSX — non-VS Code editors should use the Open VSX link.
Chat with agent modes, model selection, and streaming responses
Select old chat to continue or start new chat
- Chat UI — Full conversational interface with streaming responses, markdown rendering, and syntax-highlighted code blocks
- Agent Modes — Switch between agents (Plan, Build, Review, etc.) with one click
- Model Selection — Searchable model picker grouped by provider with key status indicators
- Effort Variants — Choose response effort: Balanced, High, Max, Minimal, Medium, Low
- Streaming Responses — Real-time token-by-token streaming with reasoning display
- Abort — Stop running responses instantly at any time
- Session List — Browse all sessions with time-based grouping (Today / Yesterday / Earlier)
- Search Sessions — Filter sessions by name or content via the search input
- Rename — Rename any session inline
- Fork — Fork a session to branch off a new conversation
- Diff — View session file changes inline with add/delete stats
- Summarize — Compact session history
- Export — Export any session as JSON; save the file with the modal's built-in Save button or copy to clipboard
- Import — Pick a session JSON file; the contents are shown in a viewer and a new session with the imported title is added to the list
- Open Web GUI — Launch the opencode web UI in a custom editor tab (with auth handled transparently)
- Delete — Remove unwanted sessions
- New Chat — Start fresh conversations with a single click
- Message Search — Press
Ctrl+F/Cmd+Fto search within the current chat with match navigation (up/down arrows) - Copy Message — Copy individual message content
- Revert Message — Revert to a previous version of a message
- Fork from Message — Fork a session starting from a specific message
- Slash Commands — Type
/to browse and run 15+ built-in commands (help, diff, fork, share, review, sessions, skills, mcps, import, etc.) - File Attachment — Attach workspace files via
@mention menu or attachment icon file picker - Question Prompts — Interactive question flows for plan/ask workflows with textareas and submit buttons
- Generate Commit Message — Analyze staged (or unstaged) git diff and produce a standardized, conventional commit message (
type(scope): description) directly into the SCM input box, with a clipboard fallback
- Markdown Rendering — Full markdown including tables, lists, headings, code blocks, links, images, and formatting
- Code Highlighting — Built-in syntax highlighting for 40+ languages with copy-to-clipboard
- Thinking/Reasoning — Real-time reasoning display that shows the model's chain-of-thought as it happens, giving you visibility into how the AI arrives at its answers for better understanding
- Inline Tool Status — Task cards showing running and completed tool calls inline
- Token & Cost Tracking — Token usage and cost per message, displayed in the status bar
- File Display — Inline file content rendering with language labels
- Session State Info — Modal showing CLI status, version, session IDs, model, agent, and more
- Dark Theme — Custom dark design that matches VS Code aesthetics
- Responsive Layout — Adapts to sidebar width with scrollable chat area
- Provider List — View all configured providers with API key status (connected/missing)
- Model Count — See how many models each provider offers
- Multi-Provider — Works with any provider configured in the opencode CLI
Beyond the feature list, here's what makes this extension feel different to use.
- Live reasoning stream — watch the model's chain-of-thought unfold in a collapsible card right next to its answer, token by token.
- Streaming that just works — text flows in as the model generates it, with no flicker, no re-renders, no dropped chunks on busy agents.
- Effort presets — one-click switch between Balanced, High, Max, Minimal, Medium, and Low to trade speed for depth.
- Token and cost counter in the status bar shows you exactly what each session used, with friendly k/M formatting.
- Cache-aware totals — the count respects cached reads and writes, so the number reflects what you actually pay.
- Session info modal — a quick
ⓘreveals the CLI version, session IDs, and which model/agent is active.
- Auto-discovery across the opencode ecosystem — start a chat in the CLI, TUI, or web, and it shows up in the sidebar instantly.
- No spam refreshes — bulk imports are collapsed into a single update, so the list stays calm.
- Today / Yesterday / Earlier grouping with a quick search box, plus inline Rename, Diff, Fork, Summarize, Delete, and an Export on every row.
- One-click export — any session becomes a portable JSON file with a built-in Save dialog and copy-to-clipboard.
- Import any session JSON — pick a file, the title is read from the JSON, and a new session appears in your list ready to continue.
- Open the full web GUI in-editor — the Globe icon launches the opencode web UI in a custom editor tab; an auth-injecting proxy handles the server's Basic auth behind the scenes so the UI loads without manual login.
- Smart binary detection — finds the
opencodeCLI whether it lives inPATH, in the npm global folder, or anywhere you point it via settings. No more "command not found" on fresh Windows installs. - No orphaned processes — when VS Code closes, the entire server tree (including MCP and LSP children) is cleaned up.
- Self-healing connection — if the server hiccups, the extension quietly brings it back without you noticing.
- Per-session password — each spawn uses a fresh random password; nothing hardcoded.
- No port collisions — the server picks its own port and reports the real URL back.
- Pure mode — turn off plugins for a leaner, lighter setup on low-memory machines.
- Keep the server alive between windows — a single setting decides whether VS Code fully shuts it down on close.
- Slash command palette — 15+ built-ins like
/diff,/fork,/share,/review,/sessions,/mcps,/skills, browsable with arrow keys. @to mention files — fuzzy, live, and sanitised; pairs with a native picker for absolute paths.- In-chat question cards — when the agent needs your input, options appear as buttons with a "type your own" box.
- Search inside a chat —
Ctrl/Cmd+Fopens a search bar with up/down match navigation and a live count. - Copy or revert any message — one click to copy assistant text, or roll a user message back to a previous version.
- Session diff viewer — see every file the agent changed with add/delete counts.
- Beautiful code blocks — copy buttons on every block, plus syntax highlighting for 40+ languages (no external CDN, no tracking).
- Inline tool cards — running and completed tool calls show up right inside the chat with titles and how long they took.
- Searchable model picker grouped by provider, with a little dot showing whether your API key is set.
- Providers panel — one glance at every configured provider, its key status, and how many models it offers.
- Works with any provider — anything the opencode CLI knows about is available; no provider code lives in the extension.
- Opt-in debug logger — turn it on for support, leave it off for zero overhead. Logs roll daily and self-clean.
- Settings react live — tweak auto-fetch and the sidebar updates without a reload.
- Hardened webview — scripts run with a nonce, no inline JS, no remote sources.
- No webview framework — vanilla TypeScript + Tailwind means fast load and no framework upgrade churn.
- 100% local — the extension just shells out to your
opencodebinary. No telemetry, no relay, no middleman. - No extra network calls beyond the AI providers you choose to configure.
The opencode CLI must be installed and available on your PATH.
npm install -g opencode-aiThe extension auto-detects the CLI binary. You can also set a custom path in settings:
opencode-chat.cliPath
- Click the OpenCode icon in the activity bar
- If the CLI is not found, click Install OpenCode to open the install page
- Select an agent mode and model from the toolbar
- Type a message and press Enter (or click the send button)
- View responses in real-time with streaming text, reasoning, and tool calls
Press Ctrl+F (or Cmd+F on macOS) to open the message search bar. Navigate matches with Enter/Shift+Enter or the arrow buttons. Press Escape to close.
Type / in the input to browse available commands:
| Command | Description |
|---|---|
/agents |
Switch agent |
/compact |
Compact session |
/connect |
Connect provider |
/copy |
Copy session transcript |
/diff |
Open diff viewer |
/editor |
Open editor |
/exit |
Exit |
/export |
Export session transcript |
/fork |
Fork session |
/help |
Show help |
/import |
Import session from a JSON file |
/init |
Initialize project analysis |
/mcps |
Manage MCP servers |
/review |
Review changes |
/sessions |
List and switch sessions |
/skills |
Manage skills |
Type @ in the input to browse and attach workspace files to your message. You can also click the attachment icon in the input toolbar to open a file picker.
- Click the History (clock) icon in the header to toggle the session list
- The header also has a context-aware Import / Export icon: when a session is selected it exports that session; when no session is selected it opens the import file picker
- The Globe icon opens the opencode web UI in a custom editor tab
- Hover over a session to reveal actions: Rename, Diff, Delete
- Use the search box above the session list to filter by name
- Click New Chat to start a fresh conversation
- Sessions are grouped by Today, Yesterday, and Earlier
- Run
/importfrom the input box to pick a session JSON file - Run
/exportfrom the input box to export the current session
| Command | Description |
|---|---|
OpenCode Chat: Focus Sidebar |
Open the chat sidebar |
OpenCode Chat: New Session |
Start a new conversation |
OpenCode Chat: Refresh Models |
Refresh the model list |
OpenCode: Generate Commit Message |
Generate a conventional commit message from git diff into the SCM input box |
| Setting | Default | Description |
|---|---|---|
opencode-chat.cliPath |
"" |
Path to the opencode CLI binary. Leave empty to auto-detect. |
opencode-chat.defaultModel |
"" |
Default model ID (e.g. anthropic/claude-sonnet-4-20250514). Empty = first available. |
opencode-chat.defaultAgent |
"" |
Default agent name (e.g. plan, build, review). Empty = first available. |
opencode-chat.serverPort |
4096 |
Port for the opencode server. Change if the default port is already in use. |
opencode-chat.serverHostname |
127.0.0.1 |
Hostname to bind the opencode server to. |
opencode-chat.serverTimeout |
15000 |
Max milliseconds to wait for the opencode server to start. |
opencode-chat.pureMode |
false |
Run opencode in pure mode (no external plugins). Reduces subprocess count and memory usage. |
opencode-chat.cleanupOnDeactivate |
true |
Kill the opencode server process tree when VS Code closes or the extension deactivates. Prevents orphaned processes. |
opencode-chat.autoFetchSessions |
true |
Auto-detect chat sessions created from the opencode CLI and show them in the webview session list. When disabled, only webview-created sessions appear until manual refresh. |
opencode-chat.autoFetchIntervalMs |
0 |
Polling interval in milliseconds as a fallback for auto-fetch. 0 = SSE only (instant, recommended). >0 = poll session list every N ms. Useful if SSE is unstable or you want explicit control. |
opencode-chat.enableJsonLogs |
false |
Write raw SSE events, dispatched cli events, and webview messages as NDJSON for debugging. Off by default — enable only when troubleshooting. |
opencode-chat.jsonLogsPath |
"" |
Override directory for JSON debug logs. Leave empty to use <workspace>/logs/opencode-chat (or extension globalStorage if no workspace). |
The extension communicates with the opencode CLI by spawning it as a subprocess. No separate HTTP server is needed — the CLI handles all session, prompt, and provider management via its SDK.
src/
extension.ts # Extension entry point & activation
OpenCodeCli.ts # CLI subprocess wrapper & SDK client
OpenCodeViewProvider.ts # Webview provider & message relaying
AuthProxy.ts # Localhost proxy that injects Basic auth for the web GUI panel
webview/
app.ts # Chat UI (Vanilla TypeScript + Tailwind CSS)
The webview is built with vanilla TypeScript and Tailwind CSS — no framework dependencies. Markdown rendering and syntax highlighting are implemented from scratch for a lightweight footprint.
The optional Open Web GUI panel runs the opencode web UI inside an iframe inside a custom WebviewPanel. Because the opencode server requires Basic auth on every request, AuthProxy listens on a free local port and forwards all HTTP requests and WebSocket upgrades to the real server, adding the Authorization: Basic header on the way out. The webview only ever talks to the proxy, so the GUI loads without a manual login step.
- Node.js >= 18
- OpenCode CLI (
npm install -g opencode-ai) - VS Code
# Clone the repo
git clone https://github.com/yeasherarafath/opencode-chat.git
cd opencode-chat
# Install dependencies
npm install
# Build extension + webview
npm run build
# Watch mode (auto-rebuild on changes)
npm run watchPress F5 in VS Code to launch a new Extension Development Host window with the extension loaded. Set breakpoints in src/ and use the Debug: Attach configuration for the webview.
dist/extension.js— Extension main processdist/webview.js— Webview UIdist/webview.css— Tailwind-generated styles
| Script | Description |
|---|---|
npm run build |
Build extension + webview via esbuild + Tailwind |
npm run watch |
Watch mode — auto-rebuild on file changes |
npm run lint |
Type-check with tsc --noEmit |
npm run package |
Package .vsix extension artifact |
src/
extension.ts # Extension entry point & activation
OpenCodeCli.ts # CLI subprocess wrapper & SDK client
OpenCodeViewProvider.ts # Webview provider & message relaying
webview/
app.ts # Chat UI (Vanilla TypeScript + Tailwind CSS)
styles.css # Tailwind input styles
components/ # Reusable UI components
Contributions are welcome! Here's how to get started:
- Fork the repo and create a branch from
main - Set up your environment (see Development above)
- Make your changes — keep the code style consistent with the existing codebase (vanilla TypeScript, no framework dependencies)
- Run the type checker —
npm run lintto catch type errors - Test manually — press
F5to debug the extension and verify your changes work - Open a pull request targeting
main
- Code style — The project uses vanilla TypeScript + Tailwind CSS. Avoid adding framework dependencies unless absolutely necessary.
- Commits — Write clear, concise commit messages. No strict convention, but descriptive titles help.
- Scope — Keep changes focused. If a PR addresses multiple concerns, consider splitting it.
- Issues — Check existing issues before opening a new one. Use issues for bugs, feature requests, and questions.
Found a bug or have a feature request? Open an issue with a clear description, steps to reproduce (if applicable), and your environment details.
By contributing, you agree that your contributions will be licensed under the MIT License.
This extension runs the opencode CLI locally on your machine. No data is sent to external servers except through the AI providers you configure in the opencode CLI.
MIT