Ускорьте агентов Cline AI скрапингом через Bright Data MCP

В этой статье вы узнаете:

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

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

Что такое Клайн?

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

Расширение Cline VS Code выходит за рамки базового завершения кода. Оно может анализировать структуру проекта, генерировать и редактировать код, запускать команды терминала и даже помогать отлаживать веб-приложения.

Cline поддерживает несколько AI API, позволяя вам подключаться к различным моделям и провайдерам. Вы также можете расширить его функциональность, добавив пользовательские инструменты искусственного интеллекта через MCP(Model Context Protocol).

На данный момент расширение Cline имеет более 48 тысяч звезд на GitHub и более 1,9 миллиона загрузок в Visual Studio Marketplace.

Почему агенты Cline должны уметь извлекать данные из Сети?

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

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

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

Именно это и предлагает сервер Bright Data Web MCP. Этот сервер предоставляет коллекцию из более чем 60 инструментов для сбора веб-данных в режиме реального времени, основанных на инфраструктуре данных ИИ Bright Data.

Полный список инструментов, предоставляемых сервером Bright Data Web MCP, см. в документации.

Другие возможные варианты использования включают:

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

Давайте посмотрим, как работает сервер Bright Data Web MCP в Cline. Мы рассмотрим один из приведенных выше примеров использования, чтобы понять, что на самом деле дает эта интеграция!

Как добавить возможности извлечения данных в агент кодирования ИИ в Cline

Узнайте, как добавить Cline в Visual Studio Code и интегрировать его с сервером Bright Data Web MCP. Результатом этого пошагового раздела станет кодирующий агент с искусственным интеллектом, который сможет получать данные из Интернета и взаимодействовать с ними. Это позволит агенту получать более точные результаты и умнее решать задачи.

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

Соскребите страницу товара Amazon.
Храните данные локально.
Создайте сценарий Node.js для загрузки и обработки этих данных.

Следуйте приведенным ниже инструкциям!

Пререквизиты

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

Node.js, установленный локально (мы рекомендуем последнюю версию LTS)
Рассказ Клайна
Ключ API Bright Data
(Необязательно) Ключ API для предпочитаемого вами LLM (например, ключ API Google Gemini).

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

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

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

Нажатие кнопки "Установить" для установки Cline в VS Code

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

После установки вы увидите значок Cline в левой боковой панели. Щелкните его, чтобы открыть панель Cline:

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

Замечательно! Клин был установлен в VS Code.

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

Теперь вам нужно подключить свой аккаунт Cline к ранее установленному расширению. Для этого нажмите кнопку “Начать бесплатно”:

В браузере вы будете перенаправлены на следующую страницу:

Страница входа в систему / создания учетной записи Cline

Зарегистрируйтесь (или войдите, если у вас уже есть учетная запись), и вы будете перенаправлены обратно в окно VS Code:

Страница перенаправления Клайна обратно на VS Code

В Visual Studio Code теперь должно появиться следующее модальное окно. Нажмите “Открыть”, чтобы аутентифицировать расширение Cline:

Нажмите кнопку "Открыть", чтобы проверить подлинность расширения Cline

Теперь расширение Cline должно выглядеть примерно так:

Если вы вернетесь к своему аккаунту Cline в браузере, то заметите, что по умолчанию на него начислено $0,50 бесплатных кредитов:

Кредит по умолчанию, предложенный Клайном

Если вы планируете использовать премиум LLM через Cline, подумайте о добавлении кредитов. (Причина в том, что баланс по умолчанию позволяет проводить только ограниченное тестирование).

Кроме того, если вы хотите не тратить деньги или предпочитаете использовать собственного провайдера LLM, вы можете подключить свой API-ключ напрямую. Для этого нажмите на значок шестеренки на панели Cline. Затем выберите “Конфигурация API” и вставьте свой ключ API, чтобы настроить интеграцию с LLM:

В приведенном выше примере мы интегрировали Cline с модельюgemini-2.5-flash, которую можно бесплатно использовать через API.

Потрясающе! Теперь Cline полностью настроен в VS Code и готов помочь вам создать агента кодирования AI с возможностями веб-скрапинга.

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

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

Затем следуйте официальным инструкциям, чтобы получить API Bright Data. Для простоты нижеприведенные инструкции предполагают, что вы используете токен API с правами администратора.

Теперь вы можете установить сервер Bright Data Web MCP глобально в своей среде Node.js, используя:

npm install -g @brightdata/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

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

Если все настроено правильно, в вашем терминале должно отображаться что-то вроде этого:

Журналы запуска сервера Bright Data Web MCP

Как видите, при первом запуске команды пакет @brightdata/mcp инициализирует необходимые зоны Bright Data в вашей учетной записи. Более конкретно, он создает одну зону для Web Unlocker и другую для Scraping Browser API. Эти две зоны позволяют серверу MCP запускать все инструменты, которые он предоставляет.

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

Новые зоны, созданные на приборной панели Bright Data

Примечание: Если вы не используете API-токен с правами администратора, вам придется создавать зоны вручную. Обратитесь к официальной документации за подробным руководством.

Потрясающе! Сервер Bright Data Web MCP работает как шарм.

Шаг #4: Подключите Cline к серверу Bright Data MCP Server

Настало время интегрировать расширение Cline с локально запущенным сервером Bright Data Web MCP. Начните с нажатия кнопки “Серверы MCP” на панели Cline:

Щелкните на "Серверы MCP" в правом верхнем меню на сайте Cline

Вы попадете в раздел конфигурации MCP-серверов Cline. Перейдите на вкладку “Установленные” и нажмите кнопку “Настроить MCP-серверы”:

Щелкните на кнопке "Настроить серверы MCP".

В Visual Studio Code откроется файл cline_mcp_setting.json. В нем вы можете определить, к каким MCP-серверам может подключаться расширение Cline. Для интеграции с MCP-сервером Bright Data Web настройте его следующим образом:

{
  "mcpServers": {
    "Bright Data": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 300,
      "type": "stdio",
      "command": "npx",
      "args": [
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API>"
      }
    }
  }
}

Примечание: Более подробную информацию можно найти в официальном выпуске на GitHub.

Другими словами, добавьте конфигурацию “Bright Data” в поле mcpServers. Обязательно замените на ваш фактический API-токен Bright Data.

Вы должны увидеть что-то вроде этого:

Отлично! Теперь, если вы перейдете на вкладку “Установленные”, вы увидите запись для сервера Bright Data Web MCP. Разверните его, чтобы просмотреть все инструменты, которые он поддерживает:

Здесь вы можете настроить сервер Bright Data Web MCP и его инструменты. Для данного рабочего процесса подойдут настройки по умолчанию.

Для получения дополнительной информации ознакомьтесь с официальной документацией.

Отлично! Теперь расширение Cline может подключаться к серверу Bright Data Web MCP и использовать его инструменты.

Шаг #5: Используйте агент искусственного интеллекта Cline AI Agent

Вы готовы протестировать агент кодирования Cline AI, подключенный к серверу Bright Data Web MCP, в Visual Studio Code.

Начните с открытия программы Cline. Затем щелкните стрелку справа, чтобы открыть меню “Настройки автоутверждения”. В меню отметьте опцию “Использовать MCP-серверы”, чтобы разрешить автоматическое подключение к настроенным MCP-серверам:

Включение использования сервера MCP в настройках

Если эта настройка включена, Cline будет автоматически подключаться к серверу MCP, не запрашивая разрешения. Перед использованием инструмента вам все равно будет выдан запрос, так что этого должно быть достаточно.

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

Scrape data from "https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/", save it to a local data.json file, and create a Node.js index.js script to load and print its contents.

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

Запустите приглашение в Cline, и вы увидите следующее взаимодействие:

Взаимодействие, которое вы должны увидеть

Приведенный выше GIF был ускорен, но вот что получилось:

Расширение Cline отправляет запрос на настроенный LLM (например, gemini-2.5-flash).
LLM определяет подходящий для работы инструмент MCP, которым является web_data_amazon_product.
Он запрашивает разрешение на запуск этого инструмента через Bright Data MCP, используя URL-адрес продукта Amazon из подсказки (т. е. https://www. amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/).
После одобрения задание по скраппингу запускается на серверах Bright Data.
Затем Клайн запрашивает разрешение на доступ к результату задания.
За кулисами Bright Data выполняет задачу скрапинга, а Cline получает реальные данные о продукте в формате JSON. Это и есть выходной сигнал инструмента MCP, который показывает Cline.
У вас запросят разрешение на сохранение данных в файл data.json.
После одобрения файл будет создан и заполнен.
Вам предлагается создать скрипт index.js для чтения и печати содержимого JSON .
После утверждения файл будет создан.

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

Файлы в вашей папке после того, как Клайн выполнит задание

В файле data.json хранятся данные о товарах Amazon в формате JSON, полученные с помощью Amazon Scraper от Bright Data:

index.js: содержит логику Node.js для загрузки и печати его содержимого:

Выполните созданный скрипт index.js с помощью:

node index.js

В терминале должны появиться данные о продукте:

Рабочие процессы сработали идеально, поскольку данные, содержащиеся в JSON-файле, совпали с данными на оригинальной странице продукта Amazon:

Обратите внимание, что в файле data.json хранятся реальные данные, а не галлюцинации из LLM. Кроме того, помните, что скраппинг Amazon – это не маленький подвиг, учитывая их строгие системы защиты от ботов (например, пресловутый Amazon CAPTCHA).

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

И вуаля! Вы только что стали свидетелем беспрепятственного получения веб-данных с помощью интеграции MCP Bright Data с агентом кодирования Cline AI.

Заключение

В этой статье вы узнали, как интегрировать Cline с MCP-сервером Bright Data Web для создания агента кодирования ИИ, который может работать в Интернете. Это стало возможным благодаря поддержке Cline интеграции с MCP.

Помните, что это всего лишь простой пример. Для создания более сложных агентов изучите весь спектр инструментов, доступных в сервере Bright Data Web MCP. Эти инструменты могут поддержать большинство случаев использования данных, управляемых искусственным интеллектом.

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

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