Как подключить Claude Code к серверу Bright Data Web MCP Server

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

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

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

Что такое Claude Code?

Claude Code – это инструмент интерфейса командной строки, разработанный компанией Anthropic, который предоставляет вам прямой доступ к моделям Claude в терминале. Он позволяет делегировать сложные задачи кодирования, автоматизировать рабочие процессы и интегрироваться с другими инструментами.

Другими словами, он выступает в роли парного ИИ-программиста и агента по кодированию. Claude Code отличается своей способностью понимать контекст проекта, генерировать код, тестировать, отлаживать и даже выполнять операции Git. Его основные возможности включают:

Агентское кодирование: Понимание сложных задач кодирования, мозговой штурм решений и их выполнение непосредственно в рамках рабочего процесса.
Интеграция рабочих процессов: Интеграция с различными инструментами и API через MCP.
Понимание кодовой базы: Анализирует и понимает структуру и логику вашей кодовой базы для создания кода с учетом контекста.
Генерация и редактирование кода: Генерирует новый код, рефакторит существующий код и исправляет ошибки на основе ваших инструкций.
Тестирование и линтинг: Выполняет тесты и команды линтинга для выявления и устранения проблем в вашем коде.
Интеграция с Git: Упрощает операции с Git, такие как фиксация, перемещение и создание запросов на исправление.

Имея более 30 тысяч звезд на GitHub и более 5 миллионов еженедельных загрузок, Claude Code является одним из самых популярных – если не самым популярным – решением для парного программирования с использованием ИИ. Это неудивительно, учитывая, что модели Claude в настоящее время считаются одними из лучших LLM, доступных для кодинга.

Зачем расширять Claude Code за счет веб-доступа и свежих данных?

Несмотря на то, что Claude Code работает на основе передовых моделей Клода, он все равно сталкивается с тем же ограничением, что и любой LLM: его знания статичны. Обучающие данные представляют собой моментальный снимок времени, который быстро устаревает. Это особенно актуально в таких быстро меняющихся областях, как разработка программного обеспечения!

А теперь представьте, что ваш помощник Claude Code CLI может:

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

Именно это вы получите, подключив его к Web MCP от Bright Data.

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

Вот лишь некоторые возможности расширения Claude Code с помощью Web MCP от Bright Data:

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

Полный каталог инструментов можно найти в документации Bright Data MCP.

Если вы хотите увидеть эту интеграцию в действии, посмотрите, как Web MCP работает в Claude Code.

Как подключить Claude Code к Web MCP от Bright Data

Узнайте, как установить и настроить Claude Code локально и интегрировать его с Web MCP от Bright Data. Полученный в результате расширенный агент кодирования будет использоваться для:

Соскабливать страницу профиля LinkedIn в режиме реального времени.
Хранить данные локально в файле JSON.
Создать приложение Express с конечной точкой, которая возвращает имитированные данные, считанные из файла JSON.

Выполните следующие шаги!

Предварительные условия

Прежде чем начать, убедитесь, что у вас есть все необходимое:

Node.js 18+, установленный локально (мы рекомендуем последнюю версию LTS).
Подписка Claude или учетная запись Anthropic с кредитами (в этом руководстве мы будем использовать учетную запись Anthropic).
Учетная запись Bright Data с готовым ключом API.

Обратите внимание, что вам не нужно создавать эти учетные записи прямо сейчас. Шаги ниже помогут вам в настройке, когда это будет необходимо.

Далее, необязательные, но полезные базовые знания:

Общее понимание того , как работает MCP.
Некоторое знакомство с сервером Bright Data Web MCP и его инструментами.

Шаг № 1: Установка и настройка Claude Code

Чтобы начать использовать Claude Code, вам сначала понадобится подписка на Claude или учетная запись Anthropic с некоторым количеством средств.

Когда ваш аккаунт Claude/Anthropic Console будет готов, установите Claude Code глобально с помощью официального пакета npm @anthropic-ai/claude-code:

npm install -g @anthropic-ai/claude-code

Затем перейдите в папку проекта, в котором будет работать Claude Code, и запустите его с помощью команды:

claude

Чтобы настроить базовую модель Claude или другие конфигурации, обратитесь к официальной документации.

Если вы запускаете CLI-агент впервые, вы должны увидеть экран начальной настройки:

Выберите тему и нажмите Enter, чтобы перейти к просмотру авторизации:

Выберите тип аутентификации, который вы хотите использовать (“учетная запись Claude с подпиской” или “учетная запись Anthropic Console”). В этом примере мы предположим, что вы выбрали вариант 2, хотя процедура аналогична для обоих вариантов.

На следующей странице вам будет предложено подключить Claude Code к учетной записи Anthropic Console:

Authorizing Claude Code in your Anthropic Console account

Нажмите кнопку “Авторизация” и вернитесь к своему терминалу. В вашей учетной записи Anthropic Console будет создан новый ключ API:

Затем Claude Code автоматически сохранит этот API-ключ в своих конфигурационных файлах, так что с этого момента вы будете оставаться под своим логином.

Теперь вы должны увидеть запрос о том, доверяете ли вы выполнение Claude Code в текущем каталоге:

Trusting Claude Code in the current directory

Выберите положительный вариант, и теперь у вас будет полный доступ к Claude Code CLI:

В прямоугольнике Try "refactor <filepath>" теперь можно написать подсказки для передачи кодовому агенту.

Отлично! Теперь Claude Code настроен и готов к использованию.

Шаг № 2: Начало работы с Web MCP от Bright Data

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

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

Установите Web MCP глобально с помощью пакета @brightdata/mcp, используя следующую команду:

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

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

Если все работает правильно, вы должны увидеть журналы, похожие на следующие:

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

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

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

Чтобы убедиться, что зоны были созданы, войдите в панель управления Bright Data и перейдите на страницу“Прокси и инфраструктура скрапинга“. Вы должны увидеть обе зоны в списке:

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

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

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

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

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

Или в Windows:

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

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

Потрясающе! Вы убедились, что сервер Web MCP корректно работает на вашей машине. Теперь вы можете остановить сервер, поскольку следующим шагом будет настройка Claude Code для его автоматического запуска.

Шаг № 3: Настройка Web MCP в Claude Code

Claude Code поддерживает несколько способов подключения к MCP-серверу. В этом руководстве мы рассмотрим два метода:

Использование команды mcp add.
Использование конфигурационного файла MCP .json.

Чтобы глобально настроить Web MCP-сервер в вашей установке Claude Code, выполните команду:

claude mcp add brightData .
  --env API_TOKEN=<Ваш_BRIGHT_DATA_API_KEY> 
  --env PRO_MODE=true 
  --npx -y @brightdata/mcp

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

claude mcp add brightData --env API_TOKEN=<Ваш_BRIGHT_DATA_API_KEY> --env PRO_MODE=true -- -- npx -y @brightdata/mcp

Обе команды предписывают Claude Code добавить пользовательский MCP-сервер под названием brightData. Он будет запущен с помощью указанной команды npx с переменными окружения. Другими словами, теперь Claude Code может автоматически подключаться к MCP-серверу Bright Data Web. (Помните, что включение PRO_MODE env не требуется).

После выполнения команды вы должны увидеть вывод, похожий на этот:

The output produced by the mcp add command

Это подтверждает, что MCP-сервер был добавлен в глобальный файл конфигурации Claude Code.

Если вы предпочитаете сохранять конфигурацию MCP локально для проекта, создайте файл mcp_servers.json с приведенным ниже содержимым:

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

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

Объект mcpServers указывает Claude Code, как запускать внешние MCP-серверы.
Элемент brightData определяет команду и переменные окружения, необходимые для запуска Web MCP. Установка PRO_MODE не обязательна, но рекомендуется.

Затем укажите Claude Code загрузить вышеуказанный файл конфигурации с помощью флага --``mcp-config:

claude --mcp-config mcp_servers.json

Важно: Замените <YOUR_BRIGHT_DATA_API_KEY> на ваш реальный токен Bright Data API, чтобы включить аутентификацию.

Отлично! Теперь вы готовы к тестированию интеграции MCP в Claude Code.

Шаг № 4: Проверка MCP-соединения

Независимо от того, настроили ли вы MCP-интеграцию с помощью mcp add или --mcp-config, необходимо проверить, что Claude Code действительно может подключиться к MCP-серверу Bright Data Web.

Чтобы проверить соединение, запустите Claude Code CLI и введите команду /mcp. Если все работает правильно, вы должны увидеть вывод, подобный этому:

Claude Code successfully connected to the brightData MCP

Как видите, локальный экземпляр CLI успешно подключился к настроенному MCP-серверу brightData. Отлично!

Шаг № 5: Запуск задачи в Claude Code

Чтобы проверить возможности вашего агента кодирования Claude Code, запустите задачу, подобную следующей:

Соскребите данные с сайта "https://it.linkedin.com/in/antonello-zanini" и сохраните результаты в формате JSON в локальном файле с именем "profile.json". Затем создайте простой проект Express.js с конечной точкой, которая принимает slug, представляющий профиль LinkedIn, и возвращает содержимое "profile.json".

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

Вставьте запрос в Claude Code и нажмите Enter, чтобы выполнить его. Вы должны увидеть поведение, похожее на это:

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

Claude Code разбивает запрос на четыре шага.
LLM выбирает соответствующий инструмент MCP(web_data_linkedin_person_profile) с правильными аргументами, извлеченными из подсказки(url: "https://it.linkedin.com/in/antonello-zanini").
Вам будет предложено принять выполнение инструмента.
После одобрения задача скрапинга запускается через интеграцию MCP.
Полученные данные отображаются в сыром формате (т. е. JSON).
Claude Code запрашивает разрешение на сохранение данных в локальном файле с именем profile.json.
После получения разрешения файл создается и заполняется.
Вам будет предложено создать файл package.json для проекта Node.js Express.
После одобрения файл package.json добавляется в текущий каталог.
Вам покажут код server.js, определяющий сервер Express с требуемой конечной точкой API, и попросят разрешения на его создание.
После получения разрешения файл server.js будет создан.
Вам покажут команды для установки зависимостей проекта и запуска Express-сервера.

В этом примере конечный результат, полученный в результате выполнения задачи, выглядит следующим образом:

The final instructions produced by Claude Code

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

├──── package.json
├── profile.json
└──── server.js

Замечательно! Теперь давайте проверим, работают ли сгенерированные файлы так, как ожидалось.

Шаг № 6: Изучите выходные данные

Откройте директорию проекта в Visual Studio Code и начните с изучения файла profile.json:

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

Примечание: Скрапинг LinkedIn, как известно, затруднен из-за надежной защиты от ботов. Обычный LLM не сможет надежно выполнить эту задачу, что доказывает, насколько мощным стал ваш агент кодирования благодаря интеграции Bright Data Web MCP.

Далее изучите файл package.json:

В этом файле перечислены необходимые зависимости (например, express) для определения вашего проекта Node.js.

Наконец, просмотрите файл server.js:

Обратите внимание, что в нем определена необходимая конечная точка API, указанная в подсказке. В частности, конечная точка /profile/:slug загружает данные профиля LinkedIn из файла profile.json и возвращает нужный профиль на основе идентификатора LinkedIn (используемого здесь в качестве slug).

Невероятно! Сгенерированные файлы выглядят солидно. Последний шаг – протестировать приложение Express, чтобы убедиться, что оно ведет себя так, как вы хотите.

Шаг № 7: Протестируйте сгенерированный проект

Следуйте инструкциям, предоставленным Клодом Кодом в выходных данных. Начните с установки зависимостей проекта:

npm install

Затем запустите сервер Express с помощью:

npm start

Теперь ваш сервер должен слушать localhost. Протестируйте конечную точку API /profile/:slug с помощью curl:

curl http://localhost/profile/antonello-zanini

Или в визуальном HTTP-клиенте, например Postman:

Testing the target API endpoint in Postman

Примечание: Результат должен включать правильные данные LinkedIn, считанные из profile.json.

Et voilà! API был успешно сымитирован благодаря интеграции Claude Code + Bright Data Web MCP.

Этот пример демонстрирует возможности сочетания Claude Code и Web MCP. Теперь попробуйте поэкспериментировать с различными подсказками и изучить продвинутые рабочие процессы с данными, управляемые LLM, прямо в CLI!

Заключение

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

Эта интеграция стала возможной благодаря встроенной в Claude Code поддержке MCP. Чтобы создать более сложные агенты кодирования, изучите весь спектр сервисов, доступных в инфраструктуре ИИ Bright Data. Эти инструменты могут поддерживать самые разные агентские сценарии.

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

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