MCP Server for Windsurf/Roocode: Model Context Protocol (MCP) Integration for Image Generation and Web Scraping

Overview: What is MCP Server for Windsurf/Roocode?

The MCP Server for Windsurf/Roocode is a specialized server designed to enable AI applications like Claude Desktop, Continue, Cursor, and others to connect to specific data sources and tools through the Model Context Protocol (MCP). This server integrates advanced capabilities such as image generation using Flux Pro models and web scraping with ScrapeGraph API. By leveraging MCP, developers can enhance their AI workflows, enabling seamless integration of diverse applications into a unified framework.

🔧 Core Features & MCP Capabilities

The MCP Server for Windsurf/Roocode offers robust features that are crucial for various AI application use cases:

1. Image Generation via Flux Pro:

   • The server supports generating images using the powerful Flux Pro model.
   • Users can create unique and high-quality images by providing detailed prompts, which are then processed through the server to produce visually appealing results.

2. Web Scraping with ScrapeGraph API:

   • Web scraping capabilities allow for efficient content extraction from webpages.
   • APIs such as extract_webpage_content, markdownify_webpage, and scrape_webpage enable developers to retrieve, clean, and organize data from the web.

3. AI-Powered Content Extraction:

   • Utilizes artificial intelligence to intelligently identify and extract key content elements.
   • Offers customization through different cleaning levels (light, medium, aggressive), ensuring that the extracted content is clean and relevant.

4. Advanced Data Processing Options:

   • Supports generating documentation, performing sentiment analysis, extracting structured data, and more with ease. -Graceful error handling mechanisms ensure robustness in data extraction processes, even under challenging circumstances.

⚙️ MCP Architecture & Protocol Implementation

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

MCP Client	Resources	Tools	Prompts	Status
Claude Desktop	✅	✅	✅	Full Support
Continue	✅	✅	✅	Full Support
Cursor	❌	✅	❌	Tools Only

The compatibility matrix illustrates the status of supported MCP clients, indicating full support for resources and tools while noting limitations in prompt generation.

🚀 Getting Started with Installation

Pre-requisites

1. Git installed on your machine.
2. Python environment set up to install necessary dependencies.

Steps to Get Started:

1. Clone the Project Repository:

   git clone https://github.com/bananabit-dev/mcp.git
   cd mcp
   

2. Create and Activate Virtual Environment:

   python -m venv .venv
   source .venv/bin/activate  # On Windows: .venv\Scripts\activate
   

3. Install the Required Packages:

   pip install -r requirements.txt
   

4. Set Up Environment Variables:

   cp .env.example .env
   

   Edit .env to add your API keys:

   AIMLAPI_KEY=your_flux_pro_api_key
   SGAI_API_KEY=your_scrapegraph_api_key
   

5. Configure MCP Server in Windsurf:

   • Add the following configuration to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "bananabit-mcp": {
      "command": "/absolute/path/to/your/.venv/bin/python",
      "args": ["-m", "app.mcp_server"],
      "cwd": "/absolute/path/to/mcp",
      "env": {
        "PYTHONPATH": "/absolute/path/to/mcp",
        "AIMLAPI_KEY": "${env:AIMLAPI_KEY}",
        "SGAI_API_KEY": "${env:SGAI_API_KEY}"
      }
    }
  }
}

6. Load the MCP Server in Windsurf:
   • Click the hammer icon and then select "Refresh" to load the configuration.

💡 Key Use Cases in AI Workflows

1. Creating Visually Appealing Content:

   • Developers can use the image generation capabilities to create complex and detailed visuals for their applications.

   User: Generate a cozy living room with anime style.
   Assistant: I'll help you generate an anime-style living room!
   [Generated image saved as cozy_living_room.jpg]
   

2. Content Extraction for Documentation:

   • Use web scraping to extract clean and structured content from online documentation.

   # Creating local documentation from online sources
   content = await markdownify_webpage(
       url="https://example.com/tutorials",
       clean_level="medium"
   )
   with open("docs/tutorials.md", "w") as f:
       f.write(content)
   

🔌 Integration with MCP Clients

The MCP Server for Windsurf/Roocode supports integration with popular AI clients such as Claude Desktop, Continue, and Cursor. By utilizing the Model Context Protocol, users can easily extend their applications' capabilities to include image generation and web scraping functionalities.

Example: Image Generation with Claude Desktop

User: Generate a cozy kawaii living room in anime style.
Assistant: Sure! Here’s what your living room might look like:
[Image of a cozy kawaii living room in anime style]

📊 Performance & Compatibility Matrix

The server performs optimally across a range of platforms and tools. The MCP client compatibility matrix provides detailed information on the supported clients, resources, and tools.

🛠️ Advanced Configuration & Security

Setting Up Environment Variables

Ensure that environment variables are correctly set up for secure API key handling:

AIMLAPI_KEY=your_flux_pro_api_key
SGAI_API_KEY=your_scrapegraph_api_key

MCP Configuration Code Sample:

{
  "mcpServers": {
    "bananabit-mcp": {
      "command": "/absolute/path/to/your/.venv/bin/python",
      "args": ["-m", "app.mcp_server"],
      "cwd": "/absolute/path/to/mcp",
      "env": {
        "PYTHONPATH": "/absolute/path/to/mcp",
        "AIMLAPI_KEY": "${env:AIMLAPI_KEY}",
        "SGAI_API_KEY": "${env:SGAI_API_KEY}"
      }
    }
  }
}

Best Practices

• Rate Limiting: Respect website rate limits and add delays between requests.
• Error Handling: Implement robust error handling mechanisms.
• Content Cleaning: Customize the cleaning level based on the quality of the web content.

❓ Frequently Asked Questions (FAQ)

1. Q: How do I secure my API keys?
   • A: Use environment variables to store sensitive information securely and avoid hardcoding them in your codebase or configuration files.
2. Q: Can I integrate other tools besides Flux Pro and ScrapeGraph?
   • A: Yes, the MCP protocol is designed to be flexible and can support integration with a wide range of tools by providing the necessary APIs and configurations.
3. Q: What are common rate limit issues when using these services?
   • A: Be mindful of the quotas provided by API providers and ensure your requests do not exceed the allowed limits, which can lead to blocked access or temporary suspensions.
4. Q: How does content cleaning impact performance?
   • A: Customizing the cleaning process can improve data quality but may increase processing time. It is recommended to test different levels for optimal results.
5. Q: Are there any limitations I should be aware of when using web scraping?
   • A: Always respect website terms of service and ensure that your scraping activities comply with legal requirements.

👨‍💻 Development & Contribution Guidelines

Contributions are welcome! If you'd like to contribute, please follow these guidelines:

1. Fork the Repository: Click the 'Fork' button to create a copy in your GitHub account.
2. Create a New Branch: Use git checkout -b feature-branch-name to create and switch to a new branch.
3. Commit Your Changes: Ensure that any changes adhere to coding standards and follow our commit guidelines.
4. Push to Your Repository: Push the committed branches to your forked repository with git push origin feature-branch-name.
5. Create a Pull Request: Go to GitHub and create a pull request, linking it for discussion and feedback.

🌐 MCP Ecosystem & Resources

For further information and support, visit the MCP Protocol documentation or join our community forums.

---

This comprehensive documentation provides detailed insights into setting up, using, and customizing an MCP server that integrates advanced AI capabilities for image generation and web scraping. By leveraging this MCP server, developers can enhance their applications with robust and flexible tools to meet a wide range of use cases.