Генерация изображений в VS Code: настройка Copilot MCP

Сервер MCP для VS Code — это внешний набор инструментов, который режим агента в GitHub Copilot может вызывать прямо из чата. Достаточно добавить один JSON-файл в репозиторий, и у Copilot появятся возможности, которых нет у базовых моделей, включая генерацию изображений. Copilot может целый день писать компоненты и рефакторить тесты, но ни одна модель не умеет создавать файлы изображений сама по себе. Подключите сервер генерации, и запрос вроде «сделай баннер 16:9 для этого README» превратится в команду, результатом работы которой станет готовый файл в папке assets/.

Если вы пришли только за готовым конфигом, вот он. Создайте API-ключ в своем профиле BananaBanana и положите этот код в файл .vscode/mcp.json в корне репозитория:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "bb-api-key",
      "description": "BananaBanana API key (bb_live_...)",
      "password": true
    }
  ],
  "servers": {
    "bananabanana": {
      "type": "http",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:bb-api-key}"
      }
    }
  }
}

Запустите сервер (VS Code покажет подсказку Start прямо внутри файла), вставьте ключ по запросу — и готово. Файл не содержит секретных данных, так что его можно спокойно коммитить. Никаких локальных процессов, учетных записей Google Cloud или подписок: плата за картинки списывается с предоплаченного баланса (от $0.03 за штуку), за видео — от $0.10. Оба демонстрационных изображения ниже я сгенерировал с помощью активного ключа через тот самый HTTP-эндпоинт, на который указывает этот конфиг, пока писал текст. Логи работы и счет за медиафайлы на $0.55 вы найдете ниже.

Зачем учить GitHub Copilot генерировать изображения?

Потому что картинки в репозитории обычно нужны в самый неподходящий момент. Главный баннер (hero-изображение) для README, чтобы страница проекта не встречала гостей стеной бейджей. Баннер для сайта документации. Если не считать скриншоты, создание каждого такого ассета раньше превращалось в целый квест: открыть вкладку браузера, написать промпт, скачать файл, переименовать, перетащить в репозиторий, вернуться в редактор. Минут десять на каждый элемент, если все пройдет гладко.

Благодаря серверу MCP, Copilot выполняет весь этот цикл в режиме агента. Он сам формулирует промпт, вызывает инструмент generate_image, сохраняет файл в нужную папку и обновляет ссылку в markdown-файле. Вам остается только проверить diff.

Но главная причина — это удобство работы в команде. Именно поэтому я написал отдельное руководство, а не ограничился разделом в статье про Cursor. Файл .vscode/mcp.json привязан к рабочей области. Достаточно закомитить его один раз, и любой разработчик после клонирования репозитория сразу получит готовый набор инструментов для работы с графикой. При первом запуске VS Code сама запросит у него персональный ключ. Один конфиг, по ключу на человека и никаких секретов в git.

Конечно, существуют и локальные серверы MCP для генерации изображений. Они вполне хороши, если вам нравится запускать процессы Node на своей машине и возиться со своим API-ключом Google со всеми его квотами и лимитами. Удаленный вариант избавляет от этой рутины: эндпоинт уже работает на нашей стороне на тех же мощностях, что и веб-генератор BananaBanana, а единственное, что вам понадобится — это легко отзываемый ключ bb_live_.

Как настроить mcp.json в VS Code?

Параметры конфигурации проверены на соответствие официальной документации VS Code по MCP по состоянию на July 11, 2026. Всего три шага.

Во-первых, зарегистрируйтесь и перейдите в Профиль → MCP API Keys. Ключ показывается только один раз и хранится у нас в хэшированном виде, так что скопируйте его сразу. Баланс новых аккаунтов по умолчанию пополняется на $0.20 — этого хватит на шесть тестовых изображений на самой дешевой модели.

Во-вторых, создайте конфигурационный файл. Его можно разместить в двух местах:

• .vscode/mcp.json в репозитории — именно этот вариант стоит добавить в систему контроля версий (git);
• пользовательский mcp.json (Палитра команд → MCP: Open User Configuration), который будет активен во всех рабочих областях.

Конфиг в начале статьи использует механизм inputs, и это, пожалуй, самое элегантное решение для работы с секретами среди всех клиентов MCP, что мне доводилось настраивать. Переменная ${input:bb-api-key} указывает VS Code запросить значение при первом запуске сервера. Параметр "password": true скрывает вводимые символы, а сам ключ сохраняется в зашифрованном хранилище системы, а не записывается в файл. Сравните это с Cursor, где подстановка через ${env:…} зависит от того, видит ли редактор переменные окружения вашей оболочки (классическая проблема при запуске приложений через графический интерфейс). VS Code полностью решает эту сложность.

В-третьих, запустите сервер: Палитра команд → MCP: List Servers → bananabanana → Start, или просто кликните по подсказке прямо в JSON-файле. Откройте Copilot Chat в режиме агента, загляните в список доступных инструментов, и вы увидите семь новых функций — от list_models до list_generations. На нашей странице серверов MCP опубликована таблица совместимости для всех протестированных клиентов. Строка VS Code показывает конфигурацию, которую мы подробно разбираем в этой статье:

Ничего не появилось? В разделе о нюансах ниже мы разберем три основные причины, одна из которых — корпоративная политика организации в GitHub, которую невозможно изменить из самого редактора.

Сценарий: добавляем графику для README и документации прямо в репозиторий

Сценарий, который лег в основу этой статьи: ваша команда выкладывает CLI-утилиту в опенсорс, и репозиторию требуется красивое hero-изображение для README и картинка для раздела быстрого старта. В Copilot Chat (в режиме агента) вы просите сделать баннер, после чего ИИ-ассистент составляет детальный промпт в стиле профессиональной фотографии и вызывает нужный инструмент. Вот реальный лог выполнения запроса со всеми идентификаторами задач:

→ generate_image {"prompt": "A wide photorealistic hero banner for a GitHub
   README of an open-source terminal application: a sleek dark laptop on a
   light oak desk showing colorful command-line output, soft morning window
   light from the left, shallow depth of field, 50mm lens, generous clean
   negative space on the right side for a project title, no text, no logos",
   "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgq90ou00036k7f86f0y54w", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.18}
→ get_result {"job_id": "cmrgq90ou00036k7f86f0y54w"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

Примерно двадцать секунд от вызова до готового файла. Вот результат с первой же попытки:

Небольшое честное предупреждение перед тем, как вы начнете использовать такие изображения: если сильно приблизить картинку, текст на экране окажется просто правдоподобной абракадаброй. В стандартном масштабе README этого никто не заметит. Но если использовать изображение как огромный баннер в документации, где важна каждая деталь, это может броситься в глаза. Отрисовка читаемого текста интерфейса на картинках — до сих пор слабое место любой фотореалистичной модели. Поэтому старайтесь делать экраны на изображениях мельче или запрашивайте абстрактный интерфейс.

Изображение для руководства по быстрому старту создается похожим образом, но с более спокойным сюжетом: вид сверху (flat-lay), клавиатура, распечатанная схема со стикерами и чашка чая. Один вызов обошелся в $0.11:

Оба примера сгенерированы на модели Nano Banana Pro, поскольку они выступают лицом этой страницы. Для внутренних баз знаний или шаблонов задач в трекере я бы без раздумий выбрал модель nano-banana-2-lite по цене $0.03. В руководстве по Lite-модели подробно описано, для каких сценариев отлично подходит этот экономичный вариант. Временные ссылки на файлы остаются активными в течение 24 hours, а новый вызов get_result мгновенно их обновляет.

Прямо в этом же чате можно создавать и видео. При первом вызове generate_video средства никогда не списываются: инструмент сначала возвращает предварительную стоимость, и агенту необходимо повторить запрос, подтвердив точную сумму с помощью confirm_cost. Беззвучный ролик в качестве 720p обойдется от $0.10, а генерация в Omni Flash со звуком стоит $0.10 за секунду — то есть $0.30 за трехсекундный дубль.

Особенности VS Code, о которых лучше знать заранее

В ходе тестирования этой схемы мы собрали несколько важных нюансов, расположенных в порядке вероятности столкновения с ними.

1. Корневой ключ называется servers, а не mcpServers. Почти все популярные клиенты (Claude, Cursor, Windsurf) используют ключ mcpServers, поэтому скопированные из их документации конфиги просто не запустятся в VS Code. При этом предупреждения JSON-схемы легко пропустить. Та же ловушка подстерегает вас и при переносе настроек из VS Code в другие редакторы. Кроме того, для удаленных серверов рекомендуем явно указывать поле type: "http".

2. Изменить сохраненный ключ на удивление сложно. При первом запуске редактор сохраняет введенное значение в зашифрованном виде, но простой кнопки «редактировать секрет» в интерфейсе нет. Рабочий вариант: откройте .vscode/mcp.json, наведите курсор на имя сервера и воспользуйтесь всплывающими кнопками управления, чтобы перезапустить его со сбросом параметров. Также можно стереть сохраненные данные через MCP: List Servers → сервер → отключить и добавить заново. Сложнее всего приходится при работе через Remote SSH: здесь у механизма повторного ввода ключа есть известные баги, зафиксированные в трекере задач VS Code. Замена недействительного ключа может отнять у вас пару минут неожиданной возни с кликами.

3. На тарифах Copilot Business и Enterprise поддержка MCP отключена, пока администратор не изменит настройки. Для рабочих мест от организации политика «MCP servers in Copilot» выключена по умолчанию, как указано в документации по политикам GitHub. Хуже всего то, как проявляется эта проблема: сервер запускается без ошибок, конфигурация проходит валидацию, но инструменты просто не появляются в чате. Если у вас личный тариф Copilot (включая Free), беспокоиться не о чем.

4. Действует жесткий лимит в 128 инструментов на один запрос в чате. В этот лимит входят встроенные функции, инструменты расширений и каждого активного сервера MCP, согласно документации по инструментам агента. Наш сервер добавляет семь инструментов, что само по себе немного. Но если подключить сразу несколько серверов с большим числом функций, запросы начнут выдавать ошибку. Чтобы это исправить, придется отключать лишние серверы в списке инструментов. Хотя VS Code умеет группировать избыточные инструменты за виртуальными заглушками, на практике надежнее держать включенными только те серверы, которыми вы пользуетесь прямо сейчас.

5. Инструменты работают только в режиме агента, и каждый вызов требует подтверждения. Функции MCP нельзя вызвать из обычного режима вопросов-ответов (ask mode). Если модель упорно описывает картинки словами вместо того, чтобы сгенерировать их, проверьте выбранный режим работы чата. В окне подтверждения можно разрешить инструменту выполняться в рамках текущей сессии, рабочей области или разрешить это навсегда. Для бесплатных вызовов вроде list_models и get_result можно смело выбрать «навсегда» (always). Но для функции generate_image лучше оставить подтверждение при каждом запросе, ведь каждая генерация расходует реальные деньги. Что касается видео, там в любом случае действует дополнительная защита через подтверждение стоимости confirm_cost на нашей стороне.

Сколько стоили демонстрационные медиафайлы для этой статьи?

Стандартные расценки за генерацию — те самые цифры, которые list_models возвращает агенту:

В этот раз все изображения получились отличными с первой же попытки. Такое случается не всегда, поэтому закладывайте бюджет на повторные генерации (reroll), особенно для картинок со сложной геометрией объектов или изображением экранов. Обязательно проверяйте результаты в полном разрешении перед тем, как отправлять их в основную ветку репозитория.

Если вы уже используете наш сервер в другом редакторе, файл .vscode/mcp.json — единственное, что вам нужно добавить. Ключ, баланс и история генераций остаются прежними. Если вы настраиваете все с нуля, загляните в руководство по Claude Code — там описаны еще четыре сценария использования, которые переносятся практически без изменений. Начнем? Тогда получите ключ и попросите Copilot сгенерировать ваш первый баннер для README.

FAQ

Поддерживает ли VS Code удаленные серверы MCP с заголовком Authorization?

Да, из коробки. Удаленный сервер настраивается с помощью параметров type: "http", url и необязательного объекта headers в файле mcp.json. Подстановка через ${input:…} позволяет не хранить конфиденциальные данные в самом файле. Это подтверждено официальной документацией VS Code по MCP по состоянию на July 11, 2026. Кроме того, VS Code поддерживает авторизацию по OAuth для удаленных серверов. В настоящее время наш эндпоинт использует Bearer-токены, а в будущем мы планируем добавить OAuth 2.1 как альтернативный вариант.

Безопасно ли коммитить .vscode/mcp.json в git?

Да, если ключ заменяется ссылкой через inputs, а не прописан в файле в открытом виде. В репозиторий попадает только шаблон конфига. VS Code сама запросит значение у каждого разработчика при первом запуске и сохранит его в зашифрованном хранилище. Такое разделение очень удобно: у каждого сотрудника будет собственная история использования и индивидуальный лимит дневных расходов в долларах США в меню Профиль → MCP API Keys. А отключить доступ уволившемуся коллеге можно в один клик, просто отозвав его ключ, что никак не затронет остальных участников команды.

Почему инструменты MCP не отображаются в Copilot Chat?

Чаще всего это происходит по одной из трех причин. Во-первых, вы находитесь не в режиме агента, а другие режимы чата просто не поддерживают инструменты MCP. Во-вторых, сервер может быть не запущен — выполните команду MCP: List Servers и проверьте его статус. В-третьих, если вы используете рабочий аккаунт от компании, администратор мог отключить политику «MCP servers in Copilot». В этом случае ошибка происходит без предупреждений: сервер работает, но функции скрыты. Если же инструменты видны, но вызовы возвращают ошибку 401, значит, ключ недействителен или был отозван. Быстро проверить его статус можно с помощью тестового запроса, скопировав пример со страницы сервера MCP.

Нужен ли мне API-ключ Google для генерации изображений в VS Code?

Нет. Локальные серверы MCP общаются с Gemini API напрямую, что требует от вас наличия собственного ключа Google, отслеживания квот и оплаты счетов. Наш удаленный сервер берет эти заботы на себя, отправляя запросы через управляемый BananaBanana пул ключей Vertex AI. Единственное, что вам нужно — это ключ bb_live_ из профиля. Оплата происходит поштучно за каждую генерацию, без обязательного минимального платежа, а баланс расходуется совместно с веб-приложением.

Может ли GitHub Copilot генерировать видео через этот же сервер?

Да, но с обязательным подтверждением стоимости. Вызов generate_video сначала возвращает предварительный расчет, и агенту необходимо повторить команду с параметром confirm_cost, указав точную сумму, чтобы началось списание. Стоимость варьируется от $0.10 за короткий беззвучный ролик в качестве 720p до $4.40 за высококачественный рендер модели Veo 3.1 со звуком. А генерация в Omni Flash со звуком тарифицируется по $0.10 за секунду ($0.30–$1.00 за клип). Генерация видео занимает от одной до десяти минут, поэтому агент будет периодически вызывать метод get_result в фоновом режиме, продолжая при этом работать над вашим кодом.