Prerequisites

Before getting started, make sure you have the following:

• Visual Studio Code installed
• An MCP-compatible VS Code extension (Claude Code, Cline, Roo Code, etc.)
• Node.js 18+ (for npx command)
• Your Scrapfly API key (only if not using OAuth2)

Setup Instructions

This guide covers the generic pattern for connecting Scrapfly MCP to any MCP-compatible VS Code extension. Setup takes less than 5 minutes.

1. Install an MCP-Compatible Extension

   First, install a VS Code extension that supports MCP (Model Context Protocol):

   Popular MCP-compatible extensions:

   • Claude Code - Official Anthropic extension
   • Cline - Autonomous AI coding assistant
   • Roo Code - AI pair programming extension
   • Or any other extension that supports MCP servers
   Tip: Check Extension Documentation

   Each MCP-compatible extension may have specific setup requirements. Check the extension's documentation for any additional prerequisites.

2. Locate VS Code Settings File

   MCP servers are configured in VS Code's settings.json file. Choose your preferred access method:

   1. Press Ctrl+, (Windows/Linux) or ⌘+, (macOS)
   2. Search for "MCP Servers"
   3. Click "Edit in settings.json"

   1. Press Ctrl+Shift+P (Windows/Linux) or ⌘+Shift+P (macOS)
   2. Type "Preferences: Open User Settings (JSON)"
   3. Press Enter

   Windows:

   macOS:

   Linux:
   Tip: User vs Workspace Settings

   Use User Settings to make Scrapfly available in all VS Code projects. Use Workspace Settings to configure Scrapfly for a specific project only.

3. Add Scrapfly MCP Server

   Select your preferred authentication method:

   {
     "mcpServers": {
       "scrapfly": {
         "command": "npx",
         "args": [
           "mcp-remote",
           "https://mcp.scrapfly.io/mcp"
         ]
       }
     }
   }

   How it works: Your MCP extension displays an OAuth2 URL. Click it to authorize in your browser - happens once, then managed automatically. See project-scoped setup for team collaboration.

   {
     "mcpServers": {
       "scrapfly": {
         "command": "npx",
         "args": [
           "mcp-remote",
           "https://mcp.scrapfly.io/mcp?key="
         ]
       }
     }
   }

   Sign up for free to get your API key.

   Advanced: Multiple MCP Servers

   You can configure multiple MCP servers in the same settings file:

   {
     "mcpServers": {
       "scrapfly": {
         "command": "npx",
         "args": ["mcp-remote", "https://mcp.scrapfly.io/mcp"]
       },
       "another-mcp-server": {
         "command": "npx",
         "args": ["another-mcp-package"]
       }
     }
   }
4. Reload VS Code Window

   Apply the MCP configuration by reloading:

   • Press Ctrl+Shift+P (Windows/Linux) or ⌘+Shift+P (macOS)
   • Type "Reload Window" and press Enter
   Alternative: Restart VS Code

   You can also completely close VS Code and reopen it to ensure all changes are applied.

5. Verify the Integration

   Confirm Scrapfly MCP is working with your extension:

   1. Open your MCP-compatible extension's interface (sidebar, panel, or chat)
   2. Look for the hammer icon (🔨) or MCP tools indicator
   3. Try a test prompt: "Use Scrapfly to scrape https://news.ycombinator.com and show the top 5 posts"
   4. Your extension should call Scrapfly MCP tools and return the results
   Pro Tip: Most MCP-compatible extensions will automatically call the scraping_instruction_enhanced tool to get required authentication parameters before making scraping requests.

Example Prompts

Troubleshooting

Next Steps

• Explore available MCP tools and their capabilities
• See real-world examples of what you can build
• Learn about authentication methods in detail
• Read the FAQ for common questions