se-cli — Browser Automation

A Visual Studio Code extension for se-cli, the token-efficient Selenium browser automation CLI for AI agents and humans.

This extension brings se-cli into VS Code: a sidebar browser panel that renders aria snapshots and screenshots, a status bar that reflects daemon state, one-click commands for common browser actions, and automatic registration of the se-cli MCP server so Copilot agents can drive the browser directly.

Inspired by the microsoft/playwright-vscode extension, adapted for se-cli's short-lived CLI + long-lived daemon architecture.

Features

• MCP server integration — se-cli is registered as a Model Context Protocol server via contributes.mcpServers, exposing 40+ browser automation tools (navigate, click, fill, snapshot, screenshot, assertions, network mocking, …) to VS Code agents.
• Browser panel — a webview in the activity bar showing the last aria snapshot as a tree, the last screenshot, quick action buttons, and a command history.
• Status bar — live daemon status (running browser / stopped). Click to open a quick pick of all commands.
• Commands — open/close browser, navigate, snapshot, screenshot, click, fill, run command, and check daemon status.
• Auto-snapshot — optionally take an aria snapshot after every navigation or interaction so the panel always reflects the current page.
• Works with or without a global install — uses a configured se-cli binary, a global install on PATH, or falls back to npx @browsers-cli/se-cli.

Requirements

• VS Code 1.103.0 or newer.

• Node.js 18+ (required by se-cli and npx).

• se-cli itself is not bundled. Install it globally for the best experience:

  npm install -g @browsers-cli/se-cli
  

  If se-cli is not found, the extension falls back to npx -y @browsers-cli/se-cli automatically (the first run may take a moment to download the package).

• A supported browser: Google Chrome, Microsoft Edge, or Mozilla Firefox.

Installation

From the VS Code Marketplace (coming soon)

Search for "se-cli" in the Extensions view (Ctrl+Shift+X).

From source (development)

git clone https://github.com/se-cli/se-extension-vscode.git
cd se-extension-vscode
npm install
npm run build

Then press F5 in VS Code to launch an Extension Development Host with the extension loaded, or package a .vsix:

npm run package      # produces se-extension-vscode-0.1.0.vsix
code --install-extension se-extension-vscode-0.1.0.vsix

From a .vsix

code --install-extension se-extension-vscode-0.1.0.vsix

Usage

1. Open the se-cli icon in the activity bar to reveal the browser panel.
2. Run se-cli: Open Browser from the command palette or the panel toolbar.
3. Use se-cli: Navigate to URL, then se-cli: Take Aria Snapshot to inspect the page. Element refs (e1, e2, …) shown in the snapshot can be used with se-cli: Click Element and se-cli: Fill Input.
4. Watch the status bar for daemon state; click it for a quick command menu.

Snapshots & screenshots

The aria snapshot is a YAML-like accessibility tree annotated with element refs. Use those refs to target subsequent click / fill / hover commands without writing CSS selectors. Screenshots are saved to <workspace>/.se-cli/ and rendered inline in the panel.

Configuration

Open Settings and search for se-cli, or edit settings.json directly.

Example settings.json:

{
  "se-cli.browser": "edge",
  "se-cli.headless": false,
  "se-cli.session": "demo"
}

Commands

MCP server integration

The se-cli MCP server is declared in package.json under contributes.mcpServers:

"mcpServers": [
  {
    "label": "se-cli",
    "command": "npx",
    "args": ["-y", "@browsers-cli/se-cli", "mcp-server"],
    "scope": "workspace"
  }
]

This exposes every se-cli browser tool to VS Code's agent/MCP integration. You can also configure it manually in .vscode/mcp.json:

{
  "servers": {
    "se-cli": {
      "command": "npx",
      "args": ["-y", "@browsers-cli/se-cli", "mcp-server"]
    }
  }
}

See the se-cli MCP guide for the full list of 40+ tools (navigation, interaction, assertions, network mocking, storage, tabs, and more).

Architecture

se-extension-vscode/
├── package.json              # Extension manifest (commands, config, MCP, views)
├── tsconfig.json
├── media/
│   ├── icon.png              # Extension marketplace icon (256x256 PNG)
│   └── se-cli.svg            # Activity bar icon
├── assets/
│   └── img/                  # Logo and branding assets (SVG)
└── src/
    ├── extension.ts          # Entry point: commands, status bar, wiring
    ├── se-cli-runner.ts      # Spawns se-cli / npx, captures output
    └── webview-provider.ts   # Browser panel (snapshots, screenshots, history)

The extension is a thin client over the se-cli CLI. Each command spawns se-cli <args> (or npx -y @browsers-cli/se-cli <args>), which forwards the request to the long-lived se-cli daemon that holds the WebDriver instance. The daemon persists independently of the extension, so closing VS Code does not kill an active browser session.

VS Code ──(spawns)──> se-cli ──(JSON line over socket)──> daemon ──(WebDriver)──> browser
   │                                                           ▲
   └──(MCP over stdio)──> se-cli mcp-server ──────────────────┘

Related

• se-cli — https://github.com/se-cli/se-cli
• se-mcp — https://github.com/se-cli/se-mcp
• Homepage — https://se-cli.github.io/se-site/
• npm — https://www.npmjs.com/package/@browsers-cli/se-cli

License

Apache-2.0. See LICENSE.