Transcription
<b>Cloud Code в последнее время привлекает много внимания, но это не единственный инструмент для написания кода с использованием ИИ, который стоит использовать.</b> <b>Open Code набирает популярность, и не зря. Он на 100% является открытым исходным кодом, поддерживает множество поставщиков и моделей, включая бесплатные модели, и предоставляет вам невероятно мощный рабочий процесс написания кода прямо в терминале. В этом видео я покажу вам все, что вам нужно знать, чтобы начать работу с Open Code, от первоначальной настройки до изучения расширенных функций, таких как навыки агента, серверы NCP, субагенты, фоновые агенты и рабочие процессы реальных проектов. К концу этого видео вы будете знать, как использовать Open Code как серьезную альтернативу Cloud Code. Давайте приступим. Первое, что нам нужно сделать, это установить Open Code. Вы можете просто перейти на opencode.ai, а с этой страницы просто перейти к инструкциям по установке, и они сделали процесс настройки чрезвычайно простым. Вы можете просто скопировать эту команду curl здесь, затем вы можете просто открыть командную строку или терминал, вставить эту команду и нажать Enter. И установка Open Code займет всего несколько секунд. Отлично. Теперь, когда у нас установлен Open Code, чтобы запустить Open Code, мы можем просто ввести команду Open Code и нажать Enter. И это все. Теперь у нас есть доступ к Open Code. Теперь, при использовании Open Code, я рекомендую открывать его в папке проекта. Так что вы можете просто открыть окно терминала, сначала перейти в эту папку, а затем запустить Open Code. Или я также люблю запускать Open Code из редактора кода, такого как VS Code или Cursor. Это определенно необязательно, но преимущество такого подхода заключается в том, что я могу легко видеть любые файлы, которые создаются агентом. Но если вы просто хотите использовать окно терминала, это тоже вполне нормально. Итак, в нашей папке проекта давайте запустим Open Code. Итак, первое, что нам нужно сделать, это подключить Open Code к любому поставщику, которого мы планируем использовать. Итак, что мы можем сделать, это ввести косую черту, ввести connect, что запустит команду connect. Затем из этого списка поставщиков мы можем найти поставщика или просмотреть огромный список поставщиков, которые они поддерживают из коробки. Теперь это может быть включено по умолчанию, но я рекомендую подключиться к Open Code Zen. Это, по сути, их собственный шлюз для вызова моделей. И это дает вам доступ к бесплатным моделям, кстати, поэтому оно того определенно стоит. Итак, я просто ищу Open Code Zen. Затем это ничего вам не будет стоить, нам просто нужно подключить ключ API. Итак, я просто открою этот URL. Затем из этой панели мы можем фактически просмотреть наше использование, мы можем настроить любые платежные данные. И просто чтобы доказать вам, что эти модели бесплатны, мой баланс на данный момент составляет ноль долларов. Итак, перейдем к ключам API, а затем фактически создадим новый ключ, я просто назову этот Open Code Masterclass, давайте создадим его, затем скопируем этот ключ и передадим его Open Code и нажмем Enter. Я удалю этот ключ, поэтому, пожалуйста, используйте свой собственный. После того, как мы войдем в поставщика, мы можем выбрать из доступных моделей для этого поставщика. Теперь, как вы можете видеть, в этом списке есть бесплатные модели, такие как BigPikko, HY3, Minimax, 2.5 и NemoTron3Super от Nvidia. Теперь я хочу упомянуть, что с бесплатными моделями всегда есть вероятность, что они могут использовать свои проблемы для обучения этих моделей. Так что, если вы просто хотите попробовать это бесплатно или следовать учебнику, вы определенно можете использовать бесплатные модели. И я покажу вам, как подключить это к реальному платному сервису. Пока я выберу BigPikko, и теперь мы вернулись в этот интерфейс чата. Давайте просто скажем привет, и мы получили ответ, и это ничего нам не стоило. Итак, на данный момент наш проект очень пуст. Давайте попросим нашего агента создать новый проект Next.js. Пожалуйста, создайте новый проект Next.js, используйте команду npx, и я фактически добавлю к этому. В текущем рабочем каталоге всегда есть вероятность, что агент фактически установит Next.js в какой-то подпапку. Хорошо, этого достаточно. Отправим это. И, как вы можете видеть, он выполняет команду npx для установки Next.js. И если мы посмотрим на нашу файловую систему, мы действительно видим наш проект Next.js. Давайте посмотрим, может ли OpenCode также выполнять команды. Пожалуйста, запустите сервер разработки. И действительно, он фактически запускает сервер разработки на порту 3000. И круто, наш проект Next.js работает. Итак, мы можем фактически прервать агента, нажав Escape. Если мы нажмем Escape еще раз, мы просто прервали этого агента. Итак, что я также хочу сделать, это фактически очистить разговор, введя косую черту new. И теперь у нас есть новая сессия со свежим контекстом. Если вы когда-нибудь захотите возобновить предыдущую сессию, вы можете просто ввести команду sessions. И мы можем видеть, что ранее сегодня мы начали этот разговор. И теперь, если бы мы хотели, мы могли бы просто продолжить этот чат. Но я хочу начать новый разговор. И на оставшуюся часть этого видео я фактически не буду использовать бесплатную модель. Вместо этого давайте подключим OpenCode к другому поставщику. Итак, я снова запущу команду connect. Теперь, чтобы подключить OpenCode к более интеллектуальной модели, вы можете выбрать поставщика, такого как OpenAI, Anthropic или Gemini, что угодно. Теперь здесь есть кое-что, о чем вам нужно быть осторожным. У вас есть два разных способа оплаты инференса. Вы можете платить за API, или вы можете использовать свои существующие подписки у одного из этих поставщиков. Например, если вы хотите использовать что-то вроде Anthropic или OpenRouter, вы можете предоставить свой ключ API, и вам будет выставлен счет на основе использования токенов. Так что это своего рода вариант оплаты по мере использования. Но, честно говоря, я думаю, что это самый дорогой вариант. Я бы не рекомендовал использовать ключи API, особенно для задач кодирования. Вместо этого используйте свои подписки. Теперь, к сожалению, Anthropic еще не поддерживается. И если вы в курсе, вы знаете, что Anthropic банит практически всех, кто использует их сервис и их подписки. И это не ограничивается только OpenCode. Они банят всевозможные инструменты, такие как OpenClaw. Так что, чтобы быть в безопасности, я бы рекомендовал просто подключить его к OpenAI или, возможно, даже к чему-то вроде Kimi. Но лично я буду использовать OpenAI. Отсюда мы можем выбрать наш вариант аутентификации, например, chatgpt pro или plus. Это относится к нашей подписке. Так что, если у вас есть подписка pro или plus, выберите этот вариант. Третий вариант заключался в предоставлении вашего ключа API, который я просто не рекомендовал бы. Затем мы можем открыть этот URL в браузере. Давайте войдем с нашей учетной записью. Продолжим. И готово. Теперь мы можем выбрать модель, которую хотим использовать. Давайте выберем GPT 5.5. И, кстати, если вы когда-нибудь захотите изменить свою модель, просто введите команду models. Итак, давайте нажмем на нее. И теперь мы можем выбрать из любой из доступных моделей. Мы также можем искать модели. Так что мы могли бы просто искать GPT 5.5. Итак, я выберу тот, который от OpenAI. И это все. Теперь на данный момент мы используем GPT 5.5, но с средним уровнем усилий по рассуждению. Если мы когда-нибудь захотим изменить уровень усилий по рассуждению, все, что нам нужно сделать, это запустить команду variants, которая дает нам усилия по рассуждению, специфичные для этого поставщика для GPT 5.5. Я выберу высокий уровень рассуждений. Теперь, прежде чем мы создадим наш проект, я хочу назначить этому агенту определенные навыки, которые помогут получить еще лучшие результаты. Теперь, если вы новичок в навыках, навыки — это просто действительно крутой способ добавить дополнительные возможности нашему агенту. Навыки — это не более чем очень подробные инструкции, которым агент может следовать, чтобы получить очень конкретные результаты. Есть два навыка, которые я бы рекомендовал установить в проекте, подобном этому. Поскольку мы создаем веб-приложение, мы хотим дать этому агенту навык фронтенд-дизайна. Теперь самый простой способ, который я нашел для изучения и установки навыков, — это этот веб-сайт, skills.sh. Это репозиторий почти 100 000 навыков. Так что вы можете просто искать навыки, но вы уже можете видеть из самых популярных навыков, что навык фронтенд-дизайна находится в верхней части этого списка. Итак, давайте фактически скопируем эту команду, затем вернемся в наш проект, я просто открою новое окно терминала и давайте установим этот навык. Open code не входит в этот список, но это совсем не проблема, потому что он использует стандартную папку .agents для получения навыков и всего, что мы хотим к ней прикрепить. Так что я фактически не буду ничего выбирать в этом списке. Давайте просто нажмем Enter. Мы установим это на уровне проекта и давайте продолжим установку. И просто чтобы показать вам, что это сделало, он создал эту папку .agents, которая является стандартным соглашением для большинства агентов кодирования. И внутри папки agents у нас есть подпапка skills вместе с нашим навыком фронтенд-дизайна. Он содержит название навыка, описание того, когда использовать навык, и просто очень подробный запрос на создание красивых пользовательских интерфейсов. Поскольку мы используем Next.js, я хочу установить еще один навык, и это навык Next.js от Vercel labs. Давайте скопируем эту команду, и я просто запущу ее в терминале, так же, как мы делали с навыком фронтенд-дизайна. Нам не нужно выбирать какие-либо из этих инструментов или устанавливать на уровне проекта, и это все. Итак, теперь в папке skills у нас есть наш навык фронтенд-дизайна и навык Next.js, который фактически содержит много справочной документации по использованию Next.js. Теперь в нашем приложении будет встроенная функциональность ИИ, поэтому я фактически буду проактивным и установлю AI SDK от Vercel. Итак, снова просто найдите AI SDK, скопируйте эту команду, и давайте установим этот навык. Итак, мы можем просто проверить, имеет ли агент доступ ко всем этим навыкам, выполнив команду skills. И здесь мы можем видеть наш навык фронтенд-дизайна, AI SDK, лучшие практики Next и Next.js. Так что некоторые из этих навыков могут фактически храниться в моей папке пользователя, но для вас у вас должны быть эти три навыка. Просто к сведению, если вы не видите никаких навыков, вам нужно просто выйти из open code, выполнив команду exit, затем просто снова открыть open code, и теперь вы должны увидеть все эти навыки. Итак, я просто переключу свою модель обратно на GPT 5.5 high, и я также сделаю следующее: просто перейду к управлению исходным кодом и создам коммит, добавлю его, навыки. Приятно. И, кстати, если вы нажмете на этот логотип Open Code, вы получите этот эффект. Еще один важный компонент для понимания — это файлы памяти. Итак, в корне нашего проекта мы можем создать новый файл под названием agents.md. У меня уже есть этот файл, но если у вас его нет, вы можете создать его сами. И этот файл выглядит примерно так. Я фактически удалю все, что сейчас находится в этом файле. И здесь мы можем рассказать нашему агенту все о нашем проекте и предоставить очень строгие инструкции. Это фактически является частью системного запроса для этого агента кодирования. Так что, если есть какие-либо конкретные правила, которым вы хотите, чтобы агент следовал, вам нужно добавить их сюда. Если вы хотите, чтобы Open Code сам создал этот файл, вы можете выполнить команду init. И Open Code просканирует вашу кодовую базу и автоматически создаст и настроит этот файл agents.md. И после того, как это будет сделано, у нас теперь есть наш файл agents.md с некоторыми инструкциями, просто описывающими макет и стек технологий в этом проекте. Теперь я рекомендую вам просто очистить этот файл и добавить как можно меньше информации. Предоставляйте только строгие инструкции, которым должен следовать агент. И позвольте мне показать вам, насколько это мощно. Давайте сделаем что-то очень простое, например, отвечать только эмодзи. Это все. И теперь, если я отправлю сообщение, например, привет, как дела? Агент отвечает только эмодзи. Так что это действительно критический сбой. Если агент делает что-то, что вам не нравится, просто добавьте правило в этот файл agents.md. Вы будете мне благодарны. Что мы собираемся сделать, это кардинально изменить этот файл agents.md. Вместо этого я добавлю все эти правила в файл agent.md. Я хочу упомянуть, что вы можете получить доступ ко всему этому бесплатно. Я оставлю ссылку на репозиторий GitHub в описании этого видео. Так что, если хотите, вы можете просто скопировать мой файл agents.md и следовать ему. Итак, что я люблю делать, это добавить это правило: держите свои ответы краткими и по существу. Иногда эти агенты слишком болтливы, и мы платим за токены. Поэтому я предпочитаю короткие и лаконичные ответы, если я не прошу иное. Затем, когда агент находится в режиме планирования, он должен задавать уточняющие вопросы. Он никогда не должен предполагать дизайн, стек технологий или функции. И если это возможно, он должен использовать субагентов или фоновых агентов для помощи в таких вещах, как исследования. И он также должен использовать фоновых агентов для проверки различных аспектов плана перед представлением его пользователю. Когда агент не находится в режиме изменения или редактирования, он никогда не должен реализовывать функции самостоятельно. Он всегда должен использовать субагентов. Теперь, есть действительно веская причина для этого. Мы хотим максимально защитить окно контекста основного агента. Вы заметите, что, хотя этот разговор очень короткий, мы уже используем около 10 000 токенов или 3% контекстного окна. И в какой-то момент, обычно после отметки 50%, мы начинаем достигать зоны глупости этих агентов, где качество очень быстро ухудшается. Так что, используя субагентов, мы говорим этому основному агенту делегировать рабочие задачи субагентам, и эти субагенты будут возвращать только окончательное резюме того, что они сделали. Таким образом, мы сохраняем окно контекста этого основного агента максимально чистым. Также выявляйте любые изменения в плане, которые могут быть реализованы параллельно. При использовании субагентов для реализации этих функций действуйте только как координатор. Используйте лучшую модель для задачи. Используйте премиальные модели для сложных задач. Используйте свои модели для более простых задач, таких как документация. После завершения функций всегда запускайте такие команды, как проверка длины, проверка типов и сборка next, чтобы проверить качество кода. Теперь это может быть не актуально для нашего приложения, но если бы у нас была база данных, мы могли бы применить некоторые правила базы данных. И если у нас есть какие-либо тестовые фреймворки или инструменты, мы можем иметь раздел, обеспечивающий тестирование. Теперь для дизайна пользовательского интерфейса вы всегда должны следовать системе дизайна пользовательского интерфейса при создании или проверке компонентов или страниц. Если у вас когда-либо возникала проблема с агентами, когда пользовательский интерфейс непоследователен во всем приложении, вы можете просто использовать этот подход, чтобы заставить его использовать очень специфическую систему дизайна. Так что он ссылается на этот файл design.md. Так что я собираюсь создать этот файл в этой папке под названием design.md, и я фактически вставлю эту систему дизайна. И это просто дает много деталей о цветах, таких как основные цвета и границы, и отступы, такие вещи. Опять же, вы можете скачать все это из описания. И у меня действительно есть много видео о создании систем дизайна, которые агенты могут использовать. Отлично. Итак, просто чтобы убедиться, что все действительно вступит в силу, я фактически создам новую сессию, и это должно загрузить наш новый файл agents.md со всеми этими новыми правилами и условиями. Я также создам коммит под названием файлы памяти и система дизайна. Итак, теперь, когда все настроено, давайте начнем создавать наше фактическое приложение. Так что это будет интересное. Но сначала краткое слово от сегодняшнего спонсора, Cintra AI. И я думаю, что это вас действительно заинтересует, потому что они решают проблему, которая есть у многих из нас. Давайте будем честны. Если вы следили за миром GenteCoding, разработка программного обеспечения стала быстрее, чем когда-либо. Вы можете перейти от идеи к работающему продукту за выходные с cloud code или cursor. Часть разработки, по сути, решена. Но затем продукт просто лежит там, потому что сложная часть — это уже не разработка. Это все остальное. Социальные посты, электронные письма для запуска, новостные рассылки, объявления об обновлениях продукта, вещи, которые большинство из нас не подписывались делать. Вот где на помощь приходит Cintra. Думайте об этом как о второй половине вашего бизнеса. Это команда ИИ-сотрудников. Каждый из них обучен как специалист по не связанным с кодированием частям ведения продукта или бизнеса. Я использовал двух в частности. Первый — Soshi, менеджер по социальным сетям. Я могу рассказать Soshi о новой функции, которую я только что выпустил, и она сгенерирует неделю постов на разных платформах в моем голосе с моим позиционированием. Я просматриваю, редактирую то, что не кажется правильным, и утверждаю то, что кажется правильным. Вторая — Emi, специалист по маркетингу по электронной почте. Я прошу ее составить электронное письмо с обновлением продукта. Она извлекает контекст о моем продукте из профиля Brain AI и пишет первый черновик. Я видел это, это не магия, но все же лучше, чем смотреть на пустой электронный адрес. Есть еще 10 помощников, занимающихся SEO, поддержкой клиентов, копирайтингом, анализом данных и многим другим. И есть 14-дневная гарантия возврата денег, так что вы можете попробовать всю команду без риска. Перейдите на cintra.ai/lyonfonsale, ссылка в описании, или используйте код lyonfonsale при оформлении заказа. Вы получите эксклюзивную скидку 72% на все тарифы в течение ограниченного времени. Это cintra.ai/lyonfonsale. Код lyonfonsale для скидки 72%. Спасибо Cintra за спонсорство этого видео. Это приложение позволит пользователю передать грубую идею того, что он пытается построить. И наше приложение затем предложит стек технологий и определенные аспекты приложения. И в этот момент мы можем как бы доработать их с помощью самого пользовательского интерфейса. К концу мы получим запрос, который мы можем скопировать и передать нашему агенту кодирования. Это своего рода инструмент дизайна или инструмент спецификаций, где мы можем спланировать проект, прежде чем передать его нашим агентам. Мы можем переключать режимы, удерживая Shift и нажимая Tab. Это переключит нас между режимом разработки и режимом планирования. Вы также заметите, что есть разные модели для режима планирования и режима разработки, потому что иногда вы можете предпочесть, чтобы одна модель выполняла планирование, а другая модель выполняла фактическую реализацию. Итак, в режиме планирования я фактически передам этот запрос. Опять же, вы можете получить это из самого репозитория. Но просто чтобы пройтись по нему, мы создаем легкое приложение для планирования проектов на основе ИИ для этого учебника. Приложение должно позволять пользователю вводить грубую идею приложения, затем генерировать редактируемый проект с кратким описанием приложения, целевыми пользователями, основными функциями, рекомендуемым стеком технологий, страницами и маршрутами, возможной моделью данных, этапами разработки, рисками и крайними случаями, а также окончательным копируемым стартовым запросом для агента кодирования. И затем мы сохраним объем небольшим, так что никакой аутентификации пользователя, никакой базы данных, никакой оплаты. Это просто простое приложение Next.js. Я фактически просто изменю одну вещь здесь, чтобы сказать, что мы будем использовать AI SDK с open router для инференса. И тогда есть еще одна вещь, которую я хотел бы добавить. Для модели данных было бы здорово, если бы вы могли визуализировать отношения между различными сущностями, возможно, используя react flow или что-то подобное. Хорошо, я просто скопирую этот запрос обратно в Open Code. Давайте вставим все это. На самом деле нам нужно изменить модель. Я определенно не хочу использовать Olamo для этого. Я рекомендую для планирования, чтобы вы фактически использовали самую интеллектуальную модель, к которой у вас есть доступ. Если план достаточно детализирован, вы можете фактически использовать менее интеллектуальную модель кодирования. Итак, для этого давайте просто снова вставим этот запрос и отправим его. Хорошо, это многообещающее начало. Мы видим, что агент использовал навык AI SDK, Next.js и навык фронтенд-дизайна. И знаете что, поскольку мы используем shad cn, мы также можем установить навык shad cn. И это своего рода нормально для моего процесса. По мере добавления новых фреймворков и возможностей я люблю искать официальный навык для этого фреймворка или инструмента и устанавливать его в проект. Другой агент задает нам несколько уточняющих вопросов. Должен ли ответ ИИ генерироваться сразу или передаваться по частям? Я думаю, что сразу. Должны ли черновики сохраняться только во время текущей сессии или восстанавливаться после обновления с использованием локального хранилища? Давайте выберем локальное хранилище. Насколько интерактивной должна быть визуализация модели данных изначально? Это только для чтения граф. Я думаю, что это должно быть только для чтения. И давайте подтвердим это. Хорошо, у нас есть план реализации. Изменений не было. Хорошо, это здорово. Подтвердить выбор. Здесь у нас есть наша архитектура. Нам нужно добавить несколько зависимостей, что на 100% правильно. Нам нужно установить AI SDK, а также поставщика open router для AI SDK. Мы установим Zod для проверки схемы и для визуализации модели данных, мы установим Reactflow, используя этот пакет. И это кажется очень крутым. У нас есть открытый вопрос. Какую модель open router следует использовать по умолчанию? Если вам все равно, я буду использовать переменную среды, такую как open router model, с разумным значением по умолчанию, документированным в .env.example. Ну, на самом деле, мы найдем модель, которую можем использовать. Я думаю, что я просто буду использовать sonnet 4.6. Итак, давайте скопируем это название модели. Для модели используйте anthropic_glaudsonnet 4.6. И давайте закончим это. Хорошо, у нас есть этот план, но на данный момент он просто хранится в сессии. Что я люблю делать, это сохранять этот план. Итак, в этой папке .agents я создам новую подпапку под названием plans. Затем мы можем переключиться в режим разработки и я втяну расположение этой папки плана. Пожалуйста, пока не вносите никаких изменений в код. Пожалуйста, сохраните этот план в папке plans. И готово. Итак, в папке plans у нас теперь есть наш план реализации здесь. Что означает, что мы теперь можем ссылаться на этот план в будущем. Это также означает, что мы теперь можем очистить этот контекст, создав новую сессию. Давайте загрузим этот план, а затем, пока мы находимся в режиме разработки, давайте скажем, пожалуйста, реализуйте этот план. Этого должно быть достаточно. Давайте отправим это. И если он следует нашим инструкциям agents.in_default, он теперь разделит план на задачи, которые могут быть выполнены параллельно, а затем запустит фоновых агентов для реализации этого плана. Давайте посмотрим. Я сначала прочитаю план реализации и структуру проекта. Затем разделите любую независимую работу между субагентами, где это имеет смысл. Отлично. Это такой крутой рабочий процесс. Приятно. Итак, он создал этот список дел, чтобы мы могли точно видеть, что агент планирует делать. И он в настоящее время устанавливает все эти зависимости. Пока агент занят разработкой этого плана, нам нужно настроить наш ключ API open router. Итак, в корне проекта создайте новый файл под названием .env, и .env файл позволяет нам хранить любую конфиденциальную информацию. Так что это, как правило, вещи, которые не должны быть развернуты на GitHub или, знаете ли, в каком-то репозитории, где их может увидеть кто угодно. Это идеально подходит для хранения ключей API. Итак, что мы сделаем, это создадим новую переменную под названием open router API key. Затем я вернусь в open router. Я создам новый ключ, и давайте просто назовем его ai-project-planner, и давайте создадим ключ. Давайте скопируем это и вставим этот ключ. Это все. Мы закончили. Это позволит нашему приложению взаимодействовать с моделями ИИ. И также, кстати, если вы задавались вопросом, можете ли вы создавать свои собственные пользовательские субагенты, да, можете. Так что по умолчанию, если мы перейдем к /agents, у нас есть агент разработки и агент планирования. Но мы можем добавить своих собственных пользовательских агентов. Позвольте мне просто показать вам, как. Итак, я открою новую сессию терминала. Затем давайте выполним команду open code agent create. Мы просто создадим этого агента в этом локальном проекте, и теперь мы можем дать описание того, что этот агент должен уметь делать. Итак, я просто назову его coder agent. Я не знаю, просто для развлечения, давайте передадим это, и это сгенерирует нового агента для нас. Так что, если вы хотите создавать агентов, которые специализируются, возможно, на любом дизайне пользовательского интерфейса, кодировании, тестировании или написании документации, вы определенно можете это сделать. И наш основной агент добивается большого прогресса здесь. И, как говорит эта подсказка, если мы хотим видеть, что делают субагенты, мы можем нажать Ctrl и X вниз, чтобы просмотреть наши субагенты. Итак, в настоящее время мы смотрим на общий агент, и если мы нажмем вправо, мы можем увидеть агент-исследователь, и если мы снова нажмем вправо, мы можем увидеть другого агента-исследователя. И затем мы можем просто нажать вверх, чтобы просмотреть нашего общего агента. Хорошо, круто, реализация завершена, поэтому я открою новое окно терминала. И давайте вручную запустим сервер разработки, выполнив npm run dev. И вот что у нас есть. Так что не так уж плохо. Мы можем ввести идею нашего приложения и, надеюсь, справа мы увидим, как потоково передаются результаты ИИ. Так что у нас даже есть несколько примеров запросов. Давайте возьмем приложение для планирования еды для занятых родителей, которое создает еженедельные списки покупок. Давайте нажмем сгенерировать краткое описание. Так что это действительно занимает много времени, чтобы получить результат. Так что это может быть просто то, что модель занимает много времени для генерации результатов, но было бы идеально, если бы все эти разделы потоково передавались по мере их доступности. И это заняло минуту или две, но мы получили наш результат. Итак, у нас есть наше краткое описание. Название приложения может быть weekly bites. И круто то, что мы можем вносить изменения. Так что, если нам не нравится weekly bites, мы можем сделать это, я не знаю, weekly meals. Мы можем отредактировать резюме. У нас есть целевая аудитория. Затем у нас есть этот JSON-массив всех различных основных функций. У нас также есть этот рекомендуемый стек технологий. Так что это рекомендует Next.js с tailwind. Хорошо, это здорово. Страницы и маршруты. И у нас есть модель данных. Так что все здесь. Но вместо того, чтобы показывать JSON-массив, я бы предпочел что-то другое. Может быть, красивые визуальные карточки вместо массива. Также внизу мы видим этот граф модели данных. Так что для всех тех из вас, кто заинтересован в том, чтобы увидеть, как выглядят база данных или модели данных, это своего рода хороший способ просто визуализировать эти отношения. Видеть результаты занимает много времени. По сути, вы используете структурированный вывод AI SDK для потоковой передачи разделов по мере их доступности. Также мне не нравится, что вы представляете данные в виде JSON-массивов, показывайте карточки вместо этого, которые переводятся в JSON за кулисами, которые пользователь может легко редактировать или удалять. Я думаю, этого будет достаточно. Давайте запустим это. Хорошо, тогда давайте посмотрим, работают ли эти изменения. Я просто выберу одну из этих других идей. Давайте нажмем сгенерировать краткое описание. Так что это должно потоково передавать эти элементы по мере их генерации моделью. Так что, надеюсь, это будет ощущаться немного более производительным. И на самом деле это так. Мы видим все эти различные элементы, появляющиеся один за другим по мере их генерации моделью. Хорошо, это здорово. Опять же, мы можем редактировать любое из этих полей. Вместо того, чтобы приложение показывало нам JSON, оно фактически показывает нам разные карточки, и мы можем удалять карточки. Мы можем добавлять дополнительные карточки, если хотим, и мы можем редактировать содержимое внутри каждой из этих карточек. Круто. Хорошо, наше приложение, кажется, добивается действительно хорошего прогресса, но мы еще не закончили. Оно все еще не выглядит очень хорошо, поэтому мы улучшим пользовательский интерфейс. И во-вторых, я не хочу продолжать тестировать приложение, пока агент не будет готов. Поэтому мы фактически заставим Open Code автоматически тестировать приложение для нас. Что мы можем сделать, это назначить этому агенту сервер MCP. Это позволит этому агенту использовать браузер для навигации по приложению и его тестирования. Так что я буду использовать сервер Playwright MCP для этого. Хорошо, тогда то, что нам нужно сделать, это прокрутить вниз до раздела Open Code. Затем у нас есть эта документация, показывающая, как настроить серверы MCP для Open Code. Но мы просто скопируем этот код здесь. Хорошо, чтобы добавить серверы MCP в Open Code, вам нужно создать новый файл под названием open code.json в корне папки проекта. Затем в этом файле я просто напишу в терминале. Мы можем скопировать эту конфигурацию, например, этот сервер Playwright MCP, и вставить ее в этот файл. Теперь вы можете назвать MCP как угодно, например Playwright или, я не знаю, Playwright MCP. Вы можете изменить это имя на любое, какое захотите. Теперь, что я собираюсь сделать, чтобы протестировать это, это открыть новое окно терминала. Давайте запустим open code. Затем давайте запустим команду MCPs. И здесь мы видим, что Playwright MCP в настоящее время подключен. Если вы когда-нибудь захотите отключить этот MCP, вы можете просто нажать пробел, и это отключит Playwright на время сессии. Итак, вместо этого мы сделаем следующее: вернемся к нашей основной сессии, где у нас еще нет сервера MCP. Что нам на самом деле нужно сделать, это выйти из Open Code, чтобы загрузить эту новую конфигурацию. Давайте вернемся в Open Code. Давайте перейдем к MCPs. Вы видите, что Playwright действительно подключен. И чтобы возобновить предыдущую сессию, мы просто перейдем к sessions. Давайте выберем нашу сессию реализации. Круто, теперь мы вернулись туда, где были. Итак, в качестве последней части этой разработки давайте сделаем кое-что действительно крутое. Дизайн пользовательского интерфейса сейчас действительно ужасен. Используйте навык фронтенд-дизайна, чтобы полностью переработать пользовательский интерфейс, включая шрифты, цветовые стили, все. Затем мне нужно, чтобы вы протестировали приложение и визуально подтвердили, что все работает, используя инструменты Playwright MCP. После завершения также обновите файл design.md. Круто, это должно быть весело. Давайте запустим это и посмотрим, что мы получим. Хорошо, это действительно круто. Агент внес свои изменения и теперь использует Playwright для управления браузером. И я ничего не трогаю, кстати. Агент в данный момент управляет приложением. Он заполняет поля, нажимает кнопки и тестирует наше приложение от начала до конца. Так что агент просто будет тестировать от нашего имени, внося любые исправления. И это блестящий способ автоматического улучшения и тестирования вашего приложения на автопилоте. Дайте мне знать в комментариях, что вы думаете об Open Code. Собираетесь ли вы попробовать? Также, если это видео помогло вам каким-либо образом, пожалуйста, нажмите кнопку "Нравится" и подпишитесь на мой канал для получения дополнительных учебных пособий по агентам кодирования. Если вы хотите вывести свои навыки агентов на новый уровень, рассмотрите возможность присоединения к моему сообществу "Agentic Labs". Я только что выпустил первые несколько видео для моего мастер-класса по агентам кодирования, где я учу вас всему, что вам нужно знать, чтобы создавать реальные приложения с использованием ИИ. Если вы когда-нибудь застрянете, у нас есть сессии вопросов и ответов в прямом эфире каждую среду. У нас также есть активное сообщество из более чем 700 создателей ИИ, так что кто-нибудь обязательно сможет вам помочь. Спасибо за просмотр. Увидимся в следующем видео. Пока-пока.