Brand Logo
Log in
Back to guides

Connect your AI coding assistants with external tools via MCP

The Rundown: Connect your favorite AI coding assistants like Cursor or Windsurf to powerful external tools using MCP servers to tackle more complex coding tasks.

🧰 Who is this useful for:

  • Developers who need to access external data while coding
  • Software engineers working on web scraping projects
  • Anyone who wants to extend their AI coding assistant's capabilities
  • Teams collaborating across different tools and platforms


STEP 1: Choose Your AI Coding Assistant

First, decide which AI coding assistant you want to enhance. This tutorial covers both Windsurf with Cascade and Cursor, two popular options with strong AI capabilities. Both tools allow you to extend functionality through MCP servers.

For Windsurf, you'll be working with Cascade, their integrated AI assistant. For Cursor, you'll configure the tool directly through its settings for its AI agent to use.


STEP 2: Configure MCP in Windsurf

In Windsurf, look for the tools icon (hammer symbol) in the Cascade interface. Click on it to open the MCP servers panel. If this is your first time, you'll see "0 available MCP servers" displayed.

Click the "Configure" button to open the MCP configuration file (mcp_config.json). This is where you'll add the server connections.

The configuration follows a simple JSON structure:

{

  "mcpServers": {

    "mcp-server-firecrawl": {

      "command": "npx",

      "args": ["-y", "firecrawl-mcp"],

      "env": {

        "FIRECRAWL_API_KEY": "YOUR_API_KEY_HERE"

      }

    }

  }

}

image-1291.png


Replace "YOUR_API_KEY_HERE" with your actual API key from the service you're connecting to. For this tutorial, we're using FireCrawl, which provides enhanced web scraping capabilities.


STEP 3: Add MCP Server in Cursor

If you're using Cursor instead, the process is slightly different but equally straightforward:

  1. Click the gear icon in the top-right corner to open Settings
  2. Navigate to the "Features" section in the sidebar
  3. Scroll down until you find "MCP Servers"
  4. Click the "+ Add new MCP server" button

In the configuration dialog:

  • Enter a name for your server (e.g., "firecrawl-mcp")
  • Select "Command" as the type
  • In the command field, enter: env FIRECRAWL_API_KEY=your-api-key npx -y firecrawl-mcp

Make sure to replace "your-api-key" with your actual API key from FireCrawl or whichever service you're connecting to.

image-1292.png


STEP 4: Using Your Enhanced AI Assistant

Once configured, you'll see your MCP server listed with all available tools. For FireCrawl, you'll see options like scrape, map, crawl, search, and more.

To use these tools, simply prompt your AI assistant with a request that leverages the MCP capabilities. For example:

  • "Access grok.com via FireCrawl MCP"
  • "Scrape product information from this e-commerce site"
  • "Generate a site map for this domain"

Your AI assistant will now use the configured MCP server to fulfill these requests, giving you extended capabilities beyond what's built into the AI coding tool itself.

image-1293.png


Pro tip: Most MCP tool providers offer detailed documentation on GitHub repositories. Check these resources for specific commands and capabilities available for each tool.