Подключение Roo Code к Bright Data Web MCP в VS Code

В этом уроке вы узнаете:

Что такое Roo Code и почему он в настоящее время является одним из наиболее широко используемых агентов кодирования AI для IDE.
Как оснастить его возможностями веб-взаимодействия и извлечения данных, чтобы сделать его еще более полезным.
Как подключить Roo Code к серверу Bright Data Web MCP в Visual Studio Code, чтобы создать усовершенствованный агент кодирования ИИ.

Давайте погрузимся!

Что такое Roo Code?

Roo Code – это автономный агент кодирования на базе ИИ, который живет прямо в вашем редакторе. В деталях он может:

Работать в качестве парного программиста на базе ИИ, с которым вы можете общаться на естественном языке.
Читать и записывать файлы прямо в вашей рабочей области.
Выполнять команды терминала.
Автоматизировать действия в браузере с помощью встроенной интеграции браузера.
Интеграция с широким спектром OpenAI-совместимых или пользовательских API/моделей.
Адаптация его “личности” и возможностей с помощью различных режимов.
Подключение к сторонним провайдерам через MCP-интеграцию.

Roo Code родился как форк Cline и доступен как расширение Visual Studio Code с открытым исходным кодом. Оно позволяет автоматизировать задачи кодирования и улучшить рабочий процесс разработки с помощью искусственного интеллекта прямо в VS Code.

В отличие от Cline, Roo Code не требует учетной записи для работы (хотя для предприятий доступна платформа Roo Cloud с дополнительными возможностями). Для получения более подробной информации см. наше руководство по интеграции Cline с Web MCP-сервером Bright Data.

В настоящее время проект Roo Code имеет более 18 тысяч звезд на GitHub и 750 тысяч установок в маркетплейсе Visual Studio Code. Это означает, что он является одним из наиболее широко используемых агентов кодирования AI для IDE.

Зачем интегрировать Web MCP в расширение Roo Code VS Code

LLM, который вы настраиваете в Roo Code, имеет общее ограничение для всех языковых моделей: устаревшие знания. LLM может генерировать ответы только на основе статических данных, на которых он обучался, а это не более чем снимок прошлого.

Учитывая, как быстро развивается мир технологий, это ограничение нельзя игнорировать. LLM могут легко предложить устаревшие подходы к кодированию, устаревшие методы или полностью пропустить недавно появившиеся функции.

А теперь представьте, что ваш помощник по кодингу Roo Code AI может получать актуальные учебники, страницы документации и руководства и учиться на них в режиме реального времени. Это становится возможным благодаря интеграции Roo Code с решением, которое расширяет LLM с возможностями веб-поиска и доступа к данным.

Именно таким решением является сервер Web MCP от Bright Data. Этот MCP-сервер с открытым исходным кодом(теперь с бесплатным уровнем) предлагает более 60 инструментов, готовых к работе с искусственным интеллектом, для взаимодействия с интернетом и сбора данных в режиме реального времени.

Наиболее часто в MCP-сервере используются два инструмента:

Инструмент	Описание
`scrape_as_markdown`	Соскребает содержимое с одного URL-адреса веб-страницы с расширенными опциями извлечения, возвращая результаты в формате Markdown. Может обходить обнаружение ботов и CAPTCHA.
`search_engine`	Извлекает результаты поиска из Google, Bing или Yandex, возвращая данные SERP в формате JSON или Markdown.

Кроме того, существует 55+ специализированных инструментов для взаимодействия с веб-страницами (например, scraping_browser_click) и сбора структурированных данных с широкого спектра сайтов, включая Amazon, Yahoo Finance, TikTok, LinkedIn и другие. Например, инструмент web_data_amazon_product извлекает подробную структурированную информацию о продукте с Amazon, принимая в качестве входных данных действительный URL-адрес продукта.

Возможные сценарии использования Bright Data Web MCP + Roo Code включают:

Получение данных SERP в реальном времени и вставка контекстных ссылок в отчеты в формате Markdown непосредственно в VS Code.
Запрос учебников или документации на основе кода, который вы активно пишете.
Скраппинг свежих публичных данных с веб-сайтов и сохранение их локально для имитации, анализа или дальнейшей обработки.

Давайте посмотрим, как работает Web MCP в Roo Code!

Как подключить Roo Code к Web MCP Bright Data в Visual Studio Code

В этом разделе вы узнаете, как добавить Roo Code в Visual Studio Code и интегрировать его с Web MCP Bright Data. Конечным результатом станет агент кодирования с искусственным интеллектом, способный получать доступ и взаимодействовать с Интернетом. Эти возможности сделают агента более находчивым и точным.

В частности, вы создадите усовершенствованный агент ИИ Roo Code с возможностями поиска данных и будете использовать его для:

Соскабливать страницу товара Amazon в режиме реального времени.
Хранить данные локально.
Создайте Python-скрипт для загрузки и обработки собранных данных.

Выполните следующие шаги, чтобы начать работу!

Необходимые условия

Чтобы следовать этому руководству, вам понадобятся:

API-ключ Bright Data
API-ключ от одного из поддерживаемых LLM-провайдеров (в этом руководстве мы будем использовать API-ключ OpenRouter).

Не волнуйтесь, если у вас еще нет ключа API Bright Data. Мы расскажем вам о его настройке в следующих шагах.

Чтобы запустить сгенерированный вывод, вам также понадобится Python, установленный локально.

Шаг #1: Установите Roo Code в Visual Studio Code

Откройте Visual Studio Code. Затем нажмите на значок “Расширения” в левой боковой панели, найдите “Roo Code” и выберите расширение Roo Code. На вкладке расширения Roo Code нажмите кнопку “Установить”:

Clicking the “Install” button to install Roo Code in VS Code

Если вы впервые устанавливаете расширение от поставщика Roo Code, вам будет предложено доверять издателю. Нажмите “Доверять издателю и установить”, чтобы продолжить.

После завершения установки вы увидите значок Roo Code в левой боковой панели. Нажмите на него, чтобы открыть расширение:

Accessing the Roo Code extension section in VS Code

Примечание: Если значок Roo Code не отображается, попробуйте перезагрузить Visual Studio Code. При возникновении других проблем обратитесь к официальному руководству по установке.

Готово! Теперь Roo Code доступен в VS Code.

Шаг №2: Настройка подключения к OpenRouter

Теперь, когда Roo Code установлен, следующий шаг – подключить его к LLM-провайдеру. Roo Code поддерживает широкий спектр провайдеров, включая Anthropic, Claude Code, AWS Bedrock, DeepSeek, Google Gemini, Groq, Hugging Face, LiteLLM, Mistral AI, Ollama, OpenAI, OpenRouter, Requesty, xAI (Grok) и многие другие.

В этом руководстве мы подключим Roo Code к OpenRouter и будем использовать модель qwen/qwen3-coder:free. Эта настройка полностью бесплатна, то есть не требует никаких средств или кредитов.

Примечание: Если вы предпочитаете другого провайдера или у вас уже есть другие API-ключи, следуйте специальному руководству по интеграции в документации Roo Code.

Создайте учетную запись OpenRouter и получите свой API-ключ. Если вы не знакомы с этим процессом, посмотрите, что мы делали в нашем руководстве по Qwen-Agent.

В панели расширений Roo Code прокрутите вниз, пока не увидите кнопку “OpenRouter”. Нажмите на нее:

Откроется окно браузера, в котором вам будет предложено войти в свою учетную запись OpenRouter и авторизовать Roo Code. Нажмите “Авторизовать”, чтобы продолжить:

Clicking “Authorize” to authorize the OpenRouter connection in Roo Code

Вернувшись в VS Code, вам будет предложено подтвердить соединение. Нажмите “Открыть”, чтобы завершить процесс авторизации:

Вот что вы теперь должны увидеть в Visual Studio Code:

Как вы можете видеть, авторизация прошла успешно, и Roo Code готов к использованию!

По умолчанию Roo Code использует модель Claude Opus 4 (для использования которой требуется пополнение счета OpenRouter). Чтобы переключиться на бесплатную модель (или любую другую), нажмите на значок шестеренки в верхнем меню:

На вкладке “Настройки” прокрутите вниз до выпадающего списка “Модель” и выберите модель, которую вы хотите настроить:

Integrating a different model in Roo Code

Например, выберите qwen/qwen3-coder:free, бесплатную модель, оптимизированную для сценариев кодирования. После этого нажмите кнопку “Готово”, чтобы подтвердить изменения.

Фантастика! Теперь Roo Code полностью настроен в VS Code. Пора превратить его в агента по кодированию с возможностью получения веб-данных и взаимодействия с помощью интеграции с MCP.

Шаг № 3: Установите Web MCP от Bright Data

Если вы еще не сделали этого, начните с создания учетной записи Bright Data. В противном случае, если она у вас уже есть, войдите в нее.

Следуйте официальным инструкциям, чтобы сгенерировать свой ключ API Bright Data. Обязательно храните его в надежном месте. Мы будем считать, что вы используете API-ключ с правами администратора, так как это упрощает интеграцию.

Откройте терминал и установите Web MCP глобально с помощью пакета @brightdata/mcp:

npm install -g @brightdata/mcp

Убедитесь, что локальный MCP-сервер работает, с помощью этой команды Bash:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcp

Или, эквивалентно, в Windows PowerShell:

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcp

Замените место <YOUR_BRIGHT_DATA_API> на фактический API-токен Bright Data. Приведенные выше две команды устанавливают необходимую переменную окружения API_TOKEN, а затем запускают MCP-сервер с помощью пакета @brightdata/mcp npm.

В случае успеха вы должны увидеть журналы, как на изображении ниже:

При первом запуске пакет автоматически устанавливает две зоны по умолчанию в вашей учетной записи Bright Data:

mcp_unlocker: Зона для Web Unlocker.
mcp_browser: Зона для Browser API.

Эти две зоны необходимы для доступа ко всем инструментам, предоставляемым Web MCP.

Чтобы убедиться в том, что вышеуказанные зоны были созданы, войдите в панель управления Bright Data. Перейдите на страницу“Proxies & Scraping Infrastructure“, и вы должны увидеть эти две зоны в списке:

The mcp_unlocker and mcp_browser zones created by the Web MCP at startup

Примечание: Если ваш API-токен не имеет прав администратора, эти зоны могут не быть созданы автоматически. В этом случае вы можете создать их вручную в панели управления и указать их имена через переменные окружения, как описано на странице пакета на GitHub.

По умолчанию сервер MCP предоставляет только инструменты search_engine и scrape_as_markdown, которые можно использовать бесплатно.

Чтобы открыть расширенные возможности, такие как автоматизация браузера и извлечение структурированных данных из длинного списка доменов, необходимо включить режим Pro. Для этого перед запуском сервера MCP установите переменную окружения PRO_MODE=true:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcp

Или в PowerShell:

$Env:API_TOKEN="<Ваш_BRIGHT_DATA_API>"; $env:PRO_MODE="true"; npx -y @brightdata/mcp

Важно: Если вы решите использовать режим Pro, вы получите доступ ко всем 60+ инструментам. С другой стороны, режим Pro не входит в бесплатный уровень и требует дополнительной оплаты.

Отлично! Вы убедились, что сервер Web MCP работает на вашей машине. Завершите процесс сервера, поскольку теперь вы настроите Roo Code на автоматический запуск и подключение к нему.

Шаг № 4: Подключение Roo Code к Web MCP

Пришло время подключить расширение Roo Code к Bright Data Web MCP. В панели Roo Code в верхнем меню выберите пункт “Серверы MCP”:

Вы попадете в раздел конфигурации “Серверы MCP”. Здесь вы можете настроить MCP-серверы, либо глобальные (доступные во всех проектах), либо локальные (доступные только в текущем проекте).

Процедура настройки практически идентична, поэтому нажмите кнопку “Редактировать глобальный MCP”. Откроется файл mcp_settings.json, который содержит пустую запись mcpServers:

В этом файле конфигурации нужно указать детали подключения к Bright Data Web MCP. Убедитесь, что он содержит следующий код:

{
  "mcpServers": {
    "brightData": {
      "command": "npx",
      "args": [
        "-y",
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<ВАШ_BRIGHT_DATA_API_KEY>",
        "PRO_MODE": "true"
      }
    }
  }
}

В этой конфигурации:

Объект mcpServers указывает Roo Code, как запускать внешние MCP-серверы.
Элемент brightData определяет команду(npx) и переменные окружения, необходимые для запуска Web MCP. PRO_MODE необязателен, но его включение разблокирует полный набор доступных инструментов.

Вот что вы должны увидеть:

The populated mcp_settings.json file in VS Code

Замените место <YOUR_BRIGHT_DATA_API_KEY> на ваш ключ Bright Data API, полученный ранее.

Эта конфигурация указывает Roo Code на запуск той же команды npx с переменными окружения, которые были указаны в предыдущем шаге. Другими словами, теперь Roo Code может запускать и подключаться к серверу Bright Data Web MCP. (Включение PRO_MODE не является обязательным, но рекомендуется).

Как только вы добавите запись brightData в mcpServers, Roo Code немедленно подключится к Web MCP-серверу и отобразит доступные инструменты:

The available tools in Roo Code from the Web MCP

Поскольку мы установили переменную окружения PRO_MODE в true, Roo Code теперь предоставляет доступ к 60+ инструментам. Без PRO_MODE были бы доступны только 2 инструмента: scrape_as_markdown и search_engine.

Нажмите кнопку “Готово”, и вы успешно интегрировали Web MCP в Roo Code. Потрясающе!

Шаг #5: Протестируйте агент Roo Code

По умолчанию Roo Code работает в режиме Architect, который выступает в роли “опытного технического лидера и планировщика, который помогает проектировать системы и создавать планы реализации”.

Для большинства сценариев вы захотите использовать его в качестве парного программиста ИИ. Для этого переключите режим Roo Code на Code, как показано ниже:

Теперь проверьте возможности вашего агента по кодированию ИИ по поиску данных в Интернете с помощью следующего запроса:

Соскребите данные с сайта "https://www.amazon.com/Owala-FreeSip-Insulated-Stainless-BPA-Free/dp/B0F354MWSL/", сохраните их в локальный файл "product.json" и создайте сценарий Python "script.py" для загрузки и печати его содержимого.

Это имитирует реальный случай использования, получение данных для анализа, визуализации, имитации или других рабочих процессов.

Запустите приглашение в Roo Code, и вы увидите результат, похожий на этот:

Приведенный выше GIF был ускорен, но вот что происходит шаг за шагом:

Roo Code разбивает задачу на 3 этапа.
Он определяет, что лучший способ получить данные о продукте Amazon – это использовать инструмент web_data_amazon_product из Web MCP.
Вам будет предложено одобрить запуск инструмента поиска.
Инструмент запускается, и данные о товарах Amazon извлекаются в формате JSON.
Вас спросят, нужно ли сохранить данные в локальном файле product.json.
После одобрения JSON-файл будет создан и заполнен.
Roo Code запрашивает разрешение на создание файла script.py, который считывает и печатает содержимое файла product.json.
Файл создается с помощью сгенерированного кода Python.
Вам предлагается запустить скрипт с помощью команды python script.py.
Сценарий не работает из-за проблем с кодировкой.
Roo Code предлагает обновить скрипт с обработкой UTF-8.
После одобрения обновленный сценарий запускается правильно и выводит ожидаемый результат.

Обратите внимание, как Roo Code проактивно предложил выполнить скрипт, хотя в исходной подсказке не было явного запроса. Это было полезно, так как помогло агенту обнаружить недостатки и доработать свой собственный вывод.

После завершения работы в вашем рабочем каталоге должны быть эти два файла:

├──── product.json
└──── script.py

Откройте файл product.json в VS Code:

The product.json file in Visual Studio Code

Этот файл содержит реальные данные о товарах Amazon, а не галлюцинации или сфабрикованный результат. В частности, данные были получены Bright Data с помощью инструмента web_data_amazon_product (который внутри использует Amazon Scraper) с целевой страницы товара ниже:

Примечание: Скраппинг Amazon, как известно, затруднен из-за его строгой защиты от ботов (например, пресловутой Amazon CAPTCHA). Стандартный LLM сам по себе не может надежно справиться с этой задачей. Именно поэтому сочетание Roo Code с Web MCP от Bright Data делает вашего агента по кодированию уникально мощным.

Этот файл содержит реальные данные Amazon, а не галлюцинации или выдуманный контент, сгенерированный выбранным LLM. В частности, данные были собраны Bright Data с помощью инструмента web_data_amazon_product (который внутри компании называется Amazon Scraper).

Созданный файл script.py содержит логику для чтения и печати данных о продукте в формате JSON:

The script.py file in Visual Studio Code

Запустите приведенный выше сценарий Python с помощью:

python script.py

В результате будут получены данные о продукте, загруженные из файла product.json:

The output produced by the generated Python script

В этом и заключается сила Bright Data + Roo Code. Помните, что приведенный выше пример – это всего лишь простой вариант использования, поэтому экспериментируйте с другими подсказками. Изучите продвинутые рабочие процессы с данными, управляемые LLM, прямо в Visual Studio Code.

И вуаля! Вы завершили интеграцию MCP от Bright Data в Roo Code.

Заключение

В этой статье вы узнали, как подключить Roo Code к серверу Bright Data Web MCP(который теперь предлагает бесплатный уровень!) в Visual Studio Code. В результате получился многофункциональный агент кодирования с искусственным интеллектом, способный получать данные из Интернета и интеллектуально взаимодействовать с ними.

Мы использовали этого усовершенствованного агента для создания простого сценария на Python с доступом к данным о товарах Amazon. Если вам нужны более сложные проекты или вдохновение, помните, что инструменты, предоставляемые Web MCP, могут поддерживать широкий спектр агентных рабочих процессов и сценариев.

Чтобы создать мощные агенты ИИ, изучите весь спектр услуг, доступных в инфраструктуре ИИ Bright Data.

Создайте бесплатную учетную запись Bright Data и начните экспериментировать с нашими веб-инструментами, готовыми к работе с искусственным интеллектом!

Пробная версия Начать с Гугла