Steel Puppeteer MCP server

The Steel MCP Server provides a Model Context Protocol server for LLMs like Claude, allowing them to interact with the web through Puppeteer-based tools and Steel. Based on the Web Voyager framework, it enables Claude to perform web actions like clicking, scrolling, typing, and taking screenshots to help with tasks such as searching for recipes, tracking packages, comparing prices, or filling out forms.

Installation

Prerequisites

• Latest versions of Git and Node.js
• Claude Desktop installed
• (Optional) Steel Docker image for self-hosting
• (Optional) Steel API key for cloud mode (get one here)

Option A: Using Steel Cloud

1. Clone and build the project:

   git clone https://github.com/steel-dev/steel-mcp-server.git
   cd steel-mcp-server
   npm install
   npm run build
   

2. Configure Claude Desktop by editing ~/Library/Application Support/Claude/claude_desktop_config.json:

   {
     "mcpServers": {
       "steel-puppeteer": {
         "command": "node",
         "args": ["path/to/steel-voyager/dist/index.js"],
         "env": {
           "STEEL_LOCAL": "false",
           "STEEL_API_KEY": "YOUR_STEEL_API_KEY_HERE",
           "GLOBAL_WAIT_SECONDS": "1"
         }
       }
     }
   }
   

3. Start Claude Desktop, which will automatically launch the MCP server in Cloud mode.

4. You can view active Steel Browser sessions in your dashboard.

Option B: Using Self-Hosted Steel

1. Ensure your local Steel service is running (using the open-source Steel Docker image).

2. Clone and build the project (if not done already):

   git clone https://github.com/steel-dev/steel-mcp-server.git
   cd steel-mcp-server
   npm install
   npm run build
   

3. Configure Claude Desktop for local mode:

   {
     "mcpServers": {
       "steel-puppeteer": {
         "command": "node",
         "args": ["path/to/steel-voyager/dist/index.js"],
         "env": {
           "STEEL_LOCAL": "true",
           "STEEL_BASE_URL": "http://localhost:3000",
           "GLOBAL_WAIT_SECONDS": "1"
         }
       }
     }
   }
   

4. Start Claude Desktop, which will connect to your local Steel instance.

Quick Install via Smithery

You can also install Steel MCP Server automatically using Smithery:

npx -y @smithery/cli install @steel-dev/steel-mcp-server --client claude

Using the MCP Server

Once configured and running, Claude can use several tools to interact with web pages:

Available Tools

• navigate

  • Navigate to any URL
  • Example input: url: "https://example.com"

• search

  • Perform a Google search
  • Example input: query: "steel browser automation"

• click

  • Click elements using numbered labels
  • Example input: label: 5

• type

  • Type text into input fields
  • Example inputs:
    • label: 3
    • text: "Hello world"
    • replaceText: true (optional)

• scroll_down

  • Scroll down the page
  • Example input: pixels: 500 (optional)

• scroll_up

  • Scroll up the page
  • Example input: pixels: 300 (optional)

• go_back

  • Navigate to the previous page

• wait

  • Wait for content to load
  • Example input: seconds: 5

• save_unmarked_screenshot

  • Capture page without annotation markers
  • Example input: resourceName: "shopping_results" (optional)

Understanding the Interface

When interacting with pages, Steel MCP Server adds visual overlays:

• Interactive elements receive unique numbered labels
• Colored boxes outline element boundaries
• Use these numbers when specifying elements for click or type operations

Configuration Options

Steel MCP Server can run in either "Local" or "Cloud" mode through these environment variables:

Troubleshooting

If you encounter issues:

1. Verify your Steel API key (cloud mode) or check that your local Steel instance is running
2. Add delay with GLOBAL_WAIT_SECONDS if pages aren't rendering correctly
3. Ensure pages fully load before interaction
4. You may need to manually release sessions
5. Prompting Claude effectively improves performance
6. Use the session viewer to diagnose issues
7. Be aware that Claude may slow down after 15-20 browser actions as context fills with images

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.