Вайб-кодинг AI-чата за 12 минут: o3 + Claude 3.7 через OpenRouter

Привет, друзья. Сегодня рассказываю про классное webcoding combo O3 от Open AI и Clot 3. 7 в качестве кодера O3 архитектор. O3 очень умный, но очень ленивый. А 3,7 красавчик. Попробуем объединить это. Используем метапромтинг. Делать будем чат с искусственным интеллектом с возможностью выбора модели через Open Router. Погнали. Итак, первое, что я делаю, я хочу провести небольшой resarch. Я, во-первых, рассказываю, что я хочу сделать. Я хочу делать приложение, в котором я могу переписываться с искусственным

интеллектом. В коде приложения я могу сдать системный промпт, который будет определять роль искусственного интеллекта. То есть это, например, ты личный ассистент или учитель математики. А приложение должно использовать только популярной библиотеки и исследовать принципу MVP. Прототип. Демо, то минимальное количество функций. Мне не нужно сложное решение. Мне нужно что-то очень простое, быстро запустить, протестировать. Используй самое простое возможное решение для кодовой базы с минимальным количеством библиотек, инструментов и настроек. Если не указывать, то очень много времени потратишь на то, что ты будешь, а, сражаться с ошибками конфигурации. Я буду использовать Open Router. Open Router - это классное решение. Этот сборник моделей. В чём его плюс? В том, что кодовую базу я пишу для Openроутера один раз, и я могу менять модели, да, в зависимости от стоимости. Очень популярные решение при написании приложений с искусственным интеллектом. Здесь есть модели, их можно сортировать по цене. Э топ за неделю. И здесь сразу видно популярная модель GPT for Mini. Мы её и будем использовать. А для общения с чатом 15 центов за миллион токенов. Здесь можно посмотреть цену, сравнить. Здесь есть бесплатные модели, можно тоже их использовать. Единственное, что бесплатные модели помедленнее, имейте в виду, но для экспериментов вообще супер круто. В качестве PI я буду использовать Open Router. И я ещё напишу, что приложение должно работать в браузере.

А, приведи, пожалуйста, исследования. Какие существуют решения, фреймворки, для задач, самые лучшие практики, архитектура, решение. В общем, это полезный промт, который может подсказать. То есть как бы не сразу дай мне решение, а сначала проведи маленький resarch. Можно использовать deep resarch. Для этого для этой штуки у меня их осталось не так много, и поэтому я использовать, а, конкретно для этой цели не буду. Но это тоже очень хорошая штука, особенно если у вас мало опыта. Отчёт, который предоставит depressч, он поможет вам, а, войти в контекст получше. То есть какие бывают популярные библиотеки для аа решения таких задач. Это такая хорошая штука, которая повысит ваш вашу насмотренность вот в этом мире создания приложений, потому что важно просто хотя бы вот, да, вот эти вот накидывать слова. О'кей, мне нужно это, там куспользуй штуку. И у вас со временем появится какой-то свой такой стек, набор технологий, с которыми вам будет удобно работать. Поехали. У меня выбрано О3. Мы сейчас будем с ним общаться. Очень классный, очень крутой, но ленивый. Ну и дорогой, конечно. Я использую для вайп-кодинга Винсрf. НСРФЕ. Он стоит в 10 раз больше, чем Gemy 2. 5 Pro или Clot 3. 7 Sonet. Сейчас вот вижу, он полез в интернет, и это классно. Э, он сейчас ищет документацию на Openроутере, только что использует, да, он смотрит, ищет примера кода. Посмотрим, что он выдаст. Хорошо. Вот. Отлично. Магистральная идея для VPузерчат и по Openроутеру на странично приложение на J или Реакте, которое послались запросы с помощью фича на указанный адрес. Он его взял из документации Openроутера. Экосистема, лучшая архитектура и рекомендуемые библиотеки. Отлично. Это то, что он не сразу нашёл готовый репозиторий. Почему это удобно? Э, а это примерно то же самое, что мне нужно сделать. Смотрите, здесь есть разные системные промты, такой типа набор, который определяет роль того, с кем мы

общаемся. Интересно. Привет. А вот он думает, не знаю, будет он отвечать либо нет. Можно залогиниться, можно что-то поменять, почистить. А в общем, и системы классные, потому что они позволяют, да, если не особенно хняться на гитхайбе, значит, у них, скорее всего, будет свободные лицензии MIT Lens. ты можешь его использовать там для своего бизнеса, для чего угодно ш и там также дальше накидываешь идеи. В рамках эксперимента мы попробуем сделать с нуля. Классно, что он это не придумывает сам. Он ищет это в интернете и возвращает тебе специально включил поиск по интернету. Так, минимальный стек UI rendering React компонента сообщения React UI код для запросов

нативный феч типизация Typeриpt. Прокси не нужен. Шаблон кода на ванильном Джесе. Что выбрать прямо сейчас? Модель MVP HTML плюс Vanilla GS. Самый маленький бандл. Это супер решение. И давайте сейчас сделаем следующее. У меня есть промт. Он лежит на моём гитхайбе. Ссылку я оставлю в комментариях. Это метапромт. Что такое метапромт? Это промт, который ты используешь для агента, чтобы он тебе вернул новый промт. Он в формате XML - это формат, который м большие языковые модели понимают очень хорошо. Здесь в нём указана роль. Роль помогает большой языковой модели сразу вступить вот в эту роль. И качество ответа в этом случае сильно повышается. Есть набор требований к решению. Это задача к написанию промта, что там ты делаешь задачи для искусственного интеллекта, который будет писать код. А для каждого логического шага использую логирование в консоль для отладки. В общем, здесь какие удобные штуки, которые я чаще всего использую, собранные в одном промте. Пробуйте, используйте. И в конце конечный конечная цель этого промта - это сформулировать подробный промт на естественном языке для агента кодера, чтобы он реализовал требуемое MVP. Размести инструкции внутри итогов XML. Промт сгенерировал мне в ответ тоже новый XMLпромт. И я возвращаюсь прямо в этот чат, в котором уже есть какие-то данные, в котором уже

искусственный интеллект проделал некую работу умственную. И я сюда закидываю этот промт и пишу: "Верни мне, пожалуйста, для агента кодера". М, помню про минимальное количество настроек и инструментов. Что ещё мне нужно помнить? Наверное, ничего. Напишу. Давай остановимся на реакте с минимальным. Для такой задачи я не хочу спросить библиотекун требовательного конфига. И а по опыту для маленьких проектов это слишком много и частотыкается в вопросах конфига. А интересно, что он вернул его на английском. Такое бывает тоже. Дащ мне на испанском пишет строй э агента может редактировать системный промт. А API ключ какого бэкэнда? Да, всё верно. А вся логика на клиенте в браузере? Фреймворки, React White. А, о'кей. Очень хорошо, что он мне показал инструкции для по консоли. Это очень удобно. И что-то не работает. может поиграть консоль и посмотреть на каком этапе происходит ошибка. Это тоже помогает решить возникшие проблемы. Есть документация для Openроутера. Кто ещё? Только React White и обычно CSS а сти. О'кей. Получится ли решить задачу а с первого раза? И мы сейчас перейдём в Wнсf. Так. WFE. Так. Я открыл новую папку Винсрфе. У меня 153 кредита. Алло. Да, блин, почему ты такой ужасный? Я перешёл в висёр, вставил сюда промт. Единственное, что на всякий случай полезная вещь, которую я использую, вам тоже рекомендую её использовать. Это Conex 7 MCP. В своём чате ссылку используй. 7 MCP для получения актуальной документации. Давай посмотрим, что получится. Получится ли сделать с первого раза? Выбран clД 37 Son set. А в режиме размышления. Поехали. Папка новая. Мой чат. Большие конфиги. Так. типизация и линтер. Ничего интересного. Ну, о'кей. Сказывает, что всё сделано, всё готово. Давайте проверять. Здесь есть ссылочка на локальную разработку, которую он сам запустил. Предлагаю даже превью открыть и посмотрим, что получилось. Хотя ещё ключ я не передавал. Он предлагает мне прямо сюда его засунуть, что мне не очень нравится. Ты личный ассистент, который любит мяукать. Раутер ключ сейчас достанем. Я хочу, чтобы и системный промт, и Open Router ключ API хранились в DINV файле. Вот заканчивает выполнять. Системный промт - это роль, которую примет наш собеседник в чате. API ключ. API ключ я возьму из OpenРура. Личный ассистент, который любит мяукать. О'кей, погнали. Почему ты любишь мюкать, а не квакать? Мяу. Я просто обожаю мяукать, потому что это так мило. А квакать я оставляю лягушкам. Они тоже в этом великолепны. В общем, получилось. Таким образом вы можете построить своё приложение с искусственным интеллектом на базе Openроутера и любой большой языковой модели. Это несложно, да? Нам осталось только его задеплоить, то есть уложить в интернет, подключить к домену, а добавить, может быть, какую-то авторизацию пользователей и всё такое, давая такие идеи, любые ваши идеи, которые у вас появятся, не обязательно с и очень хорошо прокачивает опыт и повышает вашу насмотренность в технологическом мире создания приложений. Поэтому подписывайтесь на канал, ставьте лайк этому видео, оставляйте комментарии, что вообще думаете про такой подход, нравится ли вам вайпкодинг, что вообще думаете про будущий искусственный интеллект и будущие разработки. Очень интересно услышать это ваше мнение. И до новых встреч. y