Антон Непша.js

Советы по вайб-кодингу

Я тут на выходных навайбкодил свою первую мини-игру, в которой машинка бесконечно уезжает в закат по пустынной дороге.

Если вы никогда не сталкивались с понятием "вайб-кодинг", очень советую ознакомиться со статьёй на Tproger — там хорошо расписана история возникновения понятия, его суть и примеры.

Игру сделал с помощью Cursor, весь код сгенерирован моделью claude-3.7-sonnet. На примере этой игры хочу рассказать, с какими сложностями я столкнулся и так ли это просто — писать код с помощью нейросетей.

Не пытайтесь уместить огромное ТЗ со всеми нюансами реализации в один промпт Лично в моём случае более результативным оказалось строить маленький MVP и шаг за шагом его улучшать. Мой стартовый промпт выглядел так: Создай веб игру на threejs, где нужно с помощью WASD управлять машинкой и уезжать в закат по пустынной дороге. Дорога всегда идёт вперёд и генерируется динамически перед игроком. В результате я получил игру, в которой у машинки было инвертировано управление, а солнце просто лежало на дороге — но это был лучший результат, которого удалось достичь за 2 часа экспериментов с разными моделями и промптами. Дальнейшая работа строилась из багфиксов и добавления новых фич поверх существующего MVP.

Используйте чекпоинты и перефразируйте промпты Если нейросеть не может исправить ваш баг, не нужно бесконечно писать ей «всё равно не работает», «до сих пор ошибка» и т.д. — она просто нагенерит костылей поверх костылей и вы быстро всё сломаете.

Вместо этого вернитесь в курсоре на тот чекпоинт, где вы только начали исправлять ошибку, и перефразируйте свой промпт.

Разбирайтесь в коде, который генерирует нейросеть Если знать нюансы реализации, становится гораздо проще просить нейросеть вносить изменения.

Например, в моей игре был баг: если проехать достаточно далеко от старта, у неба ломался градиент. И я мог бы бесконечно продолжать просить нейросеть «почини градиент», если бы в какой-то момент не решил заглянуть в код. Оказалось, что градиент на небе — это сфера, которая просто стоит на месте. И градиент не ломался, просто игрок выезжал за пределы этой сферы.

Используйте git Да, в Cursor есть чекпоинты, но я всё же рекомендую коммитить изменения в git каждый раз, как вы получаете какой-то стабильный инкремент. Иначе есть риск, что нейросеть поломает вам что-нибудь, над чем вы долго работали.

Не пытайтесь быть вежливыми Не нужно говорить нейронке «пожалуйста», «спасибо», по всякому её хвалить и быть учтивым — этим вы только потратите свои силы, время и токены.

Декомпозируйте Старайтесь с самого начала выносить логику разных частей приложения в отдельные файлы. Особенно, если нейросеть вносит все изменения в один большой файл.

При этом, свои идеи по добавлению новых функций тоже можно разбить на более мелкие этапы.

Например, такую задачу: Добавь автомобилю шкалу здоровья и отнимай по 10% при каждом столкновении. Когда здоровье доходит до 0, показывай экран Game Over

Я разбил на несколько более простых задач: - Добавь коллизии; - Добавь автомобилю шкалу здоровья, отнимай здоровье машины при столкновении; - При достижении 0 показывай экран Game Over; Разрабатывая фичи по отдельности, мы меньше рискуем что-то сломать и упрощаем себе тестирование этих доработок.

Создавайте новый чат под каждую новую доработку Нет смысла обсуждать доработку фар автомобиля в том же чате, в котором вы обсуждали цвет неба. Эта информация будет только засорять контекст.

А ещё вы сможете открыть второе окно курсора и работать над двумя фичами одновременно: пока один агент пишет код для поведения фар, вы можете ревьюить код другого агента, которому ранее вы задали задачу исправить генерацию камней и кактусов вдоль дороги.

Выводы Интересно, что в вайб-кодинге на первый план выходят фундаментальные вещи: использование git, соблюдение принципов KISS, DRY или SOLID. Без них вайб-кодить будет гораздо сложнее, а результат — менее стабильным.

Саму игру тоже забрасывать не хочется. В планах добавить кастомизацию автомобиля и возможность пополнять здоровье. Ну и буду рад вашему фидбеку и предложениям по улучшению)

MCP Серверы для фронтендеров

Недавно я писал про Browser Tools MCP, который позволяет получить доступ к некоторым браузерным возможностям прямо из вашего Cursor.

Подобных MCP-тулзов уже очень много, но среди всей этой кучи хочется выделить те, которые больше всего полезны фронтендерам:

Figma Context MCP Берёшь ссылку на макет из Figma и вставляешь прямо в чат в Курсоре. И сразу же в IDE получаешь данные о макете. Помимо того, чтобы верстать что-то с помощью Cursor, данные о макете могут пригодиться ещё и в разработке плагинов для самой Figma или для Pixso)

Playwright MCP Через playwright агент сможет открывать для вас браузер, переходить по ссылкам, жать кнопки и смотреть, что происходит. Есть возможность настройки режимов браузера: headed и headless.

Puppeteer MCP Ещё один инструмент для работы с браузером из Cursor. Тулзы +- те же самые, что и у Playwright, но Puppeteer MCP сложнее настраивается. Видимо, поэтому уже есть Configurable Puppeteer MCP Server))

npm-search MCP Server Для тех, кому лень писать npm search в консоль — можно попросить нейросеть выполнить npm search за вас.

Бонусный контент Если интересно, можете ещё попробовать MCP для GitHub, GitLab, AWS, Atlassian (JIRA и Confluence). А с помощью Superwhisper на MacOS все эти инструменты можно вызывать голосом.

Доступ к девтулзам браузера через Cursor

Есть такой инструмент, BrowserTools MCP, который позволяет курсору делать скриншоты страниц, инспектить HTML элементы, анализировать ошибки в консоли и т.д.

Работает это по стандарту Model Context Protocol или MCP. Он позволяет разрабатывать свои собственные функции, которые потом могут вызываться AI-агентом в Cursor или где-нибудь ещё.

Как работает BrowserTools

Нужно поставить браузерное расширение, которое работает с chrome.debugger и шлёт данные из девтулзов по вебсокетам на отдельный локальный сервер на Node.js.

Этот сервер объявляет набор функций, которые по MCP передаются в курсор, а курсор передаёт их в LLM. И когда агент собирается вызвать функцию, Cursor обратится к серверу, сервер — к расширению в браузере, а расширение — к вашей странице.

Теперь можно просить Cursor покрасить выбранную кнопку за нас.

Или спросить, почему при нажатии на неё возникает ошибка — Cursor сам найдёт её в вашем коде благодаря данным о ней из девтулзов.

Правда, функционал у BrowserTools ещё не сильно широкий — я бы ещё добавил работу с localStorage, cookies или с performance, но не уверен, насколько разработчики BrowserTools будут рады пулл-реквестам

Хорошо, что у протокола MCP есть TypeScript SDK, и при необходимости можно спокойно напилить и своих тулзов для курсора))

Пример AI-агента на GigaChat

В дополнение к предыдущему посту решил развернуть на gitverse репозиторий с простым AI-агентом на GigaChat.

Там как раз показан пример того, как можно работать с функциями.

- Общаемся с GigaChat прямо через терминал.

- Если при общении с вами GigaChat поймёт, что вы хотите «посмотреть логи сервера», то он сам вызовет функцию отправки логов в терминал.

Вот вам и взаимодействие нейросети с внешним осязаемым миром Точнее, с одной конкретной функцией на вашем сервере))

Но этот пример нарочно сделан простым, чтобы на его основе можно было понять механизм работы функций и самые основы создания AI-агентов. Масштабировать этот подход вы сможете бесконечно))

Главное, не забывайте сообщать нейросети о том, что ваша функция выполнена — иначе на каждое ваше последующее сообщение нейросеть будет заново возвращать признак вызова функции. И ваш сервер будет выполнять её каждый раз.

Но в моём примере это учтено))

Как заставить нейросеть выполнить ваш код на JS или Python

Нейросети вроде ChatGPT, DeepSeek или GigaChat можно научить взаимодействовать с окружающим миром: менять файлы на вашем диске, вызывать сторонние API или выполнять иные задачи в живом окружении.

Это делается довольно просто, и у большинства нейросетей применяется один и тот же подход: как у ChatGPT или DeepSeek, так и у GigaChat. Все они умеют работать с функциями.

Что такое функции Если мы посмотрим на API любой нейросети, то функции там будут выглядеть непривычно. Вот пример функции из документации GigaChat:

{ "name": "weather_forecast", "description": "Возвращает температуру на заданный период", "parameters": { "type": "object", "properties": { "location": { "type": "string", "description": "Местоположение, например, название города" }, "format": { "type": "string", "enum": [ "celsius", "fahrenheit" ], "description": "Единицы измерения температуры" }, "num_days": { "type": "integer", "description": "Период, для которого нужно вернуть" } }, "required": [ "location", "num_days" ] } }

Функция — обычный JSON.

Какой код эта функция выполнит? Здесь всё просто. Никакой)) До тех пор, пока мы сами его не напишем. Поэтому придётся по-старинке объявить где-то у себя в коде обычную функцию с названием weather_forecast, как в поле name в объекте выше. Принимаемые параметры тоже делаем такими же, как в описании. И реализацию этой функции тоже пишем сами.

Как нейросеть сможет её вызвать? Нам нужно сообщить модели о том, что у неё есть такая возможность. Для этого передаём описание этой функции в запросе API нейросети, прямо вместе с вашим текстом.

Вот пример тела запроса с функцией в GigaChat API:

{ "model": "GigaChat", "messages": [ { "role": "user", "content": "Погода в Москве на три дня" } ], "function_call": "auto", "functions": [ // Добавляем все свои функции вот сюда ], }

У ChatGPT это работает похожим образом, даже названия полей местами совпадают.

Что происходит дальше? Модель распознает ваше сообщение и самостоятельно примет решение о том, нужно ли ей вызывать какую-то из функций, которые мы ей передали. Решение будет приниматься на основании вашего сообщения и текстовых описаний того, что функция делает и какие параметры принимает.

Если нейросеть посчитает, что функцию вызвать нужно, она вернёт в ответе название этой функции и параметры, которые нужны для её вызова. А нам остаётся сделать условный:

const { function_call } = response.message // проверяем, что в ответе от нейросети есть признак вызова нашей функции if (function_call.name === "weather_forecast") { // вызываем функцию, которую сами же и написали weather_forecast(function_call.arguments) }

Всё. Естественно, вместо прогноза погоды функция может быть любой.

Мой бот, например, присылает мне в телегу логи с сервера, если я достаточно вежливо его об этом попрошу)

А в Python у библиотеки LangChain есть специальный декоратор tool, который упрощает создание функций. Если внутрь функции с этим декоратором добавить описание в docstring, то библиотека сразу сформирует нужную структуру, готовую для того, чтобы передать её в нейросеть.

Как бороться с Out of Memory

У Bolt.new, о котором я недавно писал, есть целая страница, посвященная тому, что делать при возникновении ошибки Out of Memory.

Секрет прост: нужно лишь закрыть ненужные вкладки и приложения.

Вот так всё просто, оказывается. А люди об этом статьи на хабр пишут;)

ChatGPT Operator

OpenAI выпустили preview-версию агента, который имеет доступ в интернет и может выполнять там различные задачи.

Operator использует модель Computer-Using Agent (CUA), которая натренирована на взаимодействие с графическими интерфейсами, а не с программными API.

Что умеет CUA Вы делаете промпт, например: Закажи гавайскую пиццу в такой-то пиццерии на такой-то адрес И агент прямо на сайте openai откроет встроенный браузер, в котором зайдёт на сайт пиццерии и закажет эту пиццу.

Что происходит под капотом Работа агента делится на три этапа:

1) Восприятие AI уже умеют анализировать изображения, поэтому агент без труда поймёт, что изображено на скриншоте сайта пиццерии. Скриншот используется в качестве «контекста» модели.

2) Рассуждение Агент анализирует текущее состояние и предыдущие свои действия, выдавая свой «внутренний диалог» в окне чата с пользователем. В случае чего — агент задаёт дополнительные вопросы, прежде чем продолжить.

3) Действие Клик, скролл, ввод текста на сайте.

Цикл повторяется до тех пор, пока изначальная задача не будет считаться выполненной, или пока не понадобится какое-то дополнительное подтверждение от пользователя.

В теории, так должно работать.

На практике агент справляется с рутинными задачами медленнее, чем человек. За то время, пока вы сидите и смотрите, как operator скроллит экран браузера и жмёт какие-то кнопки, вы успели бы заказать уже 10 пицц.

Хотя если посмотреть на цифры, то CUA справляется с 57.1% задач бенчмарка при работе с вебом, а человек — с 78.2%. Странный результат, но как будто бы нас почти догнали))

Итоги Где-то год назад я мечтал о том, что AI будет за меня двигать по статусам задачи в JIRA, заполнять релизную документацию и выполнять прочие рутинные вещи. Сегодня мы уже видим, как это может выглядеть.

Правда, доступ к operator сейчас есть только у пользователей с ChatGPT Pro (за 200$ в месяц), поэтому я пока не посмотрел, как они сделали встроенный браузер))

Когда поручил пет-проект нейросети

Я тут попробовал bolt.new — AI-агента, который прямо в браузере разворачивает виртуальную машину с Node.js и редактором кода, и пишет там код за вас.

Браузерная VM работает на WebContainers от StackBlitz, а код за вас будет писать LLM под названием Claude 3.5 Sonnet, которая неплохо показывает себя в бенчмарках.

Из плюсов могу отметить следующее: 1) Агент понимает русский язык 2) Токенов в бесплатной версии хватит, чтобы быстро развернуть какой-нибудь прототип или пет-проект и нагенерить там шаблонного кода. 3) Если возникают ошибки, нейросеть сама предлагает их исправить, и сама же и исправляет, прямо в коде. 4) Всё-таки, WebContainers это супер удобно.

Лично мне уже больше не захочется после этого вручную стартовать пет-проекты. Слишком удобно, когда бойлерплейт заполняет за вас кто-то другой, прямо у вас на глазах. Я всего лишь описал в чате словами нужный мне интерфейс и функционал, перечислил технологии (мне нужен был React 19, CSS Modules, TypeScript и webpack) — и готово.

Но не идеально. Поэтому дальше поговорим о минусах:

При первом запуске npm start упал с ошибкой)) Нейронка не указала "type": "module" в package.json. Хорошо, что она предложила это поправить сама.

Не знает про React 19 И даже про 18.3.1. Нейронка упорно верит, что последняя версия реакта — 18.2.0, и ставить соглашается только её. Короче, все последние версии библиотек вам придётся ставить вручную. И не вздумайте ей об этом рассказывать, а то она возьмёт и «исправит» вам версии на более старые.

Много мусора и навязываемых инструментов Я просил CSS Modules и webpack, и я их получил. Но помимо них я получил в свой проект файлы vite-env.d.ts, tailwind.config.ts и, по классике, библиотеку date-fns, которая нигде не используется. Очевидно, нейросеть обучали на живых проектах))0

Иногда переписывает файлы с нуля целиком Даже при просьбе внести незначительные правки.

Итог bolt.new очень удобен для быстрого создания прототипов и шаблонных страниц. Он, конечно, допускает глупые ошибки, и можно было бы над этим посмеяться. С другой стороны, если вы знаете фронтендеров, которые допускают такие же ошибки, то для решения подобных задач уже есть нейросети.

Решил вернуть бота в канал

Раньше у меня в канале был бот, который генерировал шутёхи в комментариях по теме поста, но работал он только с emoji или текстом.

Теперь он вернулся и реагирует ещё и на стикеры!

Давно хотел научить бота распознавать стикеры и реагировать на них, но у гигачата не было API для работы с изображениями. Недавно эта возможность появилась, поэтому бот снова в строю))

Отправляем в комментарии любой стикер и смотрим, что ответит на это бот. По хорошему, коммент от бота должен генерироваться по теме поста, но над этим я ещё поработаю))

Ну и да, анимированные стикеры он пока не распознаёт)

Сходил в гости на подкаст «Программируй или умри» к Владимиру Евстратову!

Обсудили наш опыт прохождения и проведения собеседований, токсичные задания, нейронки, способы поиска работы, токсичность на рабочем месте — да много чего обсудили, выпуск получился очень насыщенным))

Спасибо Вове за приглашение!

Как провалить собеседование на программиста. Поможет ли накрутка опыта и нейронки? Роль HR в найме? Обсуждаем в новом выпуске подкаста "Программируй или умри" с Антоном Непшой.

https://www.youtube.com/watch?v=zmfybH1U2MY

Завтра в 18:00 выхожу в прямой эфир!

Эфир проведёт Арина, комьюнити-менеджер Java-разработчиков Сбера.

О чём будет эфир

Поговорим про карьеру и попадание в IT, про инженерные сообщества, про личный бренд и AI.

Кстати, именно Арина организовала наш недавний AI-хакатон, выступала на Дампе с докладом про создание профсообществ, а на Joker — о пользе и вреде таких сообществ.

Короче, кажется, конференции тоже обсудим))

Залетайте завтра в 18:00 на эфир на канале Арины, буду рад встрече!

С Антоном Непшей @nepshajs мы познакомились в начале года в рамках подготовки к FrontendConf – он подал софтовый доклад о способах и необходимости распознавать накрутчиков, а я стал его куратором. В ходе общения меня очень заинтересовала его карьерная история, и я позвал его на интервью.

Антон не всю карьеру провёл в Сбере, но при этом он начинал там оператором call-центра, а сейчас уже техлид, при чём на карьерном пути Антон успел даже побыть scrum-мастером какое-то время. В один момент он решил ещё и качать личный бренд – поэтому завёл канал и много выступает.

Даже успели обсудить нейросети – Антон прикрутил гигачат к комментариям в телеге – получился любопытный выпуск Frontend Weekend №181 про рост из оператора call-центра до техлида, накрутку опыта и пользу нейросетей – https://pc.st/e/2~Dr4tDCXgn – и в ютубе – https://youtu.be/n8VhjItff08