#Подключите инструмент через MCP

_{Средний уровень · Урок 7 из 8 · около 20 минут · Нужно: Разрешения, области настроек и песочница · Сверено с Claude Code v2.1.285 (stable) 06.10.2026}

#Цель

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

#Что понадобится

• Один из ваших репозиториев и ваша копия шаблона для практики с Node.js LTS: проверка запускается из копии. Если хотите практиковаться в копии шаблона, используйте её в обеих ролях. Подготовьте в репозитории папку .practice/, как описано в уроке 1 Начального уровня, если ещё не сделали этого.
• Chrome и npm, который идёт вместе с Node.js: сервер запускается через npx (требования проекта).
• Расход лимита: небольшой.

#Идея

MCP (Model Context Protocol) позволяет Claude Code пользоваться инструментами, которые предоставляет другая программа — MCP-сервер. Сервер в этом уроке — Chrome DevTools MCP (разработчик: Google). Он работает на вашей машине и даёт Claude инструменты, чтобы открывать страницы в Chrome, читать консоль и делать скриншоты:

flowchart LR
  accTitle: Как Claude добирается до Chrome через MCP-сервер
  accDescr: Claude Code вызывает инструменты MCP-сервера chrome-devtools. Сервер — локальный процесс, запущенный через npx, — управляет браузером Chrome и возвращает результаты в Claude Code.
  A["Claude Code"] -->|вызов инструмента| B["MCP-сервер chrome-devtools, запущен через npx"]
  B --> C["Chrome"]
  B -->|результат| A

От того, где вы добавите сервер, зависит, кому он достанется (MCP installation scopes):

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

#Разбор примера

1. Сохраните в своём репозитории страницу, которую будете смотреть:

cat > .practice/demo.html <<'EOF'
<!doctype html>
<title>Linkcheck demo</title>
<h1>Linkcheck demo</h1>
<script>console.warn('demo warning from the page');</script>
EOF

2. Добавьте сервер на уровне local, для себя. Версия закреплена, --isolated даёт браузеру временный профиль, а два других флага и переменная отключают передачу данных (configuration). Всё после -- — собственная команда сервера:

claude mcp add --env CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1 --transport stdio chrome-devtools -- npx -y chrome-devtools-mcp@1.10.1 --isolated --no-usage-statistics --no-performance-crux

3. Выполните claude mcp get chrome-devtools. Команда покажет, в какой области хранится сервер (здесь local), и его статус (Find your configuration on disk).
4. Запустите claude и выполните /mcp: в списке будет chrome-devtools с его инструментами. Затем попросите:

Use the chrome-devtools tools to open .practice/demo.html as a file: URL, and tell me its title and console messages.

Откроется окно Chrome, и Claude сообщит заголовок Linkcheck demo и предупреждение из консоли. В ручном режиме (Manual) Claude Code запрашивает разрешение, когда Claude впервые использует каждый инструмент (Configure permissions).

#Ваша очередь

Поделитесь сервером с командой на уровне проекта.

1. Удалите свою локальную копию, иначе она будет иметь приоритет над одноимённым сервером проекта: claude mcp remove chrome-devtools -s local.
2. Сохраните этот незаконченный файл как .mcp.json в корне репозитория и замените каждый TODO значениями из команды в разборе примера:

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "TODO: the package at an exact version", "--isolated", "TODO: no usage statistics", "TODO: no CrUX lookups"],
      "env": { "TODO: the variable that turns off update checks": "1" }
    }
  }
}

3. Закоммитьте .mcp.json.
4. Запустите claude. Когда он спросит о новом MCP-сервере, найденном в проекте, выберите вариант «использовать». Теперь /mcp показывает его как подключённый (Edit .mcp.json directly).
5. Попросите Claude открыть .practice/demo.html инструментами chrome-devtools и сохранить скриншот страницы в .practice/i-7-page.png.

#Проверка

Урок пройден, когда выполнено всё это:

• Закоммиченный .mcp.json закрепляет точную версию пакета и отключает статистику использования, запросы к CrUX и проверку обновлений: git show HEAD:.mcp.json | jq '.mcpServers["chrome-devtools"]' это показывает.
• Сервер сохранил скриншот: file .practice/i-7-page.png сообщает PNG image data.
• Самопроверка (не тестируется): после вашего одобрения /mcp показал chrome-devtools как подключённый.

Запустите npm run check -- i-7 --dir <your repo> из своей копии для практики или npm run check -- i-7 в самой копии.

Если не проходит первый пункт, сравните каждый аргумент с командой из разбора примера: @latest — это не закреплённая версия. Если скриншота нет, выполните /mcp и посмотрите, подключился ли сервер. Если вы пропустили запрос одобрения, одобрите сервер там; если отказались, выполните claude mcp reset-project-choices и снова запустите claude (Project scope).

#Осторожно

• Запуск claude -p загружает серверы проекта без вопросов (Project scope). Прочитайте .mcp.json репозитория, прежде чем запускать в нём Claude Code из скрипта.
• Чтобы снова получить вопрос о серверах проекта, выполните claude mcp reset-project-choices.

Стороннее ПО: оно может выполнять код на вашей машине или давать Claude новые инструменты. Изучите его перед установкой; это руководство его не проверяет.

Перечень сверен с критериями включения 06.10.2026.

#Что дальше

• Connect to MCP servers: добавление удалённых серверов, вход в них и другие способы добавить сервер.
• The MCP Registry: список публичных серверов от проекта MCP, помеченный как «preview» (About).
• What is the Model Context Protocol (MCP)?: сам протокол.

_{Источники: Connect Claude Code to tools via MCP · Connect to MCP servers · Configure permissions · Chrome DevTools MCP README · Chrome DevTools MCP configuration · The MCP Registry}

_{← Делегируйте задачу своему субагенту · Оглавление Среднего уровня · Установка плагинов и управление ими → · Тема: MCP · Застряли на уроке?}