Bright Data Web MCP in VS Code and Kilo Code

In this tutorial, you will learn:

• What Kilo Code is, and why it’s a powerful AI coding assistant for VS Code.
• Why integrating web data capabilities (via Bright Data’s Web MCP) can make Kilo Code even more useful.
• How to connect Kilo Code with Bright Data’s Web MCP – step by step – to create an enhanced AI coding agent with live web access.

Let’s Dive In!

Prerequisites

To follow along, you will need:

• Visual Studio Code installed on your computer (latest version recommended).
• Node.js and npm installed (the Bright Data Web MCP is distributed as an npm package).
• A Bright Data account and API key.
• An API key for an LLM provider. Kilo Code supports many providers (OpenAI, Anthropic, etc.)
• (Optional) Python installed on your machine. This is only needed if you want to run the example Python script that Kilo Code will generate during the test.

Don’t worry if you don’t have a Bright Data API key yet, we’ll walk through creating one. But before that, let’s look at what exactly Kilo Code is.

What Is Kilo Code (and VS Code with Kilo Code)?

Kilo Code is an open-source AI coding assistant that operates as a VS Code extension, combining the best features from popular tools like Cline and Roo Code while adding unique enhancements.

It acts like a whole AI development team inside your editor, assisting you with code generation, refactoring, debugging, and even task automation using natural language. In essence, it can:

• Operate as an AI pair programmer that you chat with in plain English to plan or write code.
• Read your project files, make changes, and even create new files or run terminal commands as needed.
• Adapt its “personality” through multiple modes – for example, Architect, Coder, and Debugger modes each guide the AI’s behavior for planning, coding, or troubleshooting.
• Integrate with various AI model providers (OpenAI, Anthropic, OpenRouter, local LLMs like Ollama, etc.) so you can choose the underlying model.
• Connect to external tools via the Model Context Protocol (MCP), which lets Kilo Code use web APIs and custom services for extended functionality.

Kilo Code is built on a foundation of other open-source projects (it evolved from the Roo Code and Cline agents), but it has successfully forged its own path so far. It supports over 400 AI models, including Gemini 2.5 Pro, Claude 4 Sonnet & Opus, and GPT-5, while also allowing connections to external APIs and data sources, making it the perfect platform for web data integration.

Why Integrate the Web MCP into Kilo Code?

Like all AI coding assistants, the large language model (LLM) behind Kilo Code has an outdated knowledge problem.

LLMs can only generate answers based on the static training data it was trained on, which is essentially a snapshot of the past. This means the AI might miss recent frameworks, suggest deprecated functions, or produce code that doesn’t follow the latest best practices.

Now imagine giving your Kilo Code agent the ability to fetch up-to-date tutorials, documentation, and examples from the web and learn from them in real time. By integrating web search and live data extraction, Kilo Code could solve problems with current information. For example, pulling in a newly released library’s docs or the latest Stack Overflow answers for an error message.

This is exactly what Bright Data’s Web MCP server enables.

Bright Data’s Web MCP server is a powerful Model Context Protocol implementation that provides an all-in-one solution for public web access, now with a free tier of 5,000 monthly requests.

In other words, it’s like a “web browser + data scraper” that Kilo Code’s AI can control programmatically. The MCP server exposes tools to search the internet, navigate websites, and extract structured data – all through a simple API that the AI agent can call. A couple of the most commonly used MCP tools are:

• search_engine: Used to perform live web searches (Google, Bing, or Yandex) and get back search results (titles, snippets, URLs) in JSON/Markdown format. This allows the AI to find relevant web pages or answers in real time. For all use cases, learn how to choose the best SERP API tools here.
• scrape_as_markdown: Used to retrieve the content of any given webpage, with options to bypass bots and CAPTCHAs, and return the text in clean Markdown format. This lets the AI read an article or documentation page and use that information to help with your task.

Connecting Kilo Code to the Bright Data’s MCP gives your AI coder eyes and hands on the web. It can search, click, and scrape as part of its workflow, making it far more resourceful and accurate. Next, we’ll walk through how to set up this integration.

How to Connect Kilo Code to Bright Data’s Web MCP in Visual Studio Code

Step #1: Install Kilo Code in VS Code

Installing Kilo Code is straightforward through the VS Code Extensions marketplace. Begin by opening Visual Studio Code and accessing the Extensions panel. After installation completes, you may be prompted to reload VS Code to activate the extension. Look for the Kilo Code icon that now appears in your VS Code sidebar, typically on the left side of the interface.

Step #2: Configure Your LLM Provider

With Kilo Code installed, click the Kilo Code icon in your sidebar to open the main panel. The interface will appear on the left side of your VS Code window, providing access to all of Kilo Code’s features and configuration options.

Kilo Code provides multiple pathways to access AI models, making it flexible for users with diverse preferences and budgets.

• For new users, the most convenient option is to use the built-in credits system. Click “Connect with Google” in the Kilo Code panel to authenticate your account. This process automatically applies $20 in free credits to your account, giving you immediate access to over 400 AI models without requiring separate API keys.
• Alternatively, if you prefer to use your own API keys, click the gear icon in the Kilo Code sidebar and navigate to the Model Providers section. Here you can add API keys for various providers including Anthropic (for Claude models), OpenAI (for GPT models), Google (for Gemini models), or any OpenRouter-compatible service.

Once your model provider is configured, take a moment to set your preferred model from the available options. You might choose GPT-4 for complex reasoning tasks, Claude-3 for detailed code analysis, or Gemini for multimodal capabilities.

To verify everything is working properly, send a simple test message such as “Hello, can you help me code?” The AI should respond promptly, confirming that your model connection is functioning correctly.

Step #3: Install Bright Data’s Web MCP

Now that Kilo Code is set up with an AI model, you can extend its capabilities with web browsing and data extraction.

1. Before installing the MCP server, you’ll need to obtain your Bright Data API token. Navigate to brightdata.com and sign up for a free account, which includes a generous allowance of 5,000 free requests per month for your first three months. After creating your account, verify your email address as prompted.
2. Once logged in, access your account settings to locate and copy your API token. This token serves as your authentication credential for the MCP server and will be required in the next configuration step. Keep this token secure and readily accessible, as you’ll need to reference it during the setup process.
3. With your API token secured, open your terminal or command prompt to install the Bright Data Web MCP package globally on your system. Execute the command:

npm install -g @brightdata/mcp

This global installation ensures the MCP server is available system-wide and can be accessed by Kilo Code regardless of your current project directory.

To verify the installation was successful, run:

npx @brightdata/mcp --version

You should see version 2.5.0 or higher displayed, confirming that the latest version of the MCP server is properly installed and ready for use.

Step #4: Connect Kilo Code to the Web MCP

Now comes the crucial step of connecting Kilo Code to your newly installed Bright Data Web MCP server. Kilo Code supports both STDIO and SSE transport methods for MCP server connections, but we’ll use the STDIO method for optimal local performance and reliability.

In the Kilo Code panel, click the gear icon and navigate to the MCP Servers section. Look for the option to “Edit Global MCP” which opens the configuration file where you’ll define your server connections. This file uses JSON format and allows you to specify multiple MCP servers if needed.

Add the following configuration to connect to Bright Data’s Web MCP:

{
  "mcpServers": {
    "Bright Data Web": {
      "command": "npx",
      "args": ["@brightdata/mcp"],
      "env": {
        "API_TOKEN": "YOUR_BRIGHT_DATA_API_TOKEN_HERE"
      },
      "disabled": false,
      "alwaysAllow": ["search_engine", "scrape_as_markdown"],
      "timeout": 180
    }
  }
}

Replace "YOUR_BRIGHT_DATA_API_TOKEN_HERE" with the actual API token you copied from your Bright Data account. The "alwaysAllow" array pre-approves the basic search and scraping tools to reduce friction during normal usage, while the timeout setting of 180 seconds prevents premature timeouts during slower web scraping operations.

For users who need more control over their MCP server behavior, Bright Data offers several advanced configuration options. This extended configuration provides additional flexibility for enterprise users or those with specific requirements:

{
  "mcpServers": {
    "Bright Data Web": {
      "command": "npx",
      "args": ["@brightdata/mcp"],
      "env": {
        "API_TOKEN": "YOUR_BRIGHT_DATA_API_TOKEN_HERE",
        "RATE_LIMIT": "100/1h",
        "PRO_MODE": "false",
        "WEB_UNLOCKER_ZONE": "optional_custom_zone",
        "BROWSER_ZONE": "optional_custom_browser_zone"
      },
      "disabled": false,
      "timeout": 180
    }
  }
}

The rate-limiting feature allows you to control request frequency using formats like "100/1h" for 100 requests per hour, "50/30m" for 50 requests per 30 minutes, or "10/5s" for 10 requests per 5 seconds. Setting PRO_MODE to "true" unlocks access to all 60 advanced tools, though this may incur additional charges beyond the free tier. The zone configurations are optional and primarily useful for enterprise customers with custom proxy requirements.

For enhanced security and easier management, consider using environment variables to store your API token rather than hardcoding it in the configuration file. Create a .env file in your project root containing:

API_TOKEN=your_actual_api_token_here
RATE_LIMIT=100/1h
PRO_MODE=false

Then reference these variables in your MCP configuration using the format ${VARIABLE_NAME}. This approach keeps sensitive credentials out of your configuration files and makes it easier to manage different tokens across development, staging, and production environments.

For team collaboration or remote development environments where local MCP server installation might be challenging, Bright Data also offers a remote SSE transport option:

{
  "mcpServers": {
    "Bright Data Remote": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.brightdata.com/mcp?token=YOUR_API_TOKEN_HERE"
      ],
      "disabled": false,
      "timeout": 300
    }
  }
}

This configuration connects directly to Bright Data’s hosted MCP endpoint, eliminating the need for local server installation while providing the same functionality.

The default configuration uses Bright Data’s free tier, which includes access to basic tools like search_engine and scrape_as_markdown. These tools are sufficient for most web data integration needs and provide excellent value within the 5,000 monthly request allowance.

If you enable PRO_MODE, you’ll gain access to all 60 specialized tools, including advanced browser automation and structured data extraction capabilities, though additional charges may apply beyond the free tier limits.

Once you’ve saved your configuration file using Ctrl+S or Cmd+S, restart VS Code completely to ensure the new MCP server is properly loaded. After restarting, check the Kilo Code MCP settings panel, where you should see “Bright Data Web” listed with a “Running” status, indicating a successful connection.

Step #5: Test the Enhanced Kilo Code Agent

With your Kilo Code and Bright Data Web MCP integration complete, it’s time to verify that everything is working correctly.

Open the Kilo Code panel and ensure you can see that the MCP server connection is active. Look for connection indicators or status messages that confirm the Bright Data Web server is running properly.

For a more advanced test of the scraping functionality, try this request: “Get the current price of Bitcoin from CoinGecko” and create a quick reference guide for the requests library. This test exercises the scrape_as_markdown tool and demonstrates the power of real-time documentation access.

You should see a tool approval prompt for the scraping function, followed by content extraction from the live CoinGecko website, and finally a generated quick reference guide with current examples and function signatures.

Advanced Use Cases and Examples

The integration enables dynamic problem-solving by allowing your AI assistant to fetch current solutions from Stack Overflow, live API documentation, and recent GitHub discussions. You can use this Kilo Code and Bright Data combination to do things like:

• Dynamic API Documentation Integration
• Live Market Data Analysis
• Competitive Analysis Automation

Enterprise teams can automate business intelligence through powerful data integration. Financial services can monitor real-time market data with requests like “Track cryptocurrency prices across major exchanges and create a trading dashboard.” Marketing teams can automate competitive analysis by asking “Monitor competitor pricing pages and alert on changes.”

These applications transform routine business tasks into automated, AI-driven processes that deliver actionable insights.

Troubleshooting & Tips

Even with a well-documented setup, it’s common to run into small hiccups the first time you connect Kilo Code with Bright Data’s Web MCP. The good news is that most issues are straightforward to diagnose and fix once you know what to look for.

Common Installation Issues

• If the Kilo Code panel doesn’t appear after installation, the first thing to try is restarting Visual Studio Code. Make sure you’re running the latest version of VS Code, since outdated versions can sometimes block extensions from loading correctly.
• Another frequent stumbling block is the API configuration. If you paste your LLM provider key incorrectly, or choose a model you don’t have access to, Kilo Code may fail silently. Always double-check your API key and run a quick test query like “Hello” to verify that the model is responding.
• On the MCP side, the most frequent problems occur with MCP server connectivity and authentication. If your server shows “Failed” status, verify Node.js 18+ is installed with node --version, then reinstall the MCP server using:

npm uninstall -g @brightdata/mcp && npm install -g @brightdata/mcp

Authentication errors typically stem from incorrect API tokens—ensure no extra spaces when copying and verify your Bright Data account has available quota.

• Windows users may need an alternative configuration: replace the command with "cmd" and args with ["/c", "npx", "-y", "@brightdata/mcp"].
• For timeout issues on complex sites, increase the timeout to 300 seconds and consider enabling Pro Mode for JavaScript-heavy pages.

Performance Optimization

Once everything is working, you should fine-tune performance.

• Remember that every MCP call involves a round-trip to the web, so tasks like scraping multiple pages will naturally take longer than static code generation. To keep things snappy, be specific with your prompts. Instead of asking Kilo Code to “search the web for everything about Python,” narrow it to “search the web for the official Python 3.12 release notes.”
• You can further optimize your setup by using selective auto-approval for common tools. For example, setting "alwaysAllow": ["search_engine", "scrape_as_markdown"] reduces friction while maintaining security.
• Also, choose STDIO transport for local development (faster) and SSE transport for remote environments (more reliable).
• Keep an eye on resource usage. Running the MCP locally means your machine is doing the heavy lifting. If you notice slowdowns during large scraping tasks, you can switch to Bright Data’s hosted MCP service, which offloads processing to the cloud.

And don’t forget to keep both the Kilo Code extension and the MCP package updated—the developers push frequent improvements and bug fixes that can dramatically improve stability.

Wrapping Up

Connecting Kilo Code with Bright Data’s Web MCP gives your coding assistant access to live web data right inside VS Code. This setup helps you work with up-to-date information for better coding and problem-solving.

Bright Data also provides powerful proxy services, ready-to-use datasets, and a many other solutions for AI. Explore all Bright Data solutions to find the tools that best fit your workflow.

Get started today and take your web data capabilities further.