ШІ у фронтенді: огляд ChatGPT, CodeRabbit, V0 та інших помічників

Часи, коли ми дискутували, чи є ШІ прогресом чи деградацією, вже минули. Сьогодні це «must-have» для розробника, який додає йому апгрейд та додаткових навичок. Працюючи з ШІ, потрібно досліджувати тренди та пробувати нове. Проте не варто розпорошуватися на десятки різних інструментів — це призводить до дефокусу, і ви просто втрачаєте час на пошуки, замість того, щоб навчитися працювати з тим, що у вас є. Достатньо 2, 3, або 5 інструментів, які гармонійно інтегруються у вашу роботу та дійсно покращують процеси. Усе інше — це як 100 встановлених NPM-пакетів, які ви вже не пам’ятаєте, навіщо завантажили. Владислав Семьонов, Front-end Developer в OBRIO поділився сценаріями використання ШІ-інструментів, які спрощують роботу та допомагають сфокусуватися на найважливішому — створенні якісного продукту.

ChatGPT: персональний техлід чи «жовта качечка»

Я розглядаю ChatGPT як персонального помічника, який доступний цілодобово, без вихідних і завжди в гарному настрої. Сценарії використання:

Створення назв 

Не існує розробника, який не стикався з проблемою назв для змінних, функцій, методів чи сервісів. ChatGPT ідеально допомагає в цьому. Наприклад, коли дизайнер надсилає чергову ілюстрацію, а ви не можете зрозуміти, чим вона відрізняється від попередньої, можна завантажити зображення в ChatGPT — він його проаналізує та запропонує декілька інформативних та лаконічних назв. 

Пошук рішень

Бувають моменти, коли не знаєте, з чого почати роботу. У цьому випадку ChatGPT може запропонувати ідеї, найкращі практики, підходи до вирішення завдань, а також їхні trade-offs. Якщо у вас є кілька варіантів реалізації, але недостатньо досвіду, щоб передбачити їхні наслідки, ви можете попросити ChatGPT проаналізувати їх у вашому контексті. Він покаже плюси та мінуси, що допоможе прийняти рішення.

Декомпозиція задач 

Коли ви отримуєте велику фічу, з якою ще не працювали, а менеджер вже запитує про приблизний естимейт, ви можете використати ChatGPT для декомпозиції задачі. Це знімає тривогу і дає структурований план, з чого почати.

Як і з будь-якою мовною моделлю, результат не завжди виправдовує очікування. Проте ви можете впливати на якість результату, працюючи над своїми промптами. Чим краще ви напишете запит, тим якіснішим буде результат. Насправді це схоже на написання коду. Рекомендую дослідити цю тему, оскільки вона справді впливає на вашу роботу зі штучним інтелектом.

GitHub Copilot: інтегрований помічник

Наступний інструмент — GitHub Copilot, з яким я працюю у VS Code. Сценарії використання

Автоматизація документації 

Мені подобається створювати інформативний код, де все зрозуміло завдяки документації: опис, параметри, аргументи, їхні типи тощо. Проте писати це вручну щоразу не дуже зручно. Copilot створює шаблон документації за секунду. Зазвичай він аналізує контекст настільки добре, що у 95% випадків вам залишається лише дописати опис методу чи функції.

Інтеграція з API

Цей сценарій особливо рятує, коли бекенд ще в розробці. Ви можете швидко протестувати роботу фронтенду, не чекаючи готового ендпоінта. Наприклад, надавши JSON-структуру з очікуваною відповіддю від сервера, Copilot здатен згенерувати відповідний TypeScript-інтерфейс. Або, коли є інтерфейс, він може створити mock-дані. Це дає змогу швидко перевірити інтеграцію, розробити UI, провести початкові тести й навіть зробити демо для команди чи стейкхолдерів. 

Генерація комітів 

Якщо ви плідно попрацювали цілий день, вже не можете думати, але хочете зробити коміт, Copilot допоможе згенерувати зрозумілий та структурований коміт-меседж. Для цього у VS Code є чарівна кнопочка «git diff». Він чудово аналізує контекст і створює осмислене повідомлення, яке зазвичай вимагає лише невеликих коректив.

Дослідження open-source проєктів 

Допомагає, коли потрібно швидко розібратись у великому й незнайомому коді, наприклад, в open-source проєкті. Замість того щоб вручну продиратись через десятки файлів, можна дати йому завдання пояснити архітектуру чи показати, як пов’язані між собою модулі. Він добре підхоплює логіку директорій, може прокоментувати незрозумілий неймінг або пояснити, чому використано той чи інший підхід. 

Рефакторинг

Copilot суттєво прискорює рефакторинг, бо розуміє контекст коду. Я переніс приблизно тисячу юніт-тестів із застарілого фреймворку на Jest. Без Copilot це забрало б 1,5-2 тижні, а після перших кількох тестів з’являється втома й механічні помилки. Після того як я показав йому декілька прикладів, Copilot підхопив патерн, і з моїм рев’ю ми завершили роботу за 2-3 дні.

Генерація README 

Останній, але не менш важливий сценарій — Copilot допомагає генерувати README для бібліотек чи проєктів. Це особливо корисно, коли ви приходите на великий проєкт, а там файл складається з трьох рядків. 5 хвилин з Copilot — і ви отримаєте якісний README та плюс в карму команди.

CodeRabbit: нетоксичний код-рев'ювер

Наступний інструмент — CodeRabbit. Це цікавий інструмент, який ми ще тестуємо, але він вже показує чудові результати. CodeRabbit добре проявляє себе на етапі pre-review або першого рев'ю merge-реквесту.

Що він вміє:

• вловлює антипатерни, дублікат коду, неочевидні залежності;

• не пропускає дрібниць навіть у 50+ змінених файлах. Наприклад, одруківки або різницю між українською «с» та англійською «c»;

• Підказує, якщо можна спростити логіку, винести код в окрему функцію або покращити неймінг.

CodeRabbit працює безпосередньо в pull request, формуючи детальний опис та надаючи зворотний зв’язок. Ще одна перевага в тому, що CodeRabbit навчається, базуючись на ваших відповідях під його коментарями. Також його можна налаштувати під ваші код-конвенції та правила, які ви використовуєте у проєкті. Це значно економить час ваших колег на початкове рев'ю коду.

V0 by Vercel: code sandbox на стероїдах

На V0 від Vercel я натрапив нещодавно, і він проявив себе дуже ефективно. Це AI-генератор, який створює готовий UI-код на основі описів, скриншотів або макетів Figma. По суті це сандбокс, який генерує початковий код та значно прискорює етап прототипування та написання UI. В код легко внести зміни та переглянути прев'ю. Крім того, V0 одразу розгортає кожне рішення, що дозволяє отримати зовнішнє посилання та поділитися ним з колегами. Це дуже економить час.

Наприклад, мені потрібно було протестувати ідею реалізації реакцій під повідомленнями. Всього за один промпт V0 згенерував необхідний плейграунд з хедером, датами та готовими емодзі. Він навіть запропонував декілька варіантів реалізації з реакціями.

Також V0 може допомогти швидко створити адміністративну панель або дашборд для внутрішніх сервісів. Жоден інструмент досі не може впоратися зі складною версткою, я сподіваюся, скоро це зміниться.

Отже, використання цих інструментів дозволяє заощадити до 20% часу. Рутинні завдання виконуються швидше, а складніші — з підказками.