​
Integrating Stagehand with Cursor Code Editor

This guide will walk you through setting up Stagehand’s MCP (Model Context Protocol) server with Cursor Code Editor, enabling AI-powered web automation capabilities directly from your coding environment.

​
Prerequisites

​
Installation Steps

​
1. Install the Stagehand MCP Server

First, you need to install the Stagehand MCP server from the GitHub repository:

# Clone the repository
git clone https://github.com/browserbase/mcp-server-browserbase.git

# Navigate to the stagehand directory
cd mcp-server-browserbase/stagehand

# Install dependencies
npm install

# Build the project
npm run build

​
2. Configure Cursor to Use Stagehand

Once you have installed the Stagehand MCP server, you need to configure Cursor to use it:

  1. Open Cursor and click on the settings (gear icon) in the top right corner
  2. Click on the “MCP” tab in the settings
  3. Click the blue button that says “Add New Global MCP Server”
  4. Add the following configuration (replace the paths and API keys with your own):
{
  "mcpServers": {
    "stagehand": {
      "command": "node",
      "args": ["/path/to/mcp-server-browserbase/stagehand/dist/index.js"],
      "env": {
        "BROWSERBASE_API_KEY": "your_browserbase_api_key",
        "BROWSERBASE_PROJECT_ID": "your_browserbase_project_id",
        "OPENAI_API_KEY": "your_openai_api_key"
      }
    }
  }
}

​
3. Save and Refresh

After adding the configuration, save your changes and check the MCP tab Cursor see if the server is connected.

​
Available Commands

Once integrated with Cursor, your AI assistant can use the following Stagehand commands:

  • stagehand_navigate: Navigate to a URL in the browser
  • stagehand_act: Perform an action on a web page element
  • stagehand_extract: Extract structured data from the web page
  • stagehand_observe: Observe elements on the web page
  • screenshot: Take a screenshot of the current page

​
Example Usage

Here’s how you can use Stagehand with Cursor:

  1. In Cursor, ask your AI assistant to perform a web task:

    Can you navigate to the React documentation and extract the main concepts?

  2. The AI will use Stagehand’s commands to:

    • Navigate to the React documentation website
    • Interact with the page if necessary
    • Extract the relevant information
    • Return the results directly in your coding environment

​
Example Workflow

Here’s a sample workflow you might follow:

You: Can you get me the current price of Bitcoin and create a simple React component to display it?

Cursor: I'll use Stagehand to fetch the current Bitcoin price and then create a React component for you.

[AI uses stagehand_navigate to go to CoinMarketCap]
[AI uses stagehand_observe to locate the Bitcoin price element]
[AI uses stagehand_extract to get the current price]
[AI takes a screenshot to confirm the data]

Cursor: I found that Bitcoin is currently trading at $64,235.17. Here's a React component to display this information:

function BitcoinPriceDisplay() {
  const [price, setPrice] = useState("$64,235.17");
  // Add real-time updates with useEffect and fetch...
  
  return (
    <div className="bitcoin-container">
      <h2>Bitcoin Current Price</h2>
      <p className="price">{price}</p>
      <small>Last updated: {new Date().toLocaleString()}</small>
    </div>
  );
}

​
Viewing Browser Sessions

You can view your browser sessions in Browserbase by going to the Browserbase dashboard and clicking on the “Sessions” tab.

​
Troubleshooting

If you encounter issues with the integration:

  1. Ensure the MCP server is running
  2. Check that your environment variables in the configuration file are set correctly
  3. Verify that the path to the MCP server’s index.js file is correct
  4. Check the Cursor logs for any error messages
  5. Make sure your Browserbase and OpenAI API keys are valid

​
Additional Resources

Join the Stagehand Slack community for support and to connect with other users.