Генерація зображень у 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 у репозиторії — саме цей варіант варто закомітити;
• користувацький 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). Якщо модель продовжує описувати зображення словами замість того, щоб створити їх, спочатку перевірте режим роботи чату. Вікно підтвердження дозволяє схвалити виконання інструменту на один сеанс, для робочої області або назавжди (always). Для безкоштовних викликів на кшталт list_models та get_result цілком підійде варіант «назавжди». Але для 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, а не прописаний у самому файлі у відкритому вигляді. Закомічений JSON містить лише шаблон; 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 у фоновом режимі, продовжуючи при цьому працювати над вашим кодом.