Сервис MCP VS Code

MCP (Model Context Protocol) — это открытый стандарт, предоставляющий унифицированный интерфейс, который позволяет AI-моделям (таким как Copilot Chat) обнаруживать и вызывать внешние инструменты, обеспечивая множество операций, таких как чтение файлов, вызов API и выполнение задач.

В VS Code клиент MCP (Copilot) выполняет задачи с помощью инструментов, предоставляемых сервером MCP, а серверная часть может быть развернута локально или удаленно.

На рисунке выше представлена схема архитектуры MCP:

  • MCP — это ядро, с одной стороны подключающееся к клиентам (MCP-клиентам), например программам, написанным с помощью client.py; с другой стороны, через сервер (MCP-сервер) оно подключается к удаленным сервисам (таким как разноцветные значки Apps на схеме) и локальным источникам данных (таким как синий значок смайлика).

  • Клиенты также могут подключаться к MCP-хостам, таким как Claude и ChatGPT, что позволяет MCP вызывать их возможности и связывать все стороны вместе для выполнения работы~ Это похоже на создание "сети сотрудничества" для разных инструментов, позволяя MCP соединять удаленные и локальные ресурсы и при этом использовать возможности внешних больших моделей.

Перед использованием сервиса MCP в VS Code убедитесь, что установлена последняя версия Visual Studio Code.

Также необходимо установить соответствующее расширение AI для VS Code. Мы можем использовать GitHub Copilot от Microsoft и просто войти в учетную запись (включая планы Free, Business или Enterprise).

Начиная с VS Code 1.102, поддержка MCP в VS Code полностью доступна. Вы можете проверить, включена ли она, в настройках.

Настроить сервер MCP

Существует несколько способов добавить MCP-сервер в VS Code:

  • Прямая установка: перейдите к курируемому списку MCP-серверовhttps://code.visualstudio.com/mcp, выберите "Install" для любого MCP-сервера, и он будет автоматически добавлен в ваш экземпляр VS Code.
  • Настройки рабочей области: добавьте файл.vscode/mcp.jsonв рабочей области, чтобы настроить MCP-сервер для этой рабочей области и поделиться конфигурацией с участниками команды.
  • Пользовательские настройки: укажите сервер в конфигурации пользователя (через "MCP: Open User Configuration"), чтобы включить MCP-сервер во всех рабочих областях и синхронизировать его через "Settings Sync".
  • Автообнаружение: включите функцию автообнаружения (chat.mcp.discovery.enabled), чтобы обнаруживать MCP-серверы, определённые в других инструментах (таких как Claude Desktop).

В этом разделе мы используем метод настроек рабочей области.

Пример

Ниже приведён простой пример "Hello World" приложения MCP в VS Code. Сначала мы создаём файл Python test.py со следующим кодом:

Код файла test.py

import sys
import json

# Чтение запроса инициализации MCP
_ = json.load(sys.stdin)

# Вывод ответа MCP (стандартный JSON)
json.dump({
    "type": "text",
    "text": "Hello World from MCP!"
}, sys.stdout)

Далее мы создаём конфигурацию MCP-сервера, которая может возвращать "Hello World".

В папке рабочей области создайте файл.vscode/mcp.json(если каталог.vscodeне существует, создайте его) и заполните следующую конфигурацию (имитирующую простой локальный MCP-сервер):

Код файла .vscode/mcp.json

{
  "servers": {
    "HelloWorldServer": {
      "type": "stdio",
      "command": "python3",
      "args": ["test.py"]
    }
  }
}

После сохранения файла откройте палитру команд VS Code (Ctrl+Shift+P): выполните команду "MCP: Show Installed Servers":

Вы увидите настроенный "HelloWorldServer":

Запустите сервер, и он сразу же вернёт сообщение "Hello World from MCP!"

Мы можем ввести "execute HelloWorldServer" в окне чата с ИИ и увидеть результат вывода:

Откройте.vscode/mcp.jsonВ правом нижнем углу есть значок "Добавить сервер...", через который можно добавить больше сервисов, включая команды для выполнения или удалённые HTTP-сервисы:

Использование MCP для управления браузером

Мы можем управлять браузером Chrome в VS Code, например автоматически открывать веб-страницы, собирать содержимое, делать снимки экрана и даже заполнять формы.

Для этого нужен проект с открытым исходным кодом mcp-chrome, его открытый адрес: https://github.com/hangwin/mcp-chrome/.

Мы можем позволить ИИ-агентам или инструментам управлять браузером через протокол MCP.

Требования к окружению:

  • Браузер Chrome или Chromium
  • Node.js ≥ v18.19.0
  • VS Code, Github Copilot

Установка mcp-chrome-bridge

mcp-chrome-bridge — это мост между VS Code и браузером.

npm install -g mcp-chrome-bridge

Установка и настройка расширения браузера

Перейдите на страницу GitHub Releases https://github.com/hangwin/mcp-chrome/releases, чтобы скачать исходный код расширения mcp-chrome (не .crx, а полный распакованный пакет).

  • Откройте Chrome и введите: chrome://extensions

  • Включите «Режим разработчика» в правом верхнем углу

  • Нажмите «Загрузить распакованное расширение» и выберите скачанную папку расширения

  • После успешной установки нажмите на значок расширения и нажмите «Подключить»

    • Нажмите на значок расширения, чтобы открыть расширение, и нажмите Подключить, чтобы увидеть конфигурацию MCP:

    Настройка взаимодействия VS Code и MCP

    Создайте .vscode/mcp.json в каталоге проекта и добавьте следующую базовую конфигурацию:

    {
  "servers": {
     "chrome-mcp": {
      "type": "http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

    http://127.0.0.1:12306/ — это адрес прослушивания по умолчанию для службы моста расширения.

    Запустите:

    Другие расширения