Hyperbrowser MCP Server for VS Code: Setup & Config

What you can do with Hyperbrowser in VS Code

Pick it when an assistant needs both web extraction and a choice of cloud browser agents.

• Crawl linked pages for content collection
• Convert webpage content into schema-shaped data
• Delegate interactive tasks to cloud browser agents

Before you start: Hyperbrowser in VS Code

• npx
• A Hyperbrowser API key
• An MCP-compatible client

The README supplies client configurations for Cursor, Windsurf, and Claude Desktop. A source checkout can instead be built with npm and launched from dist/server.js.

Hyperbrowser VS Code configuration

1. Choose VS Code configuration scope

   For Hyperbrowser MCP Server, open Workspace: .vscode/mcp.json. Merge into servers; preserve existing inputs.

2. Add Hyperbrowser MCP Server to VS Code

   Use the mcp-hyperbrowserai entry below in servers. Keep Hyperbrowser MCP Server's documented stdio connection fields and your other VS Code entries.

3. Check Hyperbrowser MCP Server in VS Code

   Hyperbrowser MCP Server: Start in VS Code’s MCP controls; inspect output and trust prompts.

{
  "servers": {
    "mcp-hyperbrowserai": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "hyperbrowser-mcp"
      ],
      "env": {
        "HYPERBROWSER_API_KEY": "<Hyperbrowser API key>"
      }
    }
  }
}

Hyperbrowser tools available to VS Code

Hyperbrowser's stored tool list documents 10 tools; compare it with VS Code's connected tool list, because the stored list is not a live check.

scrape_webpage

Look for scrape_webpage among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

Retrieve one page as text, HTML, links, or screenshots with browser options.

crawl_webpages

Look for crawl_webpages among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

Collect content from linked pages starting at a selected URL.

extract_structured_data

Look for extract_structured_data among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

Extract webpage information according to a supplied schema.

browser_use_agent

Look for browser_use_agent among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

openai_computer_use_agent

Look for openai_computer_use_agent among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

claude_computer_use_agent

Look for claude_computer_use_agent among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

Delegate complex browser interactions to Claude computer use.

search_with_bing

Look for search_with_bing among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

Find web results through Bing.

create_profile

Look for create_profile among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

delete_profile

Look for delete_profile among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

list_profiles

Look for list_profiles among VS Code's agent-mode tools after starting Hyperbrowser through the MCP controls.

Hyperbrowser: full stored tool descriptions

Troubleshooting Hyperbrowser in VS Code

• Make npx hyperbrowser-mcp (Node.js/npm) available in the workspace, container, or remote environment hosting Hyperbrowser MCP Server. Start through VS Code's MCP controls; inspect output and trust prompts.
• For Hyperbrowser MCP Server, keep HYPERBROWSER_API_KEY out of version control; VS Code documents input variables and secret handling.
• Hyperbrowser MCP Server uses stdio here: VS Code must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
• Known limitation: Requires a Hyperbrowser API key
• Known limitation: The MCP toolset exposes only a subset of Hyperbrowser API features
• General VS Code troubleshooting lives in the /clients/vscode guide.

Frequently asked questions