AI в коде: Как научить ИИ писать код за вас? Мастер-класс по Cursor и Lovable (14.05.25)

Ребята, привет. Есть кто дома? Привет, привет. Привет, привет. По возможности включайте камеры. Давайте сделаем-кодинг и vibe. Всё, привет, привет. Много знакомых лиц, много ребят, которые хотят й дай, давайте угадаю. Вы хотите просто ничего не делать и чтобы деньги были, правильно? Ну, в основном все остальные какие-то мотивы - это уже для красоты. Хочется меньше делать, больше зарабатывать. Я это понял. Есть такое. Ну, о'кей. Я как бы тоже так хочу, поэтому будем пытаться это делать. В идеале к концу мастер-класса запустить маленький стартапчик. В идеале, на самом деле, я вот шучу и не шучу одновременно. Правда, я, ну, правда, в этом нет, а вот только шутки. Поэтому накидывайте идеи. Может быть, у вас есть идея какая-то, которую вы не боитесь кому-то сказать? Если вдруг такая есть, то скажите нам. Мы продумаем её, сделаем сегодня мини-стартапчик. О'кей. Я думаю, тогда мы можем начать ровно в 700, как договаривались, потому что сейчас уже у нас есть ребята 19 человек. Минус я, минус Вика, значит 17 уже 20 человек. Хотя, может, минутку подождём? А у меня же всё равно там будет в начале вводная часть, поэтому как раз пока все подтягиваются, я буду её рассказывать. Хорошо. Я вижу, что Влад он уже в этом, видите, там фон вайпкодинговский, там где уже отдых, но деньги капают. У кого есть классный фон? Либо какую-нибудь классную, не знаю, какое-нибудь добавление выберем какой-нибудь, может, очки. Ну, очки уже классика, очки неинтересно. Это слишком с птицей буду. Блин, сразу видно, человек шарит за ней рассети. Вот я буду с птицей, если что, говорите мне. А тут можно поменять фон прям прямо здесь или надо выйти? А потом не можешь прямо здесь менять фон. Можно всё, что угодно. Ой, у нас, кстати, семь. Я думаю, что

поэтому постепенно можем начинать. Ну и, по крайней мере, пока ещё будут подтягиваться ребята. Пока я со всеми поздороваюсь. Ребята, всем привет. Очень рады, что вы пришли на наш мастер-класс по AI. И, собственно, меня зовут Вика. Я модерирую сегодняшнее мероприятие. И вначале, пока все собираются, хотела рассказать вам немножко про то, что у нас есть в школе для разработчиков. Собственно, не просто так мы сделали этот мастер-класс. Ну, конечно, как Юра уже сказал, для того, чтобы вы побольше узнали про AI, зарабатывали много дене и делали меньше. Но ещё мы хотели вам рассказать про то, что у нас есть, вообще-то, целый курс, э, про AI, который был сделан разработчиками для разработчиков. А, и, собственно, что вообще он в себя включает. Во-первых, там вы изучите все актуальные инструменты на ярынке и вам расскажут, как их использовать в повседневной работе на каких-то конкретных задачах. Не просто, что есть такая нейронка и вот можно ей заняться, а вы будете использовать какие-то реальные кейсы, сможете задавать вопросы, потому что это не записанные лекции, а прямо в лайве будете жёстко учиться. И нескромно, на самом деле, будет сказать, что на рынке такого продукта пока ещё нет. Поэтому ребята сделали что-то очень клёвое. Юра как раз является одним из авторов курса, поэтому, если вдруг вы заинтересуетесь, он сможет вам тоже что-то рассказать явно побольше, чем я. А что клёво про этот курс ещё могу рассказать? Мм, собственно, у вас будет удобный, да, график занятий. Занятия идут вечером, длительность 2 часа, и все лекции обязательно будут записываться. Поэтому, если что-то захотите пересмотреть, потом самостоятельно попробовать, можете это сделать. А, ну и после уже того, как вы отучитесь, вы в любом случае останетесь в чате тех, кто проходил этот курс и проходит сейчас. Поэтому, даже несмотря на то, что вы закончите своё обучение, вы всё равно будете продолжать, может быть, делиться какими-то лайфхаками, кейсами, новыми нейронками и сможете регулярно обновлять свои знания, что очень здорово. А, и в конце, конечно, получите сертификат. Ну и к чему это я? Я к тому, что у нас есть замечательный QR-код, перейдите по нему, не зря же я его делала. А ближайший старт у нас 19 мая. У нас для вас, для участников вот этого мастер-класса Юриного есть промокод AI15. И он действует до, собственно, 18 мая действительно. Но, кстати, если, например, захотите пойти на следующий поток, который был 2 июня, то тоже сможете использовать этот промокод сейчас. Просто забронируйте себе местечко на попозже. И в итоге, да, как уже сказала, у вас будет официальный сертификат, у вас будет доступ к закрытому чату, вечный доступ к материалам курса. А, и да, новые карьерные возможности в быстрорастущей сфере. На самом деле, когда разговаривал об этом курсе с Гошей, а он сказал, что действительно ребята говорили, что повысилась их работоспособность, продуктивность, м и действительно это было необходимо им в той сфере, в которой вы, собственно, все и работаете. Вот. А это моё маленькое было введение, пока все собирались. Спасибо, что послушали. Теперь я полностью передаю вас в руки Юры, чтобы он наконец-то вам рассказал, как же использовать AI, как создать Google Chrome расширение. Юра, привет. Да, ещё раз всем привет. На самом деле ещё пару слов про курс расскажу. Да, я совтор соавтор курса. На самом деле там этот курс просто мы делали, наверное, всю зимнюю часть начала весны. И сейчас мы уже по сути он вот прямо сейчас время 7:03 он идёт, потому что я вырвался к вам, но на самом деле он сейчас идёт. И всё это время мы с Сашей Князевым его вели. Это очень круто. Это правда. Это почему круто? Потому что это невероятно обновляемая тема. Вот мы написали курс, думали: "Ну всё, сделали продукт, классно". Провели первый поток, за время потока, а он 2 недели идёт, обновляется так всё, что мы опять обновляем курс. Поэтому AI в плане обновления - это невероятно быстрая штука. Раньше ли раньше как-то может хейтили то, что у JS много каких-то библиотек на каждый чьих есть библиотека и JavaScript, есть всякие разные там и реакты, и постоянно всё обновляется и нестабильно. А по факту AI намного динамичнее. Там каждый раз невероятная модель выходит, и она пытается переплюнуть прошлой модели. Поэтому в целом, что сказать про AI? А хочу главный вопрос задать, ребята. Я делаю собственную статистику. У нас сейчас 28 человек. Напишите, пожалуйста, кем вы сейчас работаете либо хотите работать. И это первый момент. А второй момент, заменит ли всех нас AI или не заменят? Ваше мнение. Как вы думаете, если AI будет супер круто развиваться, да, может не двадцать пятый год, а где-нибудь двадцать девятый год, тридцатый год, по итогу, как вы думаете, заменят нас или нет? Потому что многие говорят, что ай-ай, заменят и всё плохо. Мы вот zoom сказал, оomюзер. Я думал

мне показалось, что Zoom сказал, да, будто бы какой-то AI уже сказал, да. Вот заменит, естественно. Хочу работать DS не заменят. Вот просто пишите, пожалуйста. Хочу на БК ещё 5 лет. Ещё 5 лет, ребят. И кто-то говорит, что 5 лет ещё есть. Поэтому нужно нам последние годы хотя бы, ну, поработать, потом уже отдых. Ну, ещё 5 лет. Вот поэтому тут пишут, что не заменят. Причём это уже написал тестировщик. Вот. А у вас на Давайте просто почитаем плюс-минус статистика частично, наверное, да. Но обслуживать люди будут. Обслуживать, о'кей. Заменит какую-то рутину, никаких, но никак не разработчиков. Jниor Front Jниор заменит более высокие грейды не заменят. А что ещё? Большую часть рабочих мест будут займут AI фронт. Возможно заменят, но надо этого не допускать. И пришли на AI курс. Не допускать. Я понял. А и в такси 5 лет. Ага. О'кей. На самом деле уже пишут, что вот многие работают front, разработчики, тестировщики Junior Front, а Java Go Backend. Ну, разработчики пишут, что врага надо знать в лицо. В общем, люди думают, что, смотрите, есть небольшой риск, что вот эта вся конструкция AI настолько будет крута, но заменит, не заменит, это уже очень такой риторический вопрос. Понятие замены - это что? И когда мы говорим заменит, когда? в двадцать пятом году, в двадцать шестом году. В общем, давайте просто поймём, что мы сегодня с вами собрались на мастер-класс по AI. Я для вас подготовил два сценария, посвящённый AI, и частично покажу вам слайды, переформатированный с курса, про которые рассказывала Вика. Чтобы вы понимали. Причём эти слайды я настроил так, что они были изначально плюс-минус сгенерированы AI. Просто поймите прелесть всего. Тот сайт, который скинула Вика, вот сейчас я скину ещё раз ссылку. Вот этот сайт сгенерирован AI. Это не мы верстали сайт. Просто хочу вот вам вот он, а он работает, он продаёт, и поэтому, да, он не отличается от нашего оригинального сайта. Факт. Но всё, что вот тут происходит, это правда. И мы сделали плюс-минус простой, понятный сайт с формой, которая реально оплата тоже работает. Просто, чтобы вы поняли, потому что многие думают, что это какие-то, может быть, не досайты будут. Так вот, мы открыто говорим, AI уже очень так усиленно появляется в ЛБС. Аа, ну так вот про что я говорил, про сценарии. Давайте начнём с того, что я покажу вам слайд, о котором уже сказал. Если я вам расшарю экран, и вы скажете, видно или не видно. Вот. Видно ли? Пока. Всё нормально. Ага. Угу. Всё, класс. Тогда давайте просто проговорим. Вот. Мы сделаем введение в изор в инструмент разработки. Я воспринимаю вас всех как разработчиков, которые либо уже с работой, либо в ближайшем времени будут разрабатывать, и вам бы уже хорошо бы знать, что в разработке появился такой момент, как AI, который невероятно круто помогает. Сейчас я рассказываю очень, наверное, рассказываю 1 десятую часть из курса, про который я говорил, чтобы вы поняли, потому что я сейчас всё не смогу рассказать, но главное постараюсь. Так вот, зачем вам эти AI инструменты? В чём идея? Давайте я вам расскажу. То есть по факту сейчас у вас, грубо говоря, когда есть AI, вы, можно сказать, работать будете с каким-то своим друганом, который 24 на7 может вам помогать. Что делать? Находить баги, прекрасный автокомплит, который дописывает код, объясняет вам код. Он ревьюет вам код проекта, потому что вы можете устроиться на новую работу, и там бывают невероятно жёсткие legy проекты, либо, может быть, стек не ваш, и вы такие: "О, нет, я знаю React, а тут View" или так далее, и так далее. Много вариантов, которые хотелось бы с кем-то обсудить, с кем-то про, ну, как-то проблему какую-то порешать, причём много раз, потому что человека не хотелось бы как бы постоянно отвлекать. И вы думаете: "Ну, я уже спрашивал этого человека, зачем мне его отвлекать? " Так вот, сейчас есть AI инструменты. И по сути, это уже не просто какая-то такая шутка, но это обычный стандарт разработки, ребят. Это уже не будущее, что вот какой-то нейронка, а

это обычность. В моей работе курсор AI, об этом чуть позже, стал обычным редактором по соседству с ВС-кодом. Мне очень нравился VS-код, но некоторые возможности у него пока не присутствуют. Так вот, и вот сразу вопрос к вам. У вас есть понимание и отличие между AI ассистентом и AI агентом? Какая разница в них? Можете просто написать в чат, а я попробую зачитать. Тактактак. Видео, да, видеозапись будет. Какие возможности? Так, нет, нет, нет. Понимаю. О, Юр, а там ещё был важный вопрос. Будут ли ребята сегодня писать что-то сами или только смотреть и слушать? В Ну, смотрите, на самом деле там будет фрагмент, мы можем что-то пописать. Изначально цель моя, а, чтобы мы меньше писали код. Просто поймите, мы будем писать код, но это не тот лайфкодинг, как вот было на лекциях. Мы можем пописать с вами код. И там же есть даже один сценарий у нас пописать код, но а всё-таки с плюс AI вот это будет. Поэтому что-нибудь придумаем. Так вот, я вижу, что нет понимания. Есть, короче, AI ассистент и есть AI. Так вот, AI ассистент, он предлагает вам какой-то текст, но ничего не делает. И чаще всего вы пишите какой-нибудь чат GPT, deep различные штуки. Это всё добро не работает. Ну, в плане не работает в качестве выполнения задачи. А это прекрасный текст вы получаете, но по итогу вы сами файлики создаёте. Давайте теперь попробуем пойти к типам инструментам, какие бывают. Так вот, AI плагины бывают разные. Есть AI ассистенты и AI агенты. Это разные штучки. И на примере моего любимого курсор, я вам покажу сейчас курсор, чтобы вы поняли, о чём я говорю. Так, я показываю вам курсор. Это вот. Видно ли вам курсор? Класс. Вот это редактор популярный, который в нём интегрирован именно AI. Важный пункт, который я акцентирую внимание на AIGте. Почему я на нём акцентирую внимание? AI буквально делает задачи. Он создаёт папки, он создаёт файлы, он пишет там всякие штуки, он буквально помогает. А AI ассистент даёт вам текст, пишет: "Вам нужно создать папку. В этой папке нужен файлик такой, текст такой-то". Так вот, а и давайте попробуем сейчас, а, с помощью курсора и с помощью нейронок сделать аа небольшое а расширение для Google Chrome. Я уже экспериментировал. Я открою проект. Open folder. Открою проект. Давайте. У меня был, по-моему, мастер-класс подготовлен. Вот он. У меня тут у меня два раздела. Первая часть и вторая часть. Первая - это наше расширение. Сразу вопрос. Так, я сейчас читаю чат. Вы когда-нибудь делали расширение для хрома? Читаю ответы. Да. Нет. Круто, что Кирилл делает. Это круто. Ну так вот, и на самом деле расширение для хрома - это задача не тривиальные, но в целом она обычная для кого-то. И бывает так, что вот вы приходите на работу и вам говорят: "А вот задачка сделайте расширение для браузера". Ваш ответ: "А я не делал такое". Вам нужно гуглить, смотреть, читать и так далее. Теперь давайте посмотрим, а как сейчас можно сделать расширение для хрома. Вот у меня есть файлик Redmi. Я могу его открыть. Я тут написал стандартный какой-то вариант промта, который можно, так сказать, улучшить. О чём я хочу вам показать сейчас. Я хочу, чтобы мы с вами сделали промт. Вот он, исходник, который написал, грубо говоря, человек. Детализированный промт для AI. Я уточняю, это для AIгента промт, который умеет разрабатывать веб-приложение. И что нужно сделать? Функционал добавляет кнопку в панель расширения Chrome. При нажатии открывает всплывающее окно с текстовым полем. Позволяет быстро записывать мысли, ссылки или задачи, сохраняет заметки в локальное хранилище. Всё это кодить будем не мы. Мы делаем промт. Но проблема этого промта в том, что я что-то упускаю. А я беру этот промт. То есть я сделал такой довольно интересный момент. Я скопирую этот момент и иду в какую-либо лэмку. ЛМКА зна Кто знает, что такое LLM? Сейчас я тоже почитаю, узнаю ваши навыки.

Расширение не делали. LM лексическая модель за LLM не знаем. Вот аzomю usеer говорит правильно. Это большая языковая модель. Это главный момент. Так вот, языковых моделей сейчас очень много, но я пока сделаю псик. Почему её? Потому что она легко открывается, и поэтому я пишу вот такой код. Я говорю нашему lm в виде дипсика, что мне нужно, чтобы он сделал улучшение вот этого промта для аяагента. И нажимаю сюда. Пока ничего особенного не делаю. Вы без меня могли бы так сделать, но по крайней мере вот сейчас мне помогает и отвечает AI ассистент. Вот это всё происходит. Это AI ассистент. Он мне отдаёт логичный текст, который позволит мне что-то сделать. Ждём, он там что-то генерирует, какие-то штуки делает. Ну вот сейчас он доделает, и мы с вами как-то этот промт уже детализированный как-то будем применять. Заметьте, он писал, что вот это пром для технического а задания для AI. Теперь небольшое отступление про курсор AI. Мой поднастроен, а и он сейчас не просто курсор AI, а персонализирован, настроен под меня. Что это значит? В курсор AI вот здесь есть шестерёночка. Я открываю. Давайте я лишнюю закрою, чтобы вам ничего не мешало. Я нажимаю просто шестерёночку. И здесь я вижу первые различные разделы слева. Но главный раздел, на что сейчас обратите внимание - это rules. И вот тут я написал системный промт. Это user rules, то есть самые главное, самое главное правило для всех моих остальных промтов, которые будут у меня работать. Я пишу, что ты AI агент, встроенный в командную разработку, работая по следующим правилам. Это его законы. Вот это его, короче, это его закон, чтобы он всегда писал, общался со мной на русском языке, чтобы перед тем, как приступить к реализации, он описал мне плановый, пошаговый какие-то план действий, чтобы я понимал, что он там придумывает, и много-много каких-то полезных штук. Давайте я просто вам дам этот системный промт, если у вас курсор AI, если вдруг вы не знали про такую штуку, я вам очень сильно рекомендую. Это штука, которая позволяет вам улучшить немного свой промт. Об этом я рассказывал на других мастер-классах, но просто это системный промт, который прямо сильно влияет. Причём тут ещё есть такой восьмой пункт. При генерации сообщения для Gitкомта использую английский язык, потому что наш курсор AI теперь сам генерирует аа месседж для комита. Нам не нужно придумывать, что там мы обычно люди в заопарке пишут фикс и не парятся. Вот обычно, ну вот сейчас это можно с помощью AI делать. Так вот я теперь что сделаю? Давайте мы с вами а откроем непосредственно тогда это закроем проект. Откроем папку, чтобы мы были в папке. Open Project сюда. И мы идём с вами мастер-класс первый акт. Вот мы в этой папке. Так, мы тут, получается, делаем, закрываем всё. И вот тут у меня есть переключалка. Смотрите, есть агент, есть ask, есть manual. Если мы делаем на агент, вот, а в таком формате у меня буквально будут создаваться файлы и папки, ну, всё, что мне нужно. То есть я буду просто смотреть, как появляется код, и как-то этим оркестрировать. Если я переключу на Ask, то ничего не будет создаваться. Он объясняет текстом, как-то меня поддерживает, как-то на меня наводит на мысль, но ничего не создаётся. Мне нужно, чтобы создавалось. Я переключаю на агента. Так, что-нибудь интересное в чате было? Не было. Так вот, знаешь, там был один вопросик, не поэтому, чуть пораньше его задали. Сейчас, секунду, я его ищу про агента. М, от зумюзера, по-моему. Zoom usеer. Блин, я её потеряла. Это тоже, да. Агенты. А, а вот агенты есть и вс-код. Что не так скод? Агенты есть, но на самом деле в том агенте в основной модели это у нас купайлоты. А в целом ВС-код только-только подтянул то, что было в курсоре. И по сути, да, они потихоньку появляются. Я уверен, что вс-код подтянется и всё будет хорошо и в ВС-коде. Но некоторых моментов фишек пока нету, к сожалению. Но опять же я максимально топлю за VS-код. VS-код

круто, и я рад, что они и агентов тоже внедряют, поэтому тут просто чуть погибче в этом плане. Так вот, я беру этот, а, промт, который мне сгенерировала одна нейронка, и копирую вот этот весь текст. Иду в наш курсор AI, вставляю его сюда и лишнее удаляю. А лишним будет вот этот его комментарий, вот детализированный промот. А лишнее тоже удаляю. И в общем, вот эта задача для моего агента. Что он должен сделать? Мне нужно сделать расширение для хрома. Такая записная книжка с сохранением. Вот типа мысль пришла, сразу записал. Ну, погнали. Давайте нажмём на стрелочку и посмотрим, что происходит. И Ага, у меня ещёпишка. Давайте попробуем одну штуку тогда отключу. MCP одну. Оп. И это всё. Давайте скопирую на всякий текст. Я тут ещё игрался с MCP. Аэ, чуть позже расскажу про MCP. Возможно, мне нужно будет перезапустить в целом курсор. А, нет, нормально. Аа, в общем, давайте я пока прочитаю, что он планирует делать. И делать уже будет. Он поможет мне создать Chrome расширение для заметок. Давайте разобьём работы на этапы. Создаст базовую структуру. Настройка manifest JSON- это самый главный файл, кстати, для того чтобы расширение стало расширением. По сути, паспорт проекта по сути как пакет JSON, только манифест JSON. Разработка HTML-интерфейса, создание стилей, а логика, добавление иконокстирование и отладка. А по сути вот тут предлагается решение. Я сейчас при вас это смотрю. А оно в не идеальное. Это какое-то решение, но оно генерируется очень быстро. Давайте посмотрим, что это такое. Во-первых, тут есть описание файла, что это манифестon, его можно поизучать. Есть отдельный файл попа HTML с каким-то кодом. Я пока всё это смотрю бегло. А ещё он говорит, чтобы у меня всё работало о'кей, говорит, давай создадим директорию для иконок и добавим базовую иконку. Он предлагает мне эту команду. Причём, заметьте, он это ещё сейчас не сделал, но ждёт от меня команды, что делаем ли мы папку Icons или не делаем. Я говорю: "Ну, давай сделаем runн". Вот моя папка Icons, но иконки там нету. Это просто папка. Помимо этого я вижу справа кнопочку "Принять всё". Применяю всё и уже я как разработчик оцениваю, что же он там мне напридумывал. Давайте смотреть вместе, разбираться. Начнём с Popup. Я вижу HTML какой-то просто код. Тут какой-то, видите, вашу заметку. Заметки будут добавляться здесь динамически. Помимо этого я вижу, что вниз подключен наш PopUP GS. Давайте его по соседству откроем. И вот тут мы видим с вами, а, какой-то код, а, на чистом нативном JavaScript. Мы видим слушатель на документ. А кто-нибудь знает такое событие DOM content loaded? Что вдруг за событие такое? Все, наверное, знают Evвенar Click, что-нибудь такое. А вот Dom Content Loaded. Кто-то в курсе про такую штуку? Можно голосом или в чате? Да, давай голосом. Раз голосом, да, это дождаться загрузки странички, да. На самом деле, когда спецификация была более ранняя, вот именно вот этой штукой мы компенсировали использование атрибута дефер. Вот тут. Ой, вот такой может вы помните такой атрибут. Есть такой атрибут. Так вот, этот атрибут появился позже. Его когда не придумывали ещё использовали вот такую обёртку на весь код. Он это самый большой такой обработчик. В нём вся движуха. Я пока дефер уберу. Давайте сделаем вот так. Как вы думаете, почему он предлагает не использовать дефер, а использовать вот эту штуку? Ответьте, пожалуйста, разработчики. Почему такое решение, на ваш взгляд? Вот Zoomер говорит очень элит, ну, прикольно. Zoom user говорит: "Подержка старых сред, а Дима говорит: "Обучен на старых примерах". А, но на самом деле это можно всё настраивать по-разному. Но главный момент, что это важный пункт, что в целом это всё можно учитывать как попытку либо сделать старые какие-то поддержки наших функционалов, но мы должны как разработчики понимать, что в целом, если мы говорим про старую спецификацию, в старых спецификациях не было понятия constст, там всё было вары. Получается, тут про старую спецификацию, а на второй

строчке уже про новую. И получается, что что-то не то. Поэтому мы должны это осознавать и, по сути, вайп-кодить. Но и что мы тут видим? Мы видим набор переменных, которые по айдишнику забирают из нашего документа, в нашем случае Popup, какие-то элементы. Есть какой-то LED, а маркер с болевым значением, загрузка заветок при открытии и какие-то, в общем, функционалы. Сейчас ценность кода постепенно падает. Вот этот код сгенерирован. Поэтому раньше бы я, если бы я сам это написал, я бы всем показывал. Смотрите, что я сделал. Смотрите, как я написал. Ну хорошо. Допустим, вот мы сделали. Есть ещё по соседству вот этот стиль какой-то базовый и а-а манифест. Теперь смотрите, давайте хочу вас спросить. Этот манифест, он описывает вот ситуацию, что нам нужны стож. описаниейм. Вот тут есть какая-то проблематика, которую вы заметили и которой не заметил AI. Тут она есть, но сейчас в нашем проекте какая-то вот ситуация, которую AI допустил. А у нас есть иконки вообще? Отличный. Кто задал вопрос? Это отличный вопрос. Иконо-то нет? Допустим, представьте, мы настолько вайп-кодеры, что не понимаем, что их нет. Ну, типа, вот написал так, значит, есть. Я этот момент не Ну, короче, я не знаю, я забыл про то, что там иконо, кстати, иконка А иконка есть какая-то. Ну, о'кей. Там свгэдэшку, может, с адишниками приписал, да? Прямо вроде адишников нету. Ну, допустим. Хорошо, я сейчас соглашусь. Я не знаю, сейчас работает или нет. Просто тут написано про СВГ, а в манифест GSON написано про пнг. Это как бы разница сильная. Ну, допустим. И что вот, допустим, я говорю? О'кей. И что он там мне пишет дальше? Это, скорее всего, разные иконки там у него указаны. Ну, о'кей. Имах нету. Вот он что-то говорит. ППП расширение готово к использованию. Вы можете начать тестировать, установив его в Chrome. Если у вас возникнут вопросы, опа, типа, а как установить? Допустим, я не знаю, как установить и говорю ему по-русски. А как те так текущий проект превратить в расширение? Вот он пишет: "Я помогу вам превратить текущие проект в работу её расширения. Давайте сделаем это пошагово". И он говорит: "Давайте, нам нужно сделать PNG иконки разных размеров из нашего SVG файла". Зачем из СВГ? Непонятно. Ну ладно, говорить так. Так, ладно, сами сейчас иконку найдём. Не хочу мучиться с СВГ. Второй пункт. Проверим структуру проекта. Тут у него, видимо, проверялось вот это всё, что 14 мая в 7:23 вечера что-то создавалось. Он говорит: "Всё нормально, всё говорит нормально, необходимо. Откройте, говорит, Chrome. В правом верхнем углу режим разработчика, загрузите. После установки, в общем, всё будет работать. А, ну о'кей, давайте найдём хотя бы одну пнгшку. А какой-нибудь кто-нибудь знает прикольный сайт с иконками PNG? Free PNG Google картинки. Free PNG Icons. Вот лучший сайт на flat икон. Чик. Нам какую нужно иконку? Нам нужен какой-нибудь карандаш какой-нибудь. А вот типа так. Смотрите, как я понимаю, вот эта иконка, она будет в дальнейшем вот где-то здесь на буквально в браузере. Я хочу какая вам вот эта нормальная иконка такая вроде видная иконка. Я сохраню в PNG. А хочу не хочу платить, я хочу бесплатно скачать. И я качаю, сохраняю его в наш мастер-класс. Это у меня где раздел мастер-класс. первый акт и называю в icons называю, я не помню icon там только не там номера указаны были различка так напишу, а потом переименую. Вот я всё это сделал. Иду в сюда. У меня вот такой карандаш, но я помню, что у меня в манифест G Sony было написано прямо размер. А я, кстати, даже не знаю, какой размер я скачал. Как думаете, какой размер? 64 или хорошо выглядит 64. Значит, может быть максимальный тот, наверное, может и больше. Давайте, давай посмотрим тогда вот сюда. Какой там самый большой? Наверное, 128. Значит, я возьму её и

переименую. Только не это, а вот это Rename Icon 128. А-а, ну, допустим, вот так. Эту я вообще удалю. Я даже не знаю, что это такое. Папа в манифест. Так, я вроде написал правильно. Давайте проверять. И потом он говорит: "В общем, открой Chrome и в режим разработчика". Хорошо, давайте откроем Chrome. Открыт Chrome. Я иду сюда в настройки. Режим разработчика у нас Я забыл, где это расширение нужно открыть. Чуть ниже нажать. Сами расширение. А, ну всё. И в правом верхнем углу всё. Ну не, ну у нас не расширение, но как бы тут уже включено у меня давно. Мы пишем, нажимаем загрузить. Распакованное расширение. О'кей. Тогда я введу мой. Где тут у меня мастер-класс? Мастер-класс вот здесь. И вот здесь у меня якобы расширение. Нажимаю выбрать папку. И он мне говорит, что не удалось загрузить манифест. Вот, допустим, давайте вот проблема. Вот наш вот ваших хвалённый AI. Давайте разбираться. Мы можем буквально вот это всё добро отдать, вот этот, допустим, текст отдать нашему курсору, чтобы он сам это решал. Я не хочу решать. Давайте отдадим. А, вот такой текст. А, запускаю брау браузер и делаю делаю, как ты сказал, но ошибка. Ну, допустим, мы можем в таких вот штуках сделать эту ошибку. Он пишет: "А, понятно. Проблема в том, что у нас есть только СВГ иконки, а требует ПН. Он сейчас что-то там подкрутил. Это причём он что делает? Генерейт. Он ещё мне создал какой-то генератор иконок. О боже, он что-то уходит в какую-то сложность, мне кажется. А давайте, мне кажется, мне это не нравится. Я говорю стоп и нажимаю reject all. Я не хочу это всё делать. Я могу в целом либо разобраться вот здесь, как бы, как это работает, но давайте мы выдим. А на самом деле у нас А так 128. Icon 128. Ан, ну в целом у нас же попадает. Тактактак. По неймингу вроде попадает по манифесту. Интересно, если я лишнее удалю. А, кстати, возможно, он же ищет и все остальные файлы. Если я сделаю вот так, оп, и вот так, это чисто уже моё человеческое мнение обычно. Возможно, я хотелось бы, чтобы наш AI об этом не подсказал. Я удалил пути на файлы, которых нет по факту. А вот файлы 128 PNG есть. Открою ещё раз. Это я отменю. Опять загрузить. Опять та же самая папка выбрать. Вот. Вот наш карандашик, кстати. А я сделал простое расширение тра-та-та для создания хранения заметок. О'кей. Как им пользоваться? Я нажимаю на сюда и вижу вот мой notes extension. Нажимаю, вот мой карандашик появился здесь. Вот такой за интересный, конечно, интерфейс. Странно, что вот тут какая-то есть вёрстка. Тут какой-то бордер есть, а справа он потерялся. заметку. Аа меня не заменят. Просто сохранить. Вот такая штука у меня появилась, что в 734 у меня появилась такая вот штучка. Смотрите, я не помню, был ли там момент скаalджем. Сейчас посмотрим. Если был, то у нас это всё сохранится. Давайте просто найдём физически, где это у нас, да, есть local загрузка заветок, сохранения local storage работает. Поэтому, если я сейчас закрою браузер и открою браузер, я сюда вот меня не заменил. То есть по факту я уверен, что если бы делали вы сами, даже если бы это я делал с нуля, я бы точно за такое короткое время не сделал бы такую штуку. Правда, я не знаю, она ещё удаляется. А, поэтому опять же я говорю, что, видите, были проблемы какие-то там с иконками, какие-то ещё моменты, но скорость разработки, очевидно

вырастает. И, допустим, я могу там я вот сделать, попробовать, чтобы он сделал вёрстку более адекватную. Допустим, мне не нравится, что бордер какой-то странный. Я могу попробовать об этом его попросить. А сейчас приложение работает, но правый край поля для ввода а не имеет получать отступ. Отступ, пожалуйста, исправь. пишу, пожалуйста, потому что если вдруг нас ай-ай победит, а я был вроде как добрый с ними, я думаю, что это учтётся. Что-то там делает. В общем, что-то сделал. Я говорю, допустим, я даже не хочу смотреть. Я говорю: "Ну давай". Он что-то бордер сайз добавил, калькуляцию добавил. Я говорю: "Ну хорошо, vippe codдинг". Так, vibe codдинг. Ой, это что такое? Так, давайте перенесу. Всё, видите, я исправил. Ну, возможно, как бы он немножко косячитый, потому что тут мало, а тут много. Я могу и тут придраться, но просто говорю, что это момент, который добавляется. А звёздочка что делает? А звёздочка делает избранную, кстати. И что? Зачем? Может, наверх под А нет, не поднимает. Ну вот, добавил звёздочку. А-а, ну, видимо, чтобы я отмечал какие-то важные идеи. Вот этот момент вот такой. Хочу ваше мнение послушать. Насколько бы вы сделали быстрее либо качественнее вот такое же простое расширение для Chrome, когда вы его никогда раньше не делали. Сделали бы его минут за сем или всё-таки это было бы, может быть, дольше? И насколько, на ваш взгляд, а, помогло это всё? Тактактак. А вот вот я вижу, что Zoom usеer говорит: "Перезапусти браузер, останется заметка". Да, я так сделал. Остаётся заметка. Давайте ещё раз сделаем на всякий. А, нажму на карандашик, сделаю для Zoom user. Сохраню. Вроде есть браузер. Закрываю полностью открываю. А, всё есть. Давайте просто проверим сами. Зайдём в Local Storage и глянем, что он там надо добавлял. У нас хранится Application Local Storage. Тут есть что-нибудь интересное? Либо Session Storage. Куда он сохранил? Либо extension. Вот, наверное, вот здесь. Или не здесь? Интересно, куда сохранил? Не, речь была про Chrome Local Storage. Ну давайте, вот у нас есть Local Storage. Тут у нас есть все возможные моменты. Chrome. Я даже сейчас интересно мне вот найти вот именно Chrome. Но это же, насколько я знаю, должно же быть отдельным стореджем. Вот ещё есть такой storage cash ш storage. Давайте посмотрим, куда он в код зайдём, глянем, что он там куда сохраняет. Chrome storage. По сути, это не local storage, а Chrome storage. Давайте спросим его. А не там ещё local стоит. Вот это смутило. Аэ Chrome storage local. Угу. Я переключаю с агента на Ask. А, убираю и говорю, где мне в браузере посмотреть панель разработчика, где сохраняются заметки. Я переключил с агента на просто ассистент. Просто ассистент говорит, что открой Chrome или он в левом меню storage local storage выеде расширение. Ну давайте попробуем. Получается, мы заходим storage local storage from extension. А storage у нас вот тут был extension storage. Вот он. Но я здесь вижу только отблок и свой. Подожди, он сказал, по-моему, storage, потом local storage и потом дали

extension вверху local storage, если я не ошибаюсь. Ну, а local storage. А, всё, тогда, видимо, наверное, где-то вот здесь или не здесь. Ну, просто я тут вижу, что тут у нас какие-то именно newджи, но тут нету именно экстеншна. Я вижу extension storage, но это не в local storage. Интересно. Ладно, потом я ещё погляжу, посмотрю, потом вам сообщу. Просто интересно, куда он это сохраняет. Тут у нас есть shред, э, сервисы, манифест и так далее. Так вот, а потом посмотрю вам сообщу. Но суть-то не в этом. Суть в том, что я сейчас читаю ваши комментарии. что на работе 2-3 дня попросил бы на такую задачу. Но в целом, а вот сейчас просто настали времена, что кто-то может это сделать за, ну, пускай, о'кей, 30 минут. Вот просто если б я правда, если б я доделал с нуля, я бы делал, ну, наверное, ну, часа два, наверное, изучал про манифест. А вот Анастасия говорит: "За 2 минуты сделала бы и всё". Поэтому, ну, разные, поэтому просто важный момент. Вот пишет Фокс: "Если нужно что-то более сложное находить и агент будет выдавать ошибки, то править их будет больно, лучше самому". Согласен. Поэтому я переключаюсь на Ask. Поэтому в целом тут важно понимать, что это не то решение, когда вот всё делает за нас, мы кнопочку нажали и качаем ногой. Нет, конечно, мы также, если бы это происходило так, то нас точно бы заменили. Теперь акт два. Акт 2. Акт 2 посвящён. Вот мы сейчас сделали с вами небольшое расширение для хрома. Теперь спрашиваю вас, всех разработчиков, скажите, пожалуйста, а за сколько бы вы сделали хороший лендинг с пятью блоками? Допустим, контакты какой-нибудь, анас какой-нибудь слайдер, может быть, небольшой фильтр, что-нибудь такое. Вам нужно сделать это полностью сделать на реакте. Само собой Typeesриpt, само собой деплой. Скажите, пожалуйста, сколько? Кирилл говорит: "Это долго и дорого". Отличный ответ, Кирилл, потому что про дорого, когда я говорил сколько, я специально уточнил, не уточнил про время либо про деньги 1-2 дня, неделю. Поэтому на самом деле без лип, ну как лип у тебя лип будет только React, например. Но если ты хочешь какой-нибудь там подключить TЛ Wind, пожалуйста, подключай без либо. О'кей. Смотрите, я понял вас теперь. А, в общем, какое-то время, но, наверное, это точно будет дольше минут так десяти. А-а, что я хочу вам показать во втором акте? Это я пока закрою, а, закрою проект, папку, точнее, открою ещё одну штучку. А так, а 2, мастер-класс код. Сейчас мы опускаемся на уровень ниже, а на уровень вайб-кодинга. Кто-нибудь слышал про вайп-кодинг? И может быть для кого-то это плохо, а хорошо? Я тут недавно от некоторых ребят, кто впервые стал с курсором разрабатывать, мне написал один товарищ, что я впервые стал разрабатывать под музыку. Обычно разрабатывал в тишине, потому что отвлекает. Вотходинг - это страшно в скобочках будущее. Да, я только что вайп-кодил, но я вайпкодил, а на самом деле не так сильно, как можно вайпкодить. Вот я вижу, что тут пишут, что Юра, а давай перед этим покурим и начнём вайбить. Ну, на самом деле вайбить-то мы уже начали, поэтому мы сейчас будем с вами, кстати, слово курить, оно не только прокурение, а ещё бывает: "Иди покури документацию". Бу говорит: "Иди покури доку". Такое тоже бывает говорят. Особенно люди старших поколений, которые вот они ссылают всех на документацию, на учебники. Я, говорит, докурил, ничего не понял. Вот курите интернет. В общем, ребят, короче, я понял вас. Смотрите, есть редшка. Я хочу сейчас вам показать промт с нашего курса по AI. Мне товарищ говорит: "А сделай мне, пожалуйста, веб-приложение для натальной

карты". Я такой: "Вау-вау". Ну как бы я даже не ожидал такой темы, что я буду делать приложение для натальных карт. Вот такое было требование. Если хотите, мы можем это поделать. Либо мы сделаем то приложение, которое вы мне напишите в чат. Скажите, а вот сделай нам лендинг про вот это. Напишите, пожалуйста, про что делать, про что будем вайпить. Опять же, понятно, да, у нас не полноценный вайп. Обычно вайp кодинг - это рав в руке, но ещё а парилка должна быть. Лендинг про лягух и среды. Это что за лягухи? Обычные лягухи. Ну, типа сдадётся, да? среда, день лягушек. А, о'кей. Давайте тогда сделаем лендинг про лягушек. Я не знаю, что из этого получится, но раз хотите, так хотите, а если что, потом я вам дам время. Вы можете сделать там бинанс, сделать. В общем, просто мне просто интересно про лягушек. Либо опять же вот давайте сделаем простой личный кабинет держателя банковской карты. Натальная карта норм перенумерология. На самом деле, смотрите, мне хочется, чтобы вы понимали, чтобы, ну, разные могут быть идеи. Я смогу даже попробовать несколько сделать. Про лягушек прикольно, я даже не знаю, что там может быть. А про сервис для отеля прикольно, личные кабинеты прикольно, но сайт отеля. Ну, смотрите, давайте начнём лягушек, а потом попробуем сайт отеля. Просто попробуем отель можно потом отель для лягушек. А вдруг кому-то надо и вдруг это будет новый тренд. Мы даже не знаем, мы же пробуем. И прелесть в том, что вот мы сейчас можем генерировать всякие безумства. И раньше бы нам нужно это безумство было кодить. Нам это нужно всё кодить, а сейчас мы будем йбкодить. Хорошо, тогда давайте я возьму за основу вот этот код, который был про агента. А где-нибудь внизу возьму его за основу, только скажу про лягушек. Сгенерирую прот, который создает веб-приложение. А тема надо сказать, что это про меd и лягурхи. Ну давайте, не знаю, давайте. Тема, а мемы и как мне написать, чтобы это было однозначно для AI агента. Напишите мне, пожалуйста, вот какие- какие-то комментарии. Напишите, что чтобы агент понял, что лягухи - это вот которые вы говорите, потому что я могу что-то не то написать, и это будет немного не то. Напишите просто в чат, я это использую, а потом делать будем отель. Ну вот. О'кей. Ну мем, давай. Мем. Тема мем про лягушек. Да, сейчас всё исправлю, поэтому Да, мем про лягушек. А-а, какие там должны быть блоки? У нас там может быть вот у нас блок анас может быть в меме про лягушек, наверное. Как если они если сами лягушки пишут, то вполне Ага. Давайте в скобочках. Будто бы словно эти лягушки сделали свой лендинг. Контакт такты. Ой, он так сейчас всё остальное окей. В общем, ребят, я реально не знаю, что получится, поэтому ещё отзыва опечатка. И примеры, как будто не примеры карта, что-то другое должно быть. А, да. Вот примеры, что могут нам предложить лягушки. Какие они могут? Примеры, досугат быть. Может, примеры досуга лягушек. А приме, может, приме примеры лапок. Я реально сейчас просто вайп-коди. Просто смотрите, вот подобную штуку я бы не мог себе позволить вечерами кодить, разрабатывать. Это правда. Ну, не может быть, можно, но это прям забавно. Короче, примеры лапок. А-а, как техническое задание как будто уже на нагенерировалось от иишко. Вот я сейчас возьму и попрошу, чтобы мне это задание улучшилось. Надеюсь, это задание улучшится. Я пойду в Deeps и вот там пишу, что сделать. Печатка. Дала. Вот. Ну, погнали. А

смотрим. Он пишет: "Вот креативный промт". Короче, пишут впродолжение в стиле культового мема. В общем, всякие штуки. Сейчас мы посмотрим. Возможно, тут что-то будет не то, что нам понравится. Мы сейчас это сделаем. Будет лягушачья банда, которая кричит: "Ах! В общем, будет какие-то капитан. Очевидно, эти лягушки изменили мою среду 10 из де. В общем, это будет всё. Смотрите, сейчас мы какое-то делаем безумие, но это не безумие, это то, что мы можем сейчас делать довольно прикольно. А, и причём вот то, что мы сейчас делаем с вами, мы делаем это ещё на том курсе, про который говорила Вика, и там у нас такое происходит, вы бы знали. Ну так вот, короче, я копирую этот промт и иду в сервис Lavable. Что это за сервис? Это сервис вот эта панелька AI агента, который заточен делать веб-приложения, а и деплоить их. Он делает веб-приложение по описанию. Я вставляю мой промт. Проверяем это лишнее уберу. Ну, допустим, это лишнее я уберу. Важный момент, этот сервис обучался на английских данных. А сейчас я написал по-русски, он меня поймёт, но, возможно, коммуницировать он будет со мной на английском языке. Такое бывает. А бывает смесь русского и английского. А, ну и в итоге, что это можно с помощью этого сделать? Если я нажму вот на эту стрелочку, у меня будет генерироваться а мой моё веб-приложение. Есть переключалка public и priv. Мы пока сделаем публичное. Я хочу это приложение ещё задеплоить. Если помните, деплой - это не самая лёгкая штука. Так вот, это тоже сделает AI. Ну, погнали. Я не знаю, что будет, но будет весело. Нажимаем чик. А, и сейчас я при вас буду показывать, что генерирует наш наточен, ну, как бы настроенный AI агент для создания веб-приложений. Называется он webfrog crew web. Кирилл, вопрос. Плот оно у себя где-то, а сертификаты настраивает и домен тоже имеет. а-а, сертификаты будет будет, ну, будет протокол https, то есть он точно будет, а, защищённый. Доменная зона будет изначально бесплатная. Вот написано Wednesday Frog Crew Web. Это будет вот такая доменная зона. Наверняка она может не понравиться. Ты можешь её заменить на другую. Я об этом покажу, расскажу. Поэтому, да. Так, ещё вопрос. А у меня вопрос. Можно ли туда запихнуть свой проект и забдеплоить его на какой-то настоящий м адрес или Я понял. На самом деле мы так тоже пробовали. На самом деле он работает сначала вот старт всегда из него, то есть свой проект. То есть ты не можешь использовать этот сервис как только для деплоя. Он работает, а чтобы он сгенерировал и он потом куда-то всё это дел. Так вот, я пока хочу одно внимание ваше уточнить. А, да, Кирилл, вопрос. Получается, что хостинг останется у них, а в настройках можно будет свой домен подсунуть. Правильно понимаю? По сути, да. Но на самом деле мы можем это обхитрить. Мы можем буквально всё забрать. Если ты не вот не хочешь, чтобы хостинг был у них, ты все файлики забираешь и можешь захоститься на своём хостинге какой-нибудь, ну, виртуальной машине, какой-нибудь там Select, не сек, ну, всё, где захочешь. Поэтому они, да, они хостят. Так вот, смотрите, я сейчас нажму, вот тут слева есть, а кнопочка. Если я нажму, мы увидим генерацию кода в реалтайме. Из проблем там бывает много кода, и иногда даже браузер подвисает, потому что много кода. Но ладно, я рискну, показываю вам. смотрите, он генерировал какой-то ТСФig. А, идём сюда. Стили, сейчас я прокачусь вниз. Вот генерирует в реалтайме, причём на английском языке. Мы можем потом это сделать, попробовать на русском. А знакомые буквы есть какие-нибудь? On click, может быть, class name key, может быть map, что-нибудь знакомое. Может быть, вы видели какой-нибудь hook us state с вот такими типами. То есть это с тайпскриптом и само собой. Есть ли тут что-то знакомое вам? Вы же тут фронты. Вот. Так, React идёт, да? В общем, есть state, какое-то болевое значение, какие-то штуки. Тут у нас есть, а, state под названием какой-то ещё константа

фильтр leк, есть leк, неглекс. В общем, что-то будет безумное. Если что, это вы сделали, вы попросили лягух. В общем, это что-то делается. Я прокатываю вниз. Он ещё это всё у нас а-а генерируется в реалтайме. Это был контактфом. Сейчас у нас генерируется футер. Почти всё почти уже заколи. Разбивка на компоненты есть? Конечно, есть. Мы же разработчики, у нас всё на компоненты. Я потом покажу структуру папок. Это, само собой, это не один файл, всё будет по компонентам. Будет PG. Вот даже мы видим SRC pages. Мы вот тут видим небольшие отсылки к этому. В общем, походу скоро сейчас что-то будет, я не знаю, но появится веб-приложение. Причём мы могли даже задавать какие-то конкретные цвета, а, но вот, ребята, у нас появляется веб-приложение. Давайте его посмотрим более детально. Я думаю, это какой-то прямо прикол. Вот. Это я сейчас штуку сделал с вами. Написано: "It's Wednesday, my deпочка sis my dudes. " Вот такая штука. Тут какая-то анимация. А, beautiful. Вот тут должны быть какие-то картинки, но из-за того, что есть авторские права, у нас вот такие заглушечки. Это важный момент. Мы сделали, что вот тут какая-то, видимо, отзывы от лягух должны быть. Тут контактная форма, что вот типа вот первым первый день Wesday, само собой. А есть у нас вот такой футер. А так вот есть ещё переключалка темы, само собой это есть. Скажите, пожалуйста, за сколько бы вы сделали по времени вот это? Я это сделал минут за семь. Вот. Причём важный момент, что тут какая-то анимация. Это же нужно всё анимировать. Есть переключалка темы. И сама тема не тривиальная. И тут, конечно, можно ещё подкручивать какие-то моменты. Тут есть фильтрация, а слайдер есть с какой-то вот 10 из десяти, а форма и так далее. В общем, это всё есть. Ещё есть что? М, в общем, ну, такие какие-то моменты. Теперь смотрите, я могу что сделать? Я могу найти какие-то проблемы. Ва, может, вам, может, и вы мне обозначите, что тут какой-то есть что-то неидеальное. Давайте найдём что-то неидеальное, что вас не устраивает в этом сайте. Ну вот кнопка Sims, она при не очень красивая. Да, как, ну вот, да, давайте сразу тогда возьмём и скажем: "А как-то ты не очень хорошо сделал". Давайте напишем по-русски кнопка аа си Что с ней не так? Напиши, что типа она мм частично скрыта. Вон она залезает в следующий блок. Сделай сделай, чтобы было красиво. Что помимо этого? Давайте сделаем это первый пункт. Что ещё не нравится? Давайте попробуем, чтобы всё-таки два. Сделай всё на русском языке. Этот момент сложный тем, что по факту, э, какие-то моменты он может перевести, какие-то не может. А давайте просто всё слово всё сделаем буквально большим. Всё на русском языке. Что-то ещё нам нужно подкрутить? А может быть, не знаю, сделай, может быть, сгенерируй картинки для гушек и используй их. Аа что тут? Форма send message, ну, типа о'кей. Ну, в целом, давайте хотя бы сделаем вот такой момент. Я пишу это всё, отправляю ему на доработку. Надеюсь, сейчас мы увидим. Кстати, важный момент, шрифт, возможно, поедет, потому что вот этот шрифт красивый только на английском языке. Бывает, что на русском языке шрифт будет менее красивый. Но, по крайней мере, он пишет, что workingг я сейчас могу сделать. Ой, так, пока сюда не буду нажимать. и хочу увидеть, что происходит. Сейчас мы добьём эту тему и посмотрим, что он там будет делать. Он сейчас думает

и что-то переделается. Вот пока он там думает, я просто проговорю, что мы дальше сделаем. Мы сейчас сделаем отель. Давайте сделаем сайт для гостиницы, тоже опишем, что там нужно сделать. Но важный момент, что есть тут кнопка паблиish. Мы можем опубликовать и задеплоить вот этот наш странный лендинг. А попробую сейчас, когда изменения произойдут, я это всё вам отправлю, чтобы вы сами зашли аа с телефона. Возможно, там, кстати, не будет мобильной разметки и мобильной вёрстки. Ну, по крайней мере, посмотрим. Можем зайти посмотреть, что там он, э, добавляет. Он пишет: "У нас чуваки, мы легушачья банда, группа земноводных". энтузиастов, посвятивших себе среде. Себя среде. В общем, тут что-то будет вот такая штука. Классические какие-то там лягушки будут, экстрахрустящие королевские лапки, прыгучие лапки. В общем, они будут разные. А, ну о'кей. Прекрасны лапки чуваков. Опять же, мы могли это всё сами кодить, но, по крайней мере, сейчас вайбкодим. Можно пока попить. Я попью чай, чтобы прямо максимальный вайп. Если у вас есть чашечка с собой, давайте тоже хлеба. Вот чашечки поднимем. PEкод. Так, вот сейчас он доделает, я это задеплою и сделаем ещё один для отелей. И уже какие-то итоги подведём. Давай пока вопрос. Ну, точнее, нет, не вопрос, я могу задать вопрос по комментарию с чатика. Написали, что напоминает V0. А мо Да, я просто по Да, хорошо. На самом деле подобных инструментов всё больше и больше. Я примерно знаю пять, которые напоминают либо Vinol, либо lavable. Они плюс-минус похожи. Lavable просто неплох в плане вёрстки, поэтому Vноль тоже хороший. Ещё реплит есть, который подобным занимается, поэтому вариантов не так много, но пять-то точно есть. Аэ, вот тут вопрос как раз есть. Кнопки точно все работают. Проверим, поглядим. Ещё вопрос от, а если всё время, а если время будет про чем курс будет лучше курсы на Юдеме? Будут только веб-сайты? Нет, не только. Вообще не про веб-сайты курс, а про AI, который мы будем делать. Первая неделя на нашем курсе посвящена такая лайтовая больше, а, которая позволяет в целом погрузиться в какие-то AI инструменты, такие как Cursor AI, Naton. Naton - это N8N и много-много других. Он уже, кстати, сгенерировался. Сейчас я договорю и после этого мы с вами продолжим. Так вот, первая неделя в большей степени - это работа м с инструментами, а работа со знакомством с какими-то подобными AIгенераторами кода, но не нацевлен только на веб. Важный момент. Мы вообще зовём туда именно разработчиков. Я акцентирую внимание, потому что на курсе есть отсылки к Python. Если вы думаете: "О, нет, я веб-разработчик, я знаю JavaScript и Typesриpt, не переживайте, приходите". Поэтому там Python мы тоже немножко всё-таки прокачаем, потому что Python там очень много где используется, особенно на второй неделе. А сейчас покажу тогда сайт, потом договорю. Смотрите, у нас тут догенерировалось. Э, сегодня среда, мои чуваки. А сегодня среда, кстати, среда. Тогда всё прекрасно. А вот такая штука. Кнопка чуть покрасивее стала. Лягушачья банда. Факты о лягушках. 92% лягушек подтверждают среда лучший день. Так что имейте в виду. Группу лягушек называют среда. Лягушка на 300% счастливее по средам. В общем, короче, вы поняли, мы сделали лендинг. Вот тут должны были быть лягушки, но вот тут мы видим косячечные картинки, которые можно просто заменить, но одна лягушка уцелела, и она аа класс, поэтому возможно она такая. Что говорят наши чуваки? Тут у нас получается всё также должны быть картинки, которые нужно заменить. Мы просто допускаем, что такое может быть. Причём мы стали, видите, что всё стало вообще по-русски. Ваш любимый день недели, среда. Хотите ли вы лягушачих клапокту, ну, в общем, ваше сообщение отправить. Вот такой ндоOS. Мы сделали за два промкта и минут за 20 с переключением темы на белую. А, понятное дело, он не идеальный, но тут есть фильтрация, это

на реакте и всё так далее. Нажимаю кнопочку опубликовать, нажимаю вот сюда. Ждём. И по сути я сейчас деплою, но вообще даже и не парюсь об этом. И я нажимаю вот это всё добро. Я Ага, можно было не обновлять, но можно скопировать вот этот сайт. Сейчас он там дообновляет. Я скину эту ссылку. Вы только что сами сгенерировали вот такой прекрасный лендинг, чуваки. Вот зайдите, посмотрите, работает ли. А я сейчас не с телефона, поэтому, может быть, на телефоне будут косяки. Вот. Но, по крайней мере, а довольно необычная тема. Мы сделали. Тут даже какой-то есть креатив. Картинки можно просто добавить, но базовый момент работает. Вот теперь я вернусь к вопросу про то, что в курсе. Так вот, чтобы было понятно про то, что в курсе, я просто пойду на сайт, и мы сделали специальную вкладочку. Куда она делась? Материал программа. Вот это всё открывается. И вот тут мы максимально подробно расписали 2 недели. Давайте начнём с первой недели. А, обсуждаем AI курсоры, AI инструменты. Второй день - это у нас подключение AI и интеграции каких-либо LLM через AP. То есть мы будем делать интеграцию по сути вы можете сделать любое ваше приложение, в котором будет иишко. Третье- деплой с помощью вот этого всего. Четвёртый день мы говорим про MCP- это модель контекст протокол, который позволяет улучшать функциональность во много раз. В пятницу первой недели мы говорим про Naton - это LAД платформа для создания агентов и для автоматизации. Первая неделя довольно лайтовая в сравнении со второй. Вторая неделя - это мы уже говорим про рак. Это когда мы говорим про retrieval argumented generation. Это работа с векторными базами данных. Если вы не знаете про векторную базу данных, приходите, потому что если вы знаете, что есть только реляционная и нереляционная, знаете, есть ещё векторная. Во вторник мы говорим и работаем, а с библиотекой LН chain и создаём своего собственного AI. Ходим на Джесе, но приоритетнее на Python. Если вы думаете, что вы не знаете Python и вы по этому не идёте, это ошибка. А в среду мы продвигаемся дальше, уже изучаем нграф и делаем продвинутый сценарий для наших собственных AI агентов. В четверг мы обсуждаем лучшие практики и обсуждаем такие концепции, как Human in the Look и Fallback страatгии. Кто знает, тот знает. Так вот, и в пятницу у нас демонстрационный день, который, по сути, пока показывает всё, что мы сделали. И как раз подобного на Юдеме нету точно. И вот эти штуки, они обновляются буквально каждую неделю. И из-за этого мы обновляем нашу программу буквально каждый поток. Вот эти штуки самые крутые. Вот это я вас зову в том числе и на крутые штуки. А с телефоном всё ровненько написали. Ну, короче, да, в общем, с телефона всё ровненько. Давайте сделаем ещё одну приложуху. Вы сказали, это было одно. идём на lavable и делаем ещё одну, подводим итоги и уже пойдём отдыхать. Смотрите, какую про отели. Сгенерированный промпт. Тема, делаем, а, лендинг для отеля. А давайте про отель. Он какой будет? Дорогой отель и так далее. А какой отель? Он будет эконом-классы либо бизнес-класса для веб-разработчиков. Какой? Самый дешёвый отель. Хорошо, такой будет прямо. Мы зайдём на сайт и сразу по сайту поймём, что дешёвый отель для джунов. А отель эконом класса самый нешёвый. Так, стек, пускай так. Блоки онас, контакты, примеры, отзыв, примеры, а-э, номеров, ну, допустим, она сконтакта. Пускай ещё будет карта. Карта карта. расположение ещё нужно фильтр

номеров. Фильтр номеров о'кей. Тогда я беру всё это дело, копирую, вставляю в GPS, делаю новый промт, нажимаю сюда и, а, получаю новый обновлённый промт. аккаунтом генерируется. Я покажу, что у меня вот здесь появился мой первый проект, посвящённый лягушкам. А сейчас у меня будет второй проект, который посвящённый самому дешёвому отелю. Я даже вот не знаю, загрузится ли картинка. Вот тут обычно загружается, но ладно, пока не загрузились. Иду в DeepsК. Тут есть вопрос, заголовок. Почему мы, ну, кроме цены, он уже намекает, что отель крутой. Вот мы сейчас планируем вот такое штуку. Комментарии: "Я прожил 3 дня и выжил 4 из пяти". Аноним. Хотите подушку? Плюс 50 руб. Поэтому, ну, в целом вот такие моменты. А опять же мы сейчас всё-таки говорим, что мы делаем. Тут, возможно, есть небольшой элемент юмора в этом, но мы можем и серьёзнее делать промты. Ещё скопировал этот промт. Нажимаю новый project. Он ссылает меня сюда. Я убираю вот сюда. Ну, допустим, вот так. И делаем новый. Возможно, он на старте также будет на английском, потому что так работает этот AI агент. Вот пока он грузится, можете задать вопрос про А или уже есть. Я написал карта разложения. Ну ладно, сорян. Да, Валентин, у меня такой вопрос больше про курсор именно доступа к нему. Э-э, я так понимаю, где у тебя про-версия, то есть насколько легко, тяжело оплачивать его из России? И нужно ли че как через VPN подключаться, чтобы нормально общаться с курсором? Угу. А у меня проверсия. Аа, ну у меня в планах, я в планах оплатить его сразу на год. А, но легко ли оплатить? Нелегко оплатить, но просто это просто нужно зарубежную карту. Обычно почему я про то, что нужно на год, чтобы один раз купить. Там очень крутая скидка, правда, там прямо она мегакрутая. И если говорить на год, по-моему, это стоит около 12 или 15. 000 руб. Это в целом немало, но если на год, то можно 12. 000 разделить, короче, 1. 000 в месяц плюс-минус. Вот. Нужен ли VPN для использования курсор AI? Не нужен. Он работает и так. А, кстати, бывает так, что есть была возможность в курсор AI использовать менее эффективные модели, но бесплатно, но тогда он ощутимо становится тупее. Поэтому, наверное, чтобы вы понимали, курсор пока тут генерирует, я вам про курсор рассказываю полезной. Помимо вот, ээ, рульсов, которые я показал, если ещё есть project Rules, которые тоже есть, и ещё есть раздел модели. И вот тут я вижу, какие модели могут быть. Тут чат GPT 41, 4, грок, разные популярные модели, которые можно включать, выключать и каким-то образом ими оперировать. Либо можем добавить свой AI ключ. Если опять же можно, если у вас куплен чат GPT, вдруг вам можно не покупать, а ещё раз и курсор можно использовать здесь API ключ или у вас Antropic API ключ или Google API ключ. разные ключи, чтобы это как бы два раза не покупать, одно и то же, потому что тут GPT есть, у меня не было GPT, поэтому у меня здесь такая вот штука есть. А помимо ещё других способностей есть вот раздел а фич, который позволяет нам индексировать документацию. Что это значит? Вы можете промотать до вот этого момента. Вот тут вообще написано индексирование текущего проекта. Но текущий проект - это один файл, тут нечего индексировать. Но есть вот тут docs. Тут мы можем отдать нашему курсор AI документацию до какой-то фреймворк, который вы изучаете, чтобы он вам помогал. Я добавлял сюда по Nest, как он работает. Смотрите, допустим, выходит новая версия React. React, допустим, какой-нибудь там Reactт там двадцатый. Мы сейчас видим, что вот 191, последняя версия. Я могу зайти в документацию, допустим, вот какая-то Дате, может быть, вот есть на русском, кстати, наверное, нет. Ну ладно. В общем, документация девятнадцатого реакта. А по хукам я

отдаю, я копирую ссылку и говорю моему курсору: "Курсор, я добавляю тебе новую документацию, пожалуйста, изучи её". Он говорит: "Какую ссылку нужно изучить? " Я говорю: "Вот эту". Нажимая Enter, назовём React Docs и нажимаю подтвердить. Он только что заиндексировал, смотрите, 102 страницы. Сейчас у меня вот это всё есть теперь в моём AI агенте как контекст. То есть, допустим, если вы не знали про Hook use action state, ну, я, конечно, могу ткнуть и почитать сам об этом хуке. Но могу теперь просто попросить его объяснить мне, что такое use action state, и он с этой индексацией гораздо эффективнее мне объяснит, что это такое. И таким образом я могу добавлять какие-то документации, которые не хотите читать, мы хотим вайп-кодить, надавали сюда, и у нас курсор AI стал чуть-чуть поумнее. Также отдельный момент - это MCP. MCP - это невероятно крутая штука, которая позволяет нам работать с различным контекстом. У нас отдельно в курс в на курсе есть об этом целый день. И также мы делаем свои MCP-сервера. Но если коротко, MCP - это штука, которая позволяет нам намного эффективнее работать с большой языковой моделью. И вот тут у меня включен MCP doкеer. Если коротко попробую продемонстрировать его. Кто шарит в докере? Помните ли вы команду, которая показывает, сколько у вас образов на компе? Апа, я жду команду Docker Images. Это правильный ответ. Смотрите, я могу сделать вот так, как вы сказали. Я сделаю images, и он говорит: "Вот мои, а образы, но как бы я не хочу команду вводить, я могу просто спросить его по-русски. Я закрываю, надеюсь, сейчас MCP у меня докер запущен, вроде окей. А я нажимаю это, закрою, нажму Ctrl I и просто по-русски спрашиваю, сколько у меня образов на этом компе. Просто вот ком комп. Я даже не говорю, каких образов. Он должен понять, что докер образов. Пробую и узнаю. А, видимо, мне нужно перезапустить мой MCP сервер. Давайте попробуем. Если коротко, это как я сделать буду? Я сейчас запущу докер. У меня он запущен, и мне нужно будет контейнер один, наверное, остановить, удалить. И после этого сейчас я сделаю ещё раз, потому что я это делал давно. А теперь мы зайдём в шестерёночку, зазовём в MCP. Это мы закроем, обновим, зайдём сюда. И зелёная галочка загорелась. Вроде как работает. Сейчас проверим. Должно сработать. На всякий случай сделаю вот так. Это мы закроем и сделаем новый чат. А я попробую закрыть курсор. Эх, видимо, мне нужно будет подкрутить там кое-что. А если я сделаю askк? Ну вот сейчас он мне через не через агент, а через ассистента говорит: "Сделай, говорит, эту команду Docker Images и там всё увидишь". Но я не хочу команду. У меня принципиальная позиция. Хочу, чтобы агент мне всё сделал и команду в том числе. Но, видимо, мой MCP сервер сейчас почему-то не работает. Если я его рестартану, так, о'кей. Ладно, сейчас, видимо, не покажу тогда. Потом уже кто будет на курсе приходите, покажу. Поэтому суть в чём? А я просто по-русски напишу, он сделает запрос к моему MCP-серверу. Просто этот MCP сервер, он, грубо говоря, это не в составе курсора, я просто его сам подключил. Вот. И это, грубо говоря

образ специальный, вот он здесь запущен, а, который забирает такую движу. Ну-ка, если я сделаю вот так. О'кей. Mages, сейчас попробую один контейнер. Это сейчас всё удалю. Просто ещё раз интересно. Я вот удалю. Зайду вот сюда. А, и здесь сделаю старт. Запускается. И, по-моему, он валится. Docker from ENV. О'кей. Значит, это косяк моего контейнера. Он сейчас не запущен. Смотрите, я запускаю и он, видимо, падает. Видите, он сразу падает. То есть я нажимаю и Play превращается снова в Play. Об этом можно потом поглядеть, посмотреть. В общем, потом это можно поправить, но суть в том, что это очень удобная штука. Главное, чтобы вы понимали, в концепцию MCP. Ладно, показываю, что там у нас делается. Вот он, самый дешёвый отель в городе. Но серьёзно, давайте посмотрим, что мы сделали, сгенерировали за моё общение с вами про другую тему. Вот такой а-а лендинг называется Дёшево и сердито. Вы сами сказали, что так должно быть. Есть вот такая переключалка темы. Есть, а, дверь закрывается не всегда. Это комментарии какие-то или что-то. Наши роскошные номера. Картинки, кстати, есть. Но картинки, как мы видим, это не дешёвые отели, а какие-то крутые отели. Есть вот такой фильтр. Есть тип кровати, можно одна спинка на двои. А одна спина. Что? Одна спина. Ладно. какие-то разные есть фильтрации. И в общем, вот такой у нас есть сайт. Есть карта отеля, но, видимо, она ещё не до конца написано. Есть два этажа какие-то можно выбирать. А я даже не знаю, что этони тут такое сгенерировали. Отзывы. Отзывы написано, возможно, настоящие, как и всегда в интернете. Пишет, что я прожил 3 дня и выжил. Тараканы оказались дружелюбными и даже помогли внести чемодан. Поэтому просто поймите, это всё сгенерировалось, но можно забронировать улица Правды 13. Ищите вывеску, не сдаёмся. Вот поэтому вот такую штуку я сделал, пока общался с вами и пытался запустить MCP-сервер. Так, поэтому такой вот вопрос. А-а, что ещё? Полуторка с историей. О'кей. Суть в том, что, смотрите, мы сделали с вами ещё один какой-то лендинг. А, есть отзывы, карта. Ну, можно это всё улучшать, само собой. Я нажимаю опубликовать и просто скину вам, чтобы вы посмотрели. Естественно, если вы сделаете промт качественный, серьёзный, с какими-то детализациями, просто мы сейчас это сделали очень быстро. А и а может быть какие-то, конечно, ошибки появляются, да, и в целом они будут появляться. Главное, чтобы вы понимали, как их можно было бы исправлять. Сейчас скину вам ещё один вариант. Вот ещё один сайт. За вечер я сделал два лендинга и ещё расширение для хрома. И ещё с вами Вайбово общался и пытался запустить MCP сервер. В общем, вот такой дешёвый отель мы сделали лендинг. А-а, попробуйте, кстати, сами, а, зайти потом на Lavable, поиграться, погенерировать свои какие-то решения. Сейчас я просто бы хотел, наверное, прервать уже а шаринг экрана и просто пообщаться с вами, поотвечать на вопросы. Тут были Так, есть какой-то бот в телеге для оплаты зарубежных сервисов? На самом деле точно, есть разные боты. Есть даже сайт для платы курсоor AI, просто там ещё комиссию требуют. Зачем кастомный MCP должен сам из-под капота? Не сможет, на самом деле. А не сможет. Всё, допустим, я хочу, чтобы у меня AI агент работал в контексте каких-то моих личных файликов, допустим, тогда мы можем сделать кастомные MCP под себя. MCP серверов сейчас много, но они с разными задачами. Прямо всё-всё-всё на данный момент и не может. И поэтому мы можем сделать MCP помощника, который будет делать какие-нибудь SQL-сы сырые запросы сложные. Если вы не шарите в SQL-запросах и у вас нету на работе ОРМки и, допустим, вам нужно только сырые запросы и вы в них не очень, вы теряетесь в джойнах. есть MCP сервер, который делает сырые запросы и так

далее. Ну, в общем, вариантов много. И MCP - это отдельный прямо мир, который развивается и так далее. А своим контентом можно наполнять сайт на их хостинге. Мы можем, на самом деле, что сделать, когда мы находимся на Lavable, это всё отправить на наш GitHub. Вот это всё будет на нашем гитхабе. Изменить там в нашем гитхабе и сделать синхронизацию, и тогда контент появится. И там такое можно сделать. Поэтому главное, просто вы поймите, этот AI агент очень крутой, а он генерирует прекрасные, на мой взгляд, решения. Мы сначала лягушек сделали, потом сделали отель, а и всё в целом это не очень так было сложно. Я понимаю, что, конечно, есть стайлгайды, это всё есть и есть ограничения, но, по крайней мере, AI помогает нам что-то быстро делать. В целом, что я хочу просто ещё раз напомнить. Если вам интересна тема AI и вы хотите не только какие-то вот промт писать штуки и не только какие-то генерации, а буквально разрабатывать своих AI-агентов, зову вас на курс по AI, который Вика скинула. Я соавтор этого курса. Мне курс очень нравится. У нас уже было уже сейчас уже идёт по, по-моему, третий поток. Я не помню, какой поток. В общем, а приходите, мы 2 недели будем общаться про AI в разном виде, про AI ассистентов, про рак системы, про Long Chachain, Landph, Naton, всякие другие штуки. Что требуется, чтобы вы точно знали и умели? У вас должен быть докер, у вас должна быть нода и у вас должен быть установлен Python. Если вы переживаете, что вы Python не знаете, не надо переживать, это нормально. У нас очень много ребят, которые приходили, не знали Python, постепенно разбирались. И мы за то, чтобы вы пробовали кодить не только на знакомом языке, а в целом на любом языке. Вот. Вот QR-код. А-а, поэтому заходите. Кстати, про ещё же промокод есть. И сколько там Вика, он скидка даёт? 15%. Вот он, поэтому 15, поэтому, да, действует до 18 мая. Поэтому зову вас на этот курс. Опять жезову тех, кто хочет быстрее разрабатывать, больше понимать, что такое современный AI. Для тех, кто хочет понять, как можно решать рутинные задачи, для тех, кто хочет более продвинуто настроить MCP-сервер, курсор AI и просто походить по вечерам, потому что это всё по вечерам. Старт в 7:00 по Москве, по будням с 7:00 до 9:00. Запись лекции у нас происходит, поэтому, если вдруг вы опоздаете либо не придёте, это, конечно, не очень хорошо, но запись будет. Поэтому записи мы храним и так далее. Мерси. А у тебя есть какой-нибудь уже любимый момент с курса или что-нибудь смешное или что-нибудь весёлое или на что серьёзно? На самом деле, ну, любимый момент, конечно, есть. А вот опять же любимый момент - это когда есть вау-эффект, когда что-то думаешь: "Вау, да он не может быть". Это точно такое бывает. Поэтому а такое есть. Также люби любимый момент - это когда люди делают интеграцию своего какого-то решения через IP либо API к LM системе. В нашем случае у нас будет гигачат. Это русская лмка. Она обучалась на русских данных. И мы тоже делаем интеграцию. Причём мы её делаем в контексте лекции. В общем, много всего. А детальнее можно просто посмотреть на сайте. Вот. Мы там буквально расписали по дням и так далее. Вот. И сейчас вопрос про вебинары, видеозаписи вашего курса. Сможете продать 80. 000 руб. что-то дороговато. Вебинары мы не продаём, а 80. 000. Ну это в зависимости. Я не скажу, что это дёшево, это какая-то опять же сумма. Просто опять же для AI, для навыков, для прокачки, думаю, самое то. Поэтому призываю вас просто хотя бы ознакомиться. А мы не планируем продавать записи, но запуски будут. Важно сказать, да, что вот этот, если может быть кто-то опоздал, старт 19 мая, это не единственный старт, потом будут и другие старты, например, следующий старт уже запланировано вылавливать какие-ни Можно

вылавливать промокоды какие-нибудь, может акции могут быть, чтобы как-то снизить ценник. Это может сделать. Ещё также важно что-то ещё хотел добавить. А, кстати, про то, что просто ещё важный момент, что вебинары, а когда продаётся, их ценность мне меньше. Просто когда ты, возможно, ты даже их купишь и не посмотришь, а может половину посмотришь. А когда живые лекции, всё-таки это намного атмосфернее и полезнее. Вот. Но тут уже про вопрос цены, он открытый. Я не говорю, что это дёшево, дорого. Это вопрос у каждого свой. А, поэтому приятно, что вы в целом интересуетесь, заходите к нам на мастер-класс. Я думаю, мы на все вопросы ответили. А не буду удерживать. А вот пишут: "Сейчас не могу взять, но летом планирую. Ещё будут? Да, ещё будут. Поэтому летом можно, летом, как вам нравится". Поэтому просто лето начнётся через 14 дней через 15, поэтому имейте в виду второго июня ещё следующий старт будет, да? В общем, я зову вас. Вы приходите, если ещё мы сделаем мастер-класс подобный какой-нибудь новенький, приходите и ещё раз на мастер-класс. Мастер-класс, по сути, это почти маленькая лекция с того курса, про который мы говорим. Мы постараемся как-то, возможно, ранжировать, чтобы не было так, что вы пришли на сегодняшний мастер-класс, вам понравилось, вы приходите на следующий мастер-класс, и я то же самое рассказываю. Постараемся так не делать, будет что-нибудь новенькое. Главное, чтобы вы приходили, задавали вопросы, придумывали безумные темы. Это мы будем делать. Всё. Я желаю вам и Вике хорошего вечера. Всем большое спасибо, что вы пришли. Было круто. Спасибо, что были с нами. Всем пока. Всем пока-пока. Пока. Спасибо. Пока. M.