AI-інструменти у веб-розробці 2026: агенти, кредити і фреймворки, які говорять з машинами

24 вересня 2026 р.

aitoolingmcpnextjscursorcopilotsecurity

Рік тому питання звучало так: «яке автодоповнення краще?». У вересні 2026-го його майже ніхто не ставить. Головні гравці перебудували продукти навколо агентів, що працюють паралельно й довго, частина інструментів зникла або змінила назву, а GitHub перевів Copilot з фіксованих лімітів на оплату за токени. Паралельно фреймворки почали віддавати агентам власну документацію й runtime-стан. Нижче про те, що з цього реально впливає на щоденну роботу frontend-розробника, а що можна пропустити.

Редактор перестав бути центром

Три моделі, які ще торік існували окремо (плагін у вашому редакторі, AI-форк VS Code, термінальний агент), за 2026 рік зійшлися в одну точку: інтерфейс, де ви не пишете код, а розподіляєте задачі між агентами й перевіряєте результат.

Cursor 3 вийшов 2 квітня з новим Agents Window: кілька агентів одночасно, локально, у git worktrees, у хмарі або через remote SSH. Там же з'явився Design Mode, де UI-елементи можна позначати прямо в браузері й віддавати агенту як ціль. Для верстальника це, мабуть, найкорисніша фіча року. У вересні Cursor пішов далі й запустив Projects (поки beta): агент-координатор сам коду не пише, а планує роботу, роздає її субагентам у хмарі й повертає вам на перевірку. Закрили ноутбук, а проєкт продовжує працювати.

Cognition зробила схожий хід радикальніше. 2 червня Windsurf оновився «по повітрю» і став Devin Desktop; за замовчуванням тепер відкривається Agent Command Center (kanban-дошка з локальними й хмарними агентами), а редактор лишився за ним. Локальний агент Cascade замінили на Devin Local, старий варіант тримали лише до 1 липня. Google у травні оголосив Antigravity 2.0 як агентну платформу, AWS просуває Kiro зі spec-driven підходом: спершу структурована специфікація, потім виконання.

Висновок простий: якщо ваш процес досі «відкрив файл, попросив дописати функцію», ви використовуєте ці продукти на третину. Але й перебільшувати не варто. Паралельні агенти добре працюють на ізольованих задачах (міграція, тести, дрібні баги з трекера) і погано там, де треба тримати в голові дизайн-систему та продуктові рішення.

Хто зник і куди мігрувати

2026 рік видався роком закриттів. Коротко:

Було	Що сталося	Куди
Windsurf	2 червня перейменовано на Devin Desktop; налаштування й розширення перенесено автоматично	Devin Desktop (плагін для JetBrains лишився з назвою Windsurf)
Gemini CLI, Gemini Code Assist (individuals, AI Pro, AI Ultra)	18 червня перестали обслуговувати запити	Antigravity, Antigravity CLI
Amazon Q Developer (IDE-плагіни)	нові реєстрації закрито з 15 травня 2026, підтримка до 30 квітня 2027	Kiro

Найболючіше вдарило по Gemini CLI. Google не дав періоду відстрочки для індивідуальних тарифів, тож будь-який скрипт, git hook чи GitHub Action, що викликав gemini з особистого акаунта, просто перестав працювати 18 червня. Ліцензії Gemini Code Assist Standard та Enterprise рішення не зачепило. Якщо ви колись підключили Gemini CLI до CI і забули, перевірте.

У Amazon Q ситуація спокійніша: рік на перехід, критичні баги фіксять до кінця. Але нові моделі вже йдуть у Kiro, а не в Q.

Практичний урок тут не про конкретних вендорів. Прив'язувати пайплайн до одного CLI ризиковано: за рік назва, власник і тарифна модель можуть змінитись двічі (Windsurf це показав дуже наочно).

Гроші: від підписки до токенів

Найвідчутніша зміна для тих, хто платить сам. З 1 червня 2026 року всі плани GitHub Copilot перейшли на usage-based білінг: замість premium requests тепер GitHub AI Credits, а вартість рахується за токенами (вхідні, вихідні й кешовані) за API-цінами конкретної моделі. Один кредит дорівнює $0,01.

Ціни підписок не змінились: Pro коштує $10 і включає 1500 кредитів, Pro+ за $39 має 7000, Max за $100 має 20 000. Частина цього обсягу є «flex»-надбавкою, яку GitHub може переглядати. Автодоповнення й Next Edit Suggestions лишились безлімітними. Усе агентне (чат, coding agent, code review) тепер реально коштує грошей. А Copilot code review у приватних репозиторіях додатково з'їдає хвилини GitHub Actions.

Що це означає на практиці: вибір моделі в пікері став фінансовим рішенням. Той самий запит на дорогій флагманській моделі й на «nano»-варіанті відрізняється в ціні на порядок. Для рутинних правок (перейменувати пропси, дописати типи, розписати Storybook-сторі) дешевої моделі вистачає. Флагман варто лишати для рефакторингу через кілька модулів і дебагу, де треба довго думати.

Cursor, Claude Code і Kiro Pro в базовому тарифі коштують по $20 на місяць, тож за вхідною ціною ринок вирівнявся. Різниця ховається в лімітах і в тому, як швидко агентна сесія спалює включений обсяг.

Фреймворки почали говорити з агентами

Для frontend це, на мою думку, найважливіша історія року, хоча про неї пишуть менше, ніж про нові моделі.

Проблема відома всім: агент пише код під ту версію API, яку бачив у тренувальних даних. Для Next.js із його App Router, Cache Components і змінами кожного мажору це означало постійні галюцинації. Vercel вирішує це з трьох боків.

Перше: Next.js 16+ постачає повну документацію в markdown прямо в пакеті, у node_modules/next/dist/docs/, у версії, що збігається з встановленою. Файл AGENTS.md у корені проєкту вказує агенту читати саме її, а не покладатися на пам'ять.

Друге: dev-сервер Next.js 16+ має вбудований MCP-endpoint /_next/mcp. Через нього агент отримує маршрути, серверні логи, помилки компіляції й runtime-помилки, а інструменти get_compilation_issues та compile_route дозволяють перевірити, чи збирається код, без повного next build.

Третє: пакет next-devtools-mcp у версії 0.4.0 (червень) став тонким конектором. Він знаходить запущені dev-сервери, проксіює їхній endpoint і направляє агента до agent-browser, CLI, який віддає DOM, консоль, мережу й Web Vitals як структурований текст. Сценарії апгрейду й міграції на Cache Components переїхали в agent skills.

Google зробив те саме для браузера. chrome-devtools-mcp дає агенту живий Chrome: performance traces з інсайтами, мережу, консоль, емуляцію, heap snapshots. Проєкт перейшов на 1.x і релізиться дуже часто. Мінімальний конфіг для проєкту на Next.js виглядає так:

json

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Одне застереження щодо chrome-devtools-mcp: за замовчуванням він може підтягувати дані CrUX для аналізу продуктивності й збирає статистику використання. Перше вимикається прапорцем --no-performance-crux, друге змінною CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS або CI. На клієнтських проєктах під NDA я б вимикав обидва.

В Astro є свій Docs MCP для актуальної документації. Патерн «версійна документація в пакеті + AGENTS.md + MCP для живого стану» підхоплюють і інші: Sanity, Zuplo, cpp.js описують майже ту саму трирівневу схему. Схоже, до кінця 2027 року це стане нормою для будь-якого фреймворку, який хоче, щоб на ньому писали агенти.

App builders: v0 і компанія

v0 від Vercel у лютому пережив великий редизайн і позиціонується вже як конструктор продакшн-застосунків з git-інтеграцією, редактором і підключенням до БД. Обмеження теж нікуди не ділось: на виході React, Next.js, Tailwind і shadcn/ui. Якщо ваш стек Vue, Svelte чи Angular, це не ваш інструмент.

Для agency-роботи v0, Lovable чи Bolt корисні як швидкий прототип для погодження з клієнтом. Для кодової бази, яку підтримуватимуть роками, результат усе одно треба пропускати через ті самі рев'ю й лінтери, що й людський код.

GhostApproval: кнопка «Дозволити» більше не захищає

8 липня Wiz Research опублікувала дослідження GhostApproval. Суть неприємно проста: у репозиторії лежить symlink, замаскований під безневинний файл на кшталт project_settings.json, який насправді вказує на ~/.ssh/authorized_keys. README просить агента «додати рядок у конфіг під час налаштування». Агент просить дозволу на редагування локального файлу, ви погоджуєтесь, а запис потрапляє в SSH-ключі.

Вразливими виявились шість інструментів: Amazon Q Developer, Claude Code, Augment, Cursor, Google Antigravity і Windsurf. AWS, Cursor і Google швидко випустили виправлення. Anthropic назвала сценарій таким, що лежить поза моделлю загроз, бо користувач сам довірив директорію, і зазначила, що попередження про symlink у Claude Code з'явилось ще 5 лютого. Паралельно The Hacker News писав про черв'як Miasma, який підкидав конфіги для AI-агентів у репозиторій, щоб payload запускався, щойно розробник відкриє проєкт в агенті.

Мораль для frontend-розробника, який щодня клонує чужі стартери, шаблони й репозиторії з тестовими завданнями: human-in-the-loop працює, лише якщо діалог показує правду. Кілька звичок, які варто завести:

відкривати незнайомі репозиторії в контейнері або окремому користувачі, а не у своєму $HOME;
перед запуском агента переглянути find . -type l і файли AGENTS.md, CLAUDE.md, .cursor/, .mcp.json;
не давати агенту auto-approve на запис у свіжоклонованому проєкті;
оновлювати агентів: більшість виправлень уже вийшли.

Довіра: використовують усі, вірять одиниці

Найсвіжіші повні дані Stack Overflow досі з опитування 2025 року (опитування 2026-го відкрилося 23 червня). Там 84% розробників використовують AI-інструменти або планують, але точності цих інструментів активно не довіряють 46%, а довіряють 33%. «Дуже довіряють» лише 3%, серед досвідчених розробників іще менше. За власними спостереженнями Stack Overflow, використання агентів відтоді подвоїлось, а занепокоєння якістю коду теж зросло.

Цифри не суперечать одна одній. Інструмент, який у 70% випадків економить годину, а в 30% дає «майже правильний» код, все одно вигідний, якщо у вас є тести й рев'ю. Без них ні.

Що з цим робити

Кілька висновків, які я б переніс у свій процес уже зараз:

Додайте AGENTS.md у кожен проєкт. Це дешево, його читають Cursor, Claude Code, Codex і Antigravity, і воно одразу зменшує кількість вигаданих API.
Для Next.js 16+ підключіть next-devtools-mcp, для будь-якого фронтенду chrome-devtools-mcp. Агент, який бачить помилку гідратації й performance trace, дебажить значно точніше за агента, який читає ваш опис скриншота.
Якщо ви на Copilot, подивіться сторінку використання AI Credits за минулий цикл і свідомо оберіть модель за замовчуванням.
Перевірте CI на залежності від Gemini CLI та Amazon Q.
Не прив'язуйтесь до однієї моделі. За вересень Anthropic випустила Claude Opus 5.5 (з 22 вересня він за замовчуванням у Claude Code), OpenAI теж оновила лінійку, і наступного місяця розклад знову зміниться. Процес, де модель легко замінити, переживе будь-який рейтинг.

Найцікавіше в 2026 році відбувається не в моделях, а в інфраструктурі навколо них: MCP-endpoints у dev-серверах, документація в node_modules, агенти, що працюють годинами в хмарі. Для frontend-розробника це означає зміну ролі. Друкувати доводиться менше, а формулювати задачу, перевіряти результат і відповідати за безпеку — значно більше.