MCP Server Setup Guide

Harness the power of Anthropic's Model Context Protocol (MCP) to bridge your local AI assistant directly to your Trace execution instances. Give your AI eyes into your live browser and logic.

Step 1: Generate an API Key

To start, your AI agent needs to authenticate with the Trace network.

1. Log in to the Trace Console.
2. Navigate to your project's settings or API Keys section (inside the app).
3. Click Generate API Key.
4. Copy the resulting key (it generally starts with sk_live_). Keep it secure and do not commit it to version control.

Step 2: Connect Your AI Agent

With your API key ready, you can now add the Trace MCP server to your preferred AI coding environment. Find your tool below:

Claude Desktop

Open your Claude Desktop application settings file. You can find it at:

• Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\\Claude\\claude_desktop_config.json

Add the Trace server into the mcpServers object:

{
  "mcpServers": {
    "trace": {
      "command": "npx",
      "args": ["-y", "@gettrace/mcp@latest"],
      "env": {
        "TRACE_API_KEY": "sk_live_YOUR_API_KEY_HERE"
      }
    }
  }
}

Restart the Claude Desktop application after saving the file.

Cursor

To add Trace to Cursor, open Cursor Settings and navigate to Features > MCP Servers. Add a new server with the following details:

• Name: trace
• Type: command
• Command: npx -y @gettrace/mcp@latest
• Under Environment Variables, add TRACE_API_KEY and paste your API key as the value.

Windsurf

Open your Windsurf MCP configuration file located at ~/.codeium/windsurf/mcp_config.json and add the server:

{
  "mcpServers": {
    "trace": {
      "command": "npx",
      "args": ["-y", "@gettrace/mcp@latest"],
      "env": {
        "TRACE_API_KEY": "sk_live_YOUR_API_KEY_HERE"
      }
    }
  }
}

Step 3: Start Debugging

Once the configuration is complete, Trace is active. To verify the connection, you can ask your AI agent a simple prompt:

Example prompts you can use with Trace MCP:

• "Click the 'Submit' button on the current page and tell me why the API request failed in the network log."
• "Run a full diagnostic on my current localhost tab. Are there any hidden layout errors or React hydration mismatches?"
• "I'm seeing a blank screen. Look at the browser console logs and tell me what threw an exception."