Практикум по интеграции
MCP-серверы для Claude Code: установка, проверка, использование
Установите MCP-серверы в Claude Code, проверьте подключение и используйте их по делу: Context7 для свежей документации и Playwright для управления браузером. Каждый шаг проиллюстрирован.
Иллюстрированный разбор на 16 шагов — читается около 6 минут. Каждый шаг ссылается на точный момент исходного видео.
Коротко
MCP-серверы дают Claude Code инструменты, которых в нём нет из коробки: клиенты баз данных, браузеры, библиотеки документации. Выполните claude mcp add <name> -- <command> с флагом --scope project, чтобы конфигурация попала в .mcp.json и уезжала в репозиторий вместе с коммитами; если локальный stdio-сервер не подключается, переключитесь на его hosted-вариант по HTTP. Перезапустите Claude Code, проверьте зелёную галочку в /mcp, а затем укажите сервер в промпте — «use context7» — и он подтянет свежую документацию или поуправляет настоящим браузером.
Об исходном видео
Эта страница следует уроку про MCP-серверы из курса Net Ninja по Claude Code и воспроизводит его настройку Context7 и Playwright шаг за шагом.
Скриншоты — кадры из видео, права принадлежат автору; текст написан нами. Шаги сверены с видео в сентябре 2026 года.
Что такое MCP-сервер на самом деле
Небольшой адаптер, одалживающий Claude Code новые инструменты.
- 1
MCP-сервер — это подключаемый адаптер
MCP (Model Context Protocol) — открытый протокол от Anthropic, позволяющий модели вызывать инструменты за пределами кодовой базы: базы данных, браузеры, библиотеки документации. С внешним сервисом работает не Claude Code, а сервер, который возвращает результат в виде инструментов, доступных модели.
Claude Code спрашивает сервер, сервер спрашивает Supabase.Смотреть с 2:04 - 2
Выбираем серверы из каталога
Сотни готовых серверов собраны в каталогах вроде pulsemcp.com, а сайт каждого проекта показывает покрытие — на главной Context7 перечислены фреймворки и библиотеки, для которых он умеет подтягивать актуальную документацию. На этой странице ставятся два: Context7 для свежих документов и Playwright для автоматизации браузера.
Каталоги перечисляют серверы, сайты проектов — покрытие.Смотреть с 2:32
Добавляем сервер Context7
Одна команда в терминале, один JSON-файл в репозитории.
- 3
Два транспорта, одна команда
В документации Anthropic описаны три способа добавления, но важны два: локальный stdio-процесс на вашей машине и удалённое HTTP-подключение. Форма команды одинакова: claude mcp add, имя сервера, двойное тире, затем команда запуска.
Локальный stdio или удалённый HTTP — форма та же.Смотреть с 3:10 - 4
Копируем команду из README проекта
Проекты с хорошей поддержкой выдают готовую строку установки. В репозитории Context7 в разделе Claude Code показана команда локального подключения, а выше — удалённые варианты; скопируйте подходящую.
README отдаёт точную строку для вставки.Смотреть с 4:30 - 5
Фиксируем область через --scope project
Перед запуском добавьте --scope project, чтобы конфигурация попала в .mcp.json проекта и ехала вместе с репозиторием — коллеги получат те же серверы после клона. Альтернативы: local (только вы, только этот проект) и global (все проекты на машине). В Windows перед командами npx нужен префикс cmd /c, чтобы оболочка закрылась после запуска.
Область project коммитит сервер в репозиторий.Смотреть с 5:28 - 6
.mcp.json Claude Code пишет сам
После успешного добавления в корне проекта появляется .mcp.json с объектом mcpServers. Каждая запись хранит тип транспорта и всё нужное для запуска — здесь stdio-процесс с командой и массивом аргументов.
Один JSON-объект, по записи на сервер.Смотреть с 6:42 - 7
Если локальный вариант падает — переключаемся на удалённый
Локальные stdio-подключения бывают капризными, пока пакеты меняются. Запасной вариант — hosted-версия: в README Context7 описана команда с HTTP-транспортом, и с --scope project она попадёт в тот же файл. Терминал подтвердит добавление и покажет изменённый файл.
Удалённый HTTP — надёжный запасной вариант.Смотреть с 8:40 - 8
HTTP-запись занимает три строки
Удалённым серверам не нужен локальный процесс, поэтому конфигурация минимальна: type http и URL сервера. После ручного редактирования файла перезапустите Claude Code, чтобы новое подключение подхватилось.
Тип и URL — ничего устанавливать не нужно.Смотреть с 8:52
Проверяем подключение и применяем
Сначала зелёная галочка, потом настоящая задача.
- 9
Проверяем подключение через /mcp
Внутри сессии команда /mcp открывает панель Manage MCP servers. Зелёная галочка рядом с сервером означает подключение; упавшую запись можно переподключить клавишей Enter. Панель также показывает, какой файл читает каждая область, — полезно, когда правка конфигурации не применяется.
Зелёная галочка — инструменты работают.Смотреть с 9:21 - 10
Называем сервер в промпте
Явное «use context7» направляет запрос к инструментам этого сервера. Здесь задача — сверить конфигурацию Tailwind с последней документацией, а файл @src/app/globals.css приложен, чтобы Claude прочитал нужный файл, прежде чем обращаться к серверу.
Названный сервер и приложенный файл.Смотреть с 9:48 - 11
Context7 сначала определяет ID библиотеки
Прежде чем что-то скачивать, Context7 выполняет resolve-library-id, сопоставляя «Tailwind CSS» с правильным ID и темой. Одобрите вызов инструмента — и он сразу перейдёт к загрузке документов: два коротких вызова вместо устаревшей догадки.
Определение ID библиотеки перед загрузкой документов.Смотреть с 10:02 - 12
Ответ опирается на свежую документацию
Ответ — переменные темы корректно настроены для Tailwind CSS v4, с аргументацией по пунктам — основан на только что загруженной документации, а не на устаревших данных обучения. В этом смысл сервера: ответы соответствуют библиотеке такой, какая она есть сейчас.
Пообъектный вердикт для v4.Смотреть с 10:45 - 13
Превращаем в привычку через CLAUDE.md
Ввод # в промпте сохраняет память проекта: «Use Context7 to check up-to-date docs when needed for implementing new libraries or frameworks». Она попадает в CLAUDE.md, и каждая будущая сессия этого проекта будет применять это правило автоматически.
Память проекта превращает разовое действие в правило.Смотреть с 11:10
Добавляем Playwright для управления браузером
Тот же сценарий, вторая суперсила.
- 14
Playwright ставится тем же способом
В README Playwright MCP в разделе Claude Code — тот же сценарий установки: одна строка claude mcp add с npx-пакетом. Добавьте --scope project, выполните в корне проекта и перезапустите сессию, чтобы новый сервер подключился.
Тот же сценарий, второй сервер.Смотреть с 11:14 - 15
Оба сервера живут в одном файле
Теперь в .mcp.json проекта две записи рядом: Context7 по HTTP и Playwright как локальный stdio-процесс. Любую можно отредактировать вручную, когда сервер меняет флаги запуска, — этот файл единственный источник правды.
Две записи, два транспорта, один файл.Смотреть с 12:17 - 16
Доверяем Claude настоящий браузер
С подключённым Playwright просьба открыть страницу и пересказать её запускает инструмент Navigate to a URL — на вашей машине реально открывается окно браузера, и модель читает отрендеренную страницу. Полезно для смоук-тестов своих сайтов и проверки компонентов вживую.
Живой браузер под управлением модели.Смотреть с 12:58