Skip to main content

MCP Server

Integrate browser testing with AI agents like Claude Desktop.

What is MCP?​

Model Context Protocol server enables AI agents to trigger browser tests on your web applications.

Quick Setup​

1. Get API Key​

  1. Sign in at debugg.ai
  2. Go to Settings → API Keys
  3. Generate new API key

2. Claude Desktop Integration​

Add to your Claude Desktop config:

~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "debugg-ai-mcp": {
      "command": "npx",
      "args": ["-y", "@debugg-ai/debugg-ai-mcp"],
      "env": {
        "DEBUGGAI_API_KEY": "your_api_key_here",
        "DEBUGGAI_LOCAL_PORT": "3000"
      }
    }
  }
}

3. Test Integration​

In Claude Desktop:

Test my signup page form validation

Claude will trigger DebuggAI to run the test.

Environment Variables​

Required:

DEBUGGAI_API_KEY=your_key          # From debugg.ai settings
DEBUGGAI_LOCAL_PORT=3000           # Your app port

Optional:

TEST_USERNAME_EMAIL=test@example.com
TEST_USER_PASSWORD=testpassword123
REPO_NAME=my-project
BRANCH_NAME=main

MCP Tool: debugg_ai_test_page_changes​

Parameters​

  • description (required) - Test description
  • localPort (optional) - Default: 3000
  • repoName - Project context
  • branchName - Git branch
  • repoPath - Repository path
  • filePath - Specific file context

Example Usage​

Use debugg_ai_test_page_changes to test:
"User login flow with remember me checkbox"

Docker Deployment​

For production environments:

Dockerfile
FROM node:18-alpine
WORKDIR /app
RUN npm install -g @debugg-ai/debugg-ai-mcp
EXPOSE 3000
CMD ["debugg-ai-mcp"]
docker build -t debugg-ai-mcp .
docker run -e DEBUGGAI_API_KEY=your_key debugg-ai-mcp

Advanced Configuration​

Environment Tuning​

For specialized use cases, you can adjust behavior via environment variables:

# Test timing
DEBUGGAI_TIMEOUT=30000             # Test timeout (default: 30s)
DEBUGGAI_RETRIES=2                 # Retry attempts (default: 2)

# Optional project context
REPO_NAME=my-project               # Project name
BRANCH_NAME=main                   # Git branch
REPO_PATH=/path/to/repo            # Repository path

AI Agent Integration Examples​

With Claude​

I need to test my e-commerce checkout flow. 
Use debugg_ai_test_page_changes to verify:
1. Add item to cart
2. Proceed to checkout
3. Fill payment form
4. Complete order

With Custom Agents​

const testResult = await mcpClient.callTool('debugg_ai_test_page_changes', {
  description: 'Test product search and filtering',
  localPort: 3000,
  repoName: 'ecommerce-app'
});

Results​

Test results include:

  • Pass/fail status
  • Screenshots
  • Performance metrics
  • Error details
  • Web dashboard link

Troubleshooting​

MCP server not starting?

  • Verify API key is valid
  • Check localhost port is available
  • Review Claude Desktop logs

Tests not triggering?

  • Restart Claude Desktop
  • Verify config file syntax
  • Check environment variables

Connection issues?

  • Ensure firewall allows localhost access
  • Verify app is running on specified port