Claude.ai Configuration

This guide explains how to connect the Probo MCP Server to Claude.ai, Anthropic’s web-based interface, enabling Claude to interact with your compliance data from your browser.

Important Note

As of now, Claude.ai’s MCP support is limited and requires specific configurations. This guide covers the current methods available and future possibilities.

Current Status

Claude.ai (the web interface at claude.ai) has experimental MCP support through:

1. Browser Extensions - Third-party extensions that bridge MCP to Claude.ai
2. Proxy Setup - Running a local MCP proxy that Claude.ai connects to
3. API Integration - Using Claude API with MCP via custom implementation

Method 1: Browser Extension (Recommended)

Using MCP Bridge Extension

Several browser extensions enable MCP functionality in Claude.ai:

1. Install an MCP-compatible browser extension (Chrome/Firefox)
2. Configure the extension with your Probo MCP server details
3. The extension intercepts Claude.ai requests and adds MCP capabilities

Configuration Example:

{
  "servers": {
    "probo": {
      "url": "https://your-probo-instance.com/api/mcp",
      "auth": {
        "type": "bearer",
        "token": "your_api_token_here"
      }
    }
  }
}

Available Extensions

Check these resources for MCP-compatible extensions:

• MCP Extension Registry
• Chrome Web Store (search for “MCP” or “Model Context Protocol”)
• Firefox Add-ons (search for MCP support)

Method 2: Local MCP Proxy

Run a local proxy that bridges Claude.ai to your Probo MCP server.

Setup Local Proxy

1. Install the MCP Proxy:

npm install -g @modelcontextprotocol/proxy

2. Configure the Proxy:

Create a mcp-proxy-config.json:

{
  "port": 3000,
  "servers": {
    "probo": {
      "url": "https://your-probo-instance.com/api/mcp",
      "auth": {
        "type": "bearer",
        "token": "your_api_token_here"
      }
    }
  },
  "cors": {
    "origin": "https://claude.ai",
    "credentials": true
  }
}

3. Start the Proxy:

mcp-proxy --config mcp-proxy-config.json

4. Configure Browser:

Install a browser extension or userscript that routes Claude.ai MCP requests through http://localhost:3000.

Security Considerations

When running a local proxy:

• Only allow connections from claude.ai domain
• Use HTTPS for production Probo instances
• Store tokens securely
• Run the proxy only when needed
• Consider using localhost-only binding

Method 3: API Integration

For programmatic access, use the Claude API with MCP:

Python Example

import anthropic
from mcp import MCPClient

# Initialize MCP client for Probo
probo_mcp = MCPClient(
    url="https://your-probo-instance.com/api/mcp",
    auth={"type": "bearer", "token": "your_api_token"}
)

# Initialize Claude API client
claude = anthropic.Anthropic(api_key="your_claude_api_key")

# Use MCP tools with Claude
response = claude.messages.create(
    model="claude-3-5-sonnet-20241022",
    max_tokens=1024,
    tools=probo_mcp.get_tools(),
    messages=[
        {
            "role": "user",
            "content": "List all high-priority risks in my organization"
        }
    ]
)

print(response.content)

JavaScript Example

import Anthropic from '@anthropic-ai/sdk';
import { MCPClient } from '@modelcontextprotocol/sdk';

// Initialize MCP client
const proboMCP = new MCPClient({
  url: 'https://your-probo-instance.com/api/mcp',
  auth: {
    type: 'bearer',
    token: process.env.PROBO_API_TOKEN
  }
});

// Initialize Claude client
const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY
});

// Get available tools
const tools = await proboMCP.getTools();

// Make request with MCP tools
const response = await anthropic.messages.create({
  model: 'claude-3-5-sonnet-20241022',
  max_tokens: 1024,
  tools: tools,
  messages: [
    {
      role: 'user',
      content: 'Show me all open nonconformities'
    }
  ]
});

console.log(response.content);

Limitations

Current limitations when using Claude.ai with MCP:

1. No Native Support - Claude.ai doesn’t natively support MCP yet
2. Requires Workarounds - Browser extensions or proxies needed
3. Limited Functionality - Some MCP features may not work
4. Security Concerns - Browser-based tokens need careful handling
5. Updates Required - Solutions may break with Claude.ai updates

Alternative: Use Claude Desktop

For the best MCP experience, we recommend using Claude Desktop instead of Claude.ai, as it has native MCP support.

Benefits of Claude Desktop:

• Native MCP integration
• No proxy or extensions needed
• Better security for API tokens
• More reliable connection
• Offline capability

Future Developments

Anthropic is working on native MCP support for Claude.ai. When available, configuration will be simpler:

Expected Future Configuration:

1. Navigate to Claude.ai Settings
2. Go to “Connected Apps” or “MCP Servers”
3. Add your Probo instance:
   • Name: Probo
   • URL: https://your-probo-instance.com/api/mcp
   • Token: your_api_token_here
4. Save and start using MCP tools

Stay updated on MCP support:

• Anthropic Changelog
• MCP Specification Updates

Workaround Examples

Using Custom Userscript

Create a userscript (Tampermonkey/Greasemonkey) to inject MCP functionality:

// ==UserScript==
// @name         Probo MCP for Claude.ai
// @namespace    http://your-domain.com/
// @version      1.0
// @description  Add Probo MCP support to Claude.ai
// @match        https://claude.ai/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    const PROBO_MCP_URL = 'https://your-probo-instance.com/api/mcp';
    const PROBO_TOKEN = 'your_api_token_here';

    // Inject MCP functionality
    window.proboMCP = {
        async callTool(toolName, params) {
            return new Promise((resolve, reject) => {
                GM_xmlhttpRequest({
                    method: 'POST',
                    url: `${PROBO_MCP_URL}/tools/${toolName}`,
                    headers: {
                        'Authorization': `Bearer ${PROBO_TOKEN}`,
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(params),
                    onload: (response) => resolve(JSON.parse(response.responseText)),
                    onerror: (error) => reject(error)
                });
            });
        }
    };

    console.log('Probo MCP integration loaded');
})();

Using Bookmarklet

Create a bookmarklet for quick MCP actions:

javascript:(function(){
  const orgId = prompt('Enter Organization ID:');
  fetch('https://your-probo-instance.com/api/mcp/tools/listRisks', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer your_token_here',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ organization_id: orgId })
  })
  .then(r => r.json())
  .then(data => alert(JSON.stringify(data, null, 2)));
})();

Security Best Practices

When using browser-based MCP solutions:

1. Never store tokens in userscripts - Use environment variables or secure storage
2. Use HTTPS only - Never send tokens over HTTP
3. Validate origins - Ensure requests only come from claude.ai
4. Rotate tokens regularly - Browser storage can be compromised
5. Use read-only tokens when possible
6. Clear tokens when done - Don’t leave them in browser memory
7. Monitor access logs - Review API usage regularly

Recommended Approach

Until Claude.ai has native MCP support, we recommend:

1. For Desktop Use: Use Claude Desktop with native MCP support
2. For CLI Use: Use Claude Code for command-line access
3. For IDE Integration: Use VS Code or Cursor
4. For Web Access: Wait for native Claude.ai MCP support or use the API integration method

Support

Need help with Claude.ai integration?

• GitHub Issues - Report issues or request features
• Discord Community - Get help from the community
• Anthropic Support - Claude.ai specific questions

Next Steps

• Try Claude Desktop for native MCP support
• Explore Claude Code for CLI access
• Check out VS Code integration for IDE usage
• View all available MCP tools