Продвинутая работа с MCP серверами

📖 Теория

Что такое MCP?

Model Context Protocol (MCP) — это протокол для подключения внешних сервисов к Claude Code. MCP серверы дают Claude доступ к GitHub, браузеру, документации, task-менеджерам и другим инструментам.

Установленные MCP серверы

Проверьте конфигурацию:

cat ~/.mcp.json

GitHub MCP

Полный доступ к GitHub API через Claude Code.

Операция	Что делает	Пример
Issues	Создание, обновление, поиск issues	Создать issue с багом
Pull Requests	Создание PR, ревью, мерж	Создать PR из текущей ветки
Code Search	Поиск кода по всему GitHub	Найти функцию WithContext в Go репозиториях
Commits	Просмотр коммитов, diff	Показать последние 10 коммитов
Repositories	Создание, форк, удаление	Создать новый репозиторий

Playwright MCP

Автоматизация браузера: открытие сайтов, клики, заполнение форм, скриншоты.

Операция	Что делает	Пример
navigate	Открыть URL	Открыть https://example.com
screenshot	Сделать скриншот	Скриншот текущей страницы
click	Кликнуть элемент	Кликнуть кнопку "Login"
fill	Заполнить форму	Ввести email в поле
snapshot	Accessibility tree	Структура страницы для анализа

Context7 MCP

Актуальная документация библиотек и фреймворков.

Библиотека	Что получаете
React, Next.js	Актуальные хуки, API, примеры кода
Django, FastAPI	Роутинг, ORM, middleware
PostgreSQL, MongoDB	Синтаксис запросов, индексы
AWS, GCP, Azure	SDK, сервисы, примеры

Todoist MCP

Управление задачами из Claude Code.

Операция	Что делает
Создание задачи	Добавить задачу с дедлайном и приоритетом
Обновление	Изменить название, срок, приоритет
Завершение	Отметить задачу как выполненную
Проекты	Организация задач по проектам

🛠 Практика

GitHub MCP: Создание issue из бага

Найди все TODO комментарии в проекте и создай GitHub issue для каждого.

Claude:

1. Grep по проекту: grep -r "TODO" .
2. Анализирует каждый TODO
3. Создаёт issue через GitHub MCP с описанием и файлом

GitHub MCP: Создание PR

Создай PR из текущей ветки в main. Заголовок: "Add user authentication". Описание: что сделано, что протестировано.

Claude использует GitHub MCP:

mcp__github__create_pull_request({
  owner: "username",
  repo: "project",
  title: "Add user authentication",
  head: "feature/auth",
  base: "main",
  body: "## Changes\n- JWT auth\n- Login endpoint\n\n## Tested\n- Unit tests pass\n- Manual testing done"
})

Playwright MCP: QA тестирование

Открой http://localhost:3000, кликни "Sign Up", заполни форму (email: test@example.com, password: Test123!), сабмить и сделай скриншот результата.

Claude через Playwright MCP:

1. browser_navigate → localhost:3000
2. browser_click → кнопка "Sign Up"
3. browser_fill_form → email, password
4. browser_click → Submit
5. browser_snapshot → скриншот

Context7 MCP: Актуальная документация

Как правильно использовать React useEffect с cleanup функцией? Покажи современный подход 2026 года.

Claude вызывает Context7 MCP:

mcp__context7__query-docs({
  libraryId: "/facebook/react",
  query: "useEffect cleanup function best practices"
})

Получает актуальную документацию React 19+ и даёт ответ с примерами кода.

Todoist MCP: Создание задач из беклога

Прочитай BACKLOG.md и создай Todoist задачи для каждого пункта с приоритетом P2 и дедлайном "next week".

Claude:

1. Читает BACKLOG.md
2. Для каждого пункта вызывает Todoist MCP
3. Создаёт задачи с нужными параметрами

Интеграция всех MCP: E2E сценарий

Задача: Найти баг, зафиксить, создать PR, протестировать в браузере, создать задачу на ревью.

1. Найди баг в функции calculateDiscount() (код сломан)
2. Исправь баг
3. Создай GitHub PR с фиксом
4. Открой localhost:3000 в браузере и протестируй discount flow
5. Создай Todoist задачу для code review этого PR

Claude использует:

• Read/Edit — поиск и исправление бага
• GitHub MCP — создание PR
• Playwright MCP — тестирование в браузере
• Todoist MCP — задача на ревью

Context7 MCP: Изучение новой библиотеки

Я хочу добавить rate limiting в FastAPI. Покажи актуальный подход с примером кода.

Claude:

1. Вызывает Context7 для FastAPI rate limiting
2. Получает документацию и примеры
3. Предлагает решение с кодом

📝 Домашнее задание

🎓 После урока вы умеете

• Использовать GitHub MCP для работы с issues, PR, code search
• Автоматизировать браузер через Playwright MCP
• Получать актуальную документацию через Context7 MCP
• Управлять задачами через Todoist MCP
• Комбинировать несколько MCP в одном сценарии
• Понимать, когда MCP эффективнее ручной работы

⚠️ Настройка MCP серверов

Конфигурация ~/.mcp.json

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_..."
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@context7/mcp-server"]
    },
    "todoist": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-todoist"],
      "env": {
        "TODOIST_API_TOKEN": "..."
      }
    }
  }
}

Получение токенов

• GitHub: Settings → Developer settings → Personal access tokens
• Todoist: Settings → Integrations → API token
• Playwright: не требует токена
• Context7: не требует токена

💡 Продвинутые техники

GitHub MCP: Code search по всему GitHub

Найди примеры использования context.WithTimeout в Go репозиториях на GitHub. Покажи топ-3 примера.

Claude использует mcp__github__search_code для поиска по всему GitHub.

Playwright MCP: Автоматизация тестирования

Создайте скрипт E2E тестирования:

Создай скрипт test_checkout_flow.py, который через Playwright:
1. Открывает localhost:3000
2. Добавляет товар в корзину
3. Переходит в checkout
4. Заполняет форму
5. Сабмитит
6. Проверяет success message
7. Делает скриншот

Context7 MCP: Сравнение библиотек

Сравни Prisma и TypeORM для Next.js проекта. Какую выбрать в 2026 году?

Claude запрашивает документацию обеих через Context7 и даёт сравнение.

Todoist MCP: Импорт беклога

Прочитай BACKLOG.md, ROADMAP.md и TODO.md. Создай структуру проектов в Todoist и добавь все задачи с правильными приоритетами.

Claude организует задачи по проектам автоматически.

🔗 Связанные материалы

• Урок 25: Базовое введение в MCP
• Урок 31: gstack /browse использует Playwright под капотом
• MCP Protocol Spec: modelcontextprotocol.io

🐛 Troubleshooting

MCP сервер не запускается

# Проверить установку
npx @modelcontextprotocol/server-github --version

# Проверить токен GitHub
echo $GITHUB_PERSONAL_ACCESS_TOKEN

# Перезапустить Claude Code

GitHub MCP: Permission denied

Проверьте scopes токена: нужны repo, read:org, workflow.

Playwright MCP: Browser not found

npx playwright install chromium