ACP Pro - One VS Code Sidebar for Every AI Coding Agent

· 4 min read Đọc bài này bằng tiếng Việt

A unified chat interface for Claude Code, Copilot, Gemini, Codex, and any agent that speaks the Agent Client Protocol.


The problem with one-extension-per-agent

If you bounce between Claude Code, GitHub Copilot, Gemini CLI, and the rest, your editor sidebar starts to look like a browser bookmark bar. Each agent ships its own VS Code extension, with its own UI conventions, its own session model, its own keybindings. You learn five different “stop” buttons. Tool calls render five different ways. Your cost telemetry lives in five different places.

I wanted one panel. One tab bar. One way to read a tool call. The agent should be a dropdown, not a separate extension.

That is ACP Pro.

ACP Pro chat view with streamed tool calls and inline diff

What it is

ACP Pro is a VS Code extension that speaks the Agent Client Protocol (ACP) — a small JSON-RPC 2.0 schema that any agent can implement. ACP defines how a client (the editor) and an agent (Claude, Copilot, Gemini, …) negotiate sessions, stream messages, request file edits, and run tools.

Because every supported agent speaks the same protocol, the UI doesn’t have to know which one you picked. You launch a tab, choose an agent, and the same chat shell renders the same shape of streamed events — text chunks, thought chunks, tool calls, plans, diffs.

Out of the box, nine agents are wired up:

Agent Command
Claude Code npx @agentclientprotocol/claude-agent-acp@latest
GitHub Copilot npx @github/copilot-language-server@latest --acp
Gemini CLI npx @google/gemini-cli@latest --experimental-acp
Qwen Code npx @qwen-code/qwen-code@latest --acp --experimental-skills
Auggie CLI npx @augmentcode/auggie@latest --acp
Qoder CLI npx @qoder-ai/qodercli@latest --acp
Codex CLI npx @zed-industries/codex-acp@latest
OpenCode npx opencode-ai@latest acp
OpenClaw npx openclaw acp

You can add your own — anything that speaks ACP over stdio or HTTP slots in via a settings.json entry.

What it actually feels like

Multi-tab sessions

The biggest quality-of-life win. Each tab is an independent agent session with its own history, model, and permission mode. You can have Claude refactoring one file while Gemini answers a research question and Copilot writes a test — all in parallel, all in the same panel.

Multiple agent tabs running in parallel

The empty-state view lists every configured agent as a button, so spinning up a new tab is a single click.

Streamed tool calls with inline diffs

When an agent calls read, edit, bash, or web_search, the tool invocation streams in real time as a collapsible card. File edits render as inline diffs right where the tool call appeared — no jumping to a separate panel.

Plans get their own collapsible task panel alongside the chat, so you can watch a multi-step agent tick through its work.

Permission modes per session

default, acceptEdits, plan, bypassPermissions — pick per tab, override per tool call. If you want one tab on full auto and another on careful manual review, you don’t have to context-switch.

Remote session sharing

This is the one I’m most attached to. ACP Pro embeds a tiny HTTP + WebSocket bridge. Toggle it on and you get a 6-character share code:

http://<host>:<port>?code=<shareCode>

Open that URL in any browser and you see your live tabs in a read-only view. Pair it with VS Code’s built-in port forwarding (Tunnels / Codespaces / SSH) and your agent session is shareable over the internet.

I use it to peek at long-running tasks from my phone. It’s also great for pair sessions — the other person watches the agent work without needing the extension installed.

Bridge share view in a browser

Try it

Install from the VS Code Marketplace, click the ACP Pro sparkle icon in the activity bar, and start typing. The default agent is Claude Code — first run takes a moment while npx caches the agent package, then it’s instant.

If you have an agent I don’t ship with, drop a config in settings.json:

{
  "acpPro.agents": {
    "My Local Agent": {
      "command": "node",
      "args": ["/path/to/my-agent.js", "--acp"],
      "env": { "MY_AGENT_API_KEY": "sk-..." }
    }
  }
}

Built with Lit, the Agent Client Protocol, and a lot of pnpm build.

Comments

  1. Loading comments…