MCPMonkey MCP Server: Extending Userscript Capabilities with Model Context Protocol

Overview: What is MCPMonkey MCP Server?

MCPMonkey is a powerful browser extension that seamlessly integrates Model Context Protocol (MCP) into Violentmonkey, significantly enhancing its capabilities in managing and interacting with AI language models. By bridging the gap between AI environments like Cursor and the web browsers they operate within, MCPMonkey allows for dynamic and context-aware interactions.

🔧 Core Features & MCP Capabilities

MCPMonkey introduces several key features through its implementation of the Model Context Protocol (MCP):

1. Tab Management:

   • Get detailed information about all open browser tabs.
   • Create new tabs with predefined or custom content.
   • Close unwanted or redundant tabs to free up resources and improve browsing performance.
   • Activate specific tabs, making them the active focus for interaction.
   • Duplicate existing tabs, ensuring that users can maintain multiple parallel sessions as needed.

2. Page Style Extraction:

   • Extract and analyze web page styles using the getPageStyles tool. This allows AI applications to capture the visual context of a webpage, providing an additional layer of understanding.
   • Return structured JSON data containing global styles, computed styles, color schemes, and typography details, enabling comprehensive analysis by AI models.

3. Full Compatibility with Userscripts:

   • MCPMonkey maintains full compatibility with existing Violentmonkey userscripts, ensuring that any custom scripting needs can still be accommodated while leveraging advanced MCP features.
   • This seamless integration allows developers to leverage the power of userscripts alongside MCP tools for complex and dynamic interactions.

⚙️ MCP Architecture & Protocol Implementation

MCPMonkey implements both a browserAction tool and a getPageStyles tool via WebSocket communication. These tools allow AI applications to interact with browser resources in a standardized manner, providing a unified interface for various tasks:

WebSocket Communication

• The extension communicates with the server using WebSocket on port 3025, ensuring secure and efficient data transfer.
• This protocol enables real-time interactions between the AI application and the browser environment.

Content Script Bridge

• Secure messaging through content scripts facilitates interaction with web pages. Content scripts can communicate with the main extension background script via secure channels, enabling dynamic updates and configurations based on user or AI actions.

Zod Schema Validation

• Runtime type checking ensures data integrity between different components, reducing potential errors and enhancing system reliability.
• This validation process is crucial for maintaining a consistent and robust communication layer between AI applications and browser extensions.

🚀 Getting Started with Installation

To get MCPMonkey up and running on your browser, follow these steps:

Firefox Installation

1. Build the Project:
   • Ensure you have Node.js and Yarn v1.x installed.
   • Run the following commands to install dependencies and build the project:

     # Install dependencies
     $ yarn
     
     # Watch and compile
     $ yarn build
     

2. Load the Extension Temporarily:
   • Open Firefox and navigate to about:debugging.
   • Click "This Firefox" in the left sidebar.
   • Click "Load Temporary Add-on...".
   • Navigate to the dist folder in your MCPMonkey build directory, select any extension file, and load it.

Cursor Integration

1. Add the MCP Server:

   • In Cursor, go to Settings > Features > MCP Servers.
   • Click the "Add New MCP Server" button.
   • Enter the following details for a standard installation:
     • Name: mcpmonkey-server
     • Type: command
     • Command:

       npx mcpmonkey-server
       

2. Running the Server Manually (If Building from Source):

   • Navigate to the server directory and build it as follows:

     # Navigate to the server directory
     cd mcpmonkey-server
     
     # Install dependencies
     yarn
     
     # Build the server
     yarn build
     
     # Run the server
     node build/index.js
     

   • Alternatively, for debugging with MCP Inspector:

     # Run with MCP inspector for debugging
     npx @modelcontextprotocol/inspector node build/index.js
     

💡 Key Use Cases in AI Workflows

Case 1: Desktop Automation

• Scenario: A developer uses an AI tool to automate routine tasks on the web.
• Implementation:
  • The AI tool communicates with MCPMonkey via WebSocket, allowing it to interact with browser tabs and pages as needed.
  • For example, the AI can instruct MCPMonkey to duplicate a tab containing critical documentation while keeping other work in check.

Case 2: Context-Aware Chatbots

• Scenario: An AI chatbot assists users by providing context-aware responses based on active web sessions.
• Implementation:
  • The chatbot queries MCPMonkey for information about the current browsing session, such as page styles and tab content.
  • Using this data, the AI can generate more relevant and contextually appropriate responses.

🔌 Integration with MCP Clients

MCPMonkey is compatible with several popular AI clients:

• Claude Desktop: Full support including resources, tools, and prompts.
• Continue: Supports all features, providing a seamless integration.
• Cursor: Only supports certain tools due to current limitations in version compatibility.

MCP Client	Resources	Tools	Prompts
Claude Desktop	✅	✅	✅
Continue	✅	✅	✅
Cursor	❌	✅	❌

📊 Performance & Compatibility Matrix

Compatibility with MCP Clients

• Claude Desktop: Fully supported.
• Continue: Fully supported.
• Cursor: Supports a subset of tools.

🛠️ Advanced Configuration & Security

MCPMonkey allows for fine-grained control over server installation and configuration:

Sample MCP Configuration Code

{
  "mcpServers": {
    "[server-name]": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-[name]"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

❓ Frequently Asked Questions (FAQ)

1. How do I ensure secure communication between the MCP server and AI tools?
   • MCPMonkey uses WebSocket for internal communication, which provides a secure and efficient way to transfer data.
2. What are the system requirements for running MCPMonkey on my browser?
   • Ensure you have Node.js version 14 or later and Yarn v1.x installed.
3. Can I use MCPMonkey with multiple AI clients simultaneously?
   • Yes, MCPMonkey supports multiple MCP clients, allowing simultaneous interaction from different tools.
4. How can I troubleshoot common issues when integrating MCP servers?
   • Common issues include incorrect configuration or missing dependencies. Refer to the documentation and community resources for troubleshooting tips.
5. What are the future plans for expanding MCPMonkey's functionality?
   • Future development includes expanded browser access, permission controls, and a community hub.

👨‍💻 Development & Contribution Guidelines

If you wish to contribute to MCPMonkey, follow these guidelines:

1. Environment Setup:
   • Install Node.js from the official website.
   • Use Yarn v1.x for package management.
2. Running the Server Locally:
   • Build and run the server using commands provided in the README.
3. Code Contribution:
   • Fork the repository on GitHub, make your changes, and submit a pull request.

🌐 MCP Ecosystem & Resources

For more information and resources related to MCP tools and scripts:

• https://mcpmonkey.com

MCP Protocol Flow Diagram

graph TD
    A[AI Application] -->|MCP Client| B[MCP Protocol]
    B --> C[MCP Server]
    C --> D[Data Source/Tool]
    style A fill:#e1f5fe
    style C fill:#f3e5f5
    style D fill:#e8f5e8

MCP Client Compatibility Matrix Diagram

graph LR;
  ClaudeDesktop-->|Resources, Tools, Prompts| FullSupport;
  Continue-->|Full Support| FullSupport;
  Cursor-->|Tools Only| LimitedFeatureSet;
  UserNotes[Note: MCPMonkey does not support all features for Cursor.];
  FullSupport -->{Status} Status1;
  LimitedFeatureSet -->{Status} Status2;

This comprehensive documentation positions MCPMonkey as a robust and flexible solution for integrating Model Context Protocol into AI applications, enhancing both performance and functionality in dynamic web environments.