Transcription
Всем привет и добро пожаловать в гостиную Mountain View здесь, в кампусе. Мы собираемся немного глубже погрузиться во все, что вы видели сегодня: от фоновых агентов и пользовательских агентов до облачных агентов и всех новых настроек, которые были выпущены вчера. Так что это прямо из печати. Это лабораторная работа с возможностью следования. Так что, крутая часть в том, что у меня есть несколько человек в аудитории. Поэтому я буду смотреть на всех в аудитории, насколько вы близки к следованию, и тогда, надеюсь, люди удаленно сделают то же самое. Итак, лаборатория называется "Sock Ops Social Ops", и она связана с тем, что после этой сессии здесь, в офисе, у нас будет небольшой счастливый час. Так что цель сегодняшнего дня, и особенно для людей здесь, в аудитории, — это построить все это, и в конце у вас будет свое собственное небольшое персонализированное приложение для социального бинго, которое вы сможете принести на счастливый час, завести друзей и создать хорошую атмосферу. Итак, что я хочу, чтобы вы сделали сейчас, здесь и все, кто слушает, — это проверьте последнюю версию VS Code. Убедитесь, что у вас нет ожидающих обновлений, потому что команда только что выпустила новую вчера. Затем убедитесь, что вы вошли в систему с помощью GitHub. Если у вас бесплатный Copilot, вы не получите доступ к облачному агенту. Так что убедитесь, что у вас есть подписка Pro или корпоративная. У вас установлен Git и Node в вашей среде разработки. Так что все открыто и готово к действию. Итак, репозиторий, который мы собираемся использовать, если вы его запустите, выглядит так. Он работает как страница GitHub, когда вы его настроите. И это небольшая игра, где вы можете найти людей, у которых есть интересные, в данном случае, атрибуты, такие как любовь к острой пище, занятия йогой и наличие сада. А затем у вас есть бинго. Так что, красивое приложение, чтобы начать разговор и узнать людей вокруг вас. Сам репозиторий, у меня есть ссылка здесь. Сделаю это больше. Итак, это github.com/microsoft/vscode-agent-labs/sock-ops. Так что откройте это. Это первый шаг. Я оставлю это на мгновение. А затем на странице есть кнопка в правом верхнем углу "Использовать этот шаблон" и "Создать новый репозиторий". Пока люди это набирают, я тоже открою это здесь. Итак, мы здесь, используем этот шаблон и создаем новый репозиторий. Это приведет вас на страницу, которая выглядит так. Создать новый репозиторий. Вы хотите шаблоны здесь, а затем вы можете выбрать себя в качестве владельца, а затем "Мое потрясающее sock ops". Я думаю, бинго "Мое потрясающее бинго", это будет ваше имя. Вы можете выбрать все, что вам нравится. Вам не нужно давать описание. Но вы должны сделать его публичным. Иначе вам понадобится специальный доступ, чтобы страницы работали. А затем нажмите "Создать репозиторий". Поднимите руку, если вы дошли до этого. Хорошо. Красиво. Да. Снова ссылка. Также увеличьте масштаб. Хорошо. Итак, этот репозиторий содержит, по сути, простой V React с Tailwind. Этот я не слышу вопрос. URL: github.com/microsoft/vscode-agent-labs. Он отображается там? Хорошо. Замечательно. Итак, что есть в этом репозитории, когда вы его клонируете. Мы посмотрим на него. Теперь откройте VS Code, а затем вы сделаете git clone с GitHub. Я сделаю это в другом окне, которое у меня уже открыто. Итак, у меня есть пустой VS Code здесь. Я могу перейти прямо в представление управления исходным кодом и нажать "Клонировать репозиторий". И с моей страницы, которую я сделал, которая находится здесь, "Мое потрясающее бинго", я могу скопировать локальную ссылку. Хорошо. Сколько человек получили шаблон и готовы? Вот так. Несколько. Вы получили. Поднимите руку. Хорошо. Достигли критической массы, чтобы продолжить редактирование. Итак, в VS Code, у всех открыт VS Code. Если вы хотите использовать команду, есть также команда для клонирования. Git clone. Вы идете сюда, git clone, командная палитра и вводите этот URL, который вы только что скопировали из GitHub, который в данном случае github.com/digitarald/my-awesome-bingo.git. Нажмите Enter, и он спросит, куда сохранить. У меня есть папка разработчика, куда я все складываю. Если вы хотите поместить его в WSL или ваш Ubuntu или куда угодно, куда вы обычно помещаете свой код, а затем он уже клонирован, и я могу открыть его в том же окне, и я получаю это. Итак, если вы дошли до этого, снова поднимите руку. Вы моя аудитория, чтобы увидеть, как далеко продвинулись люди. Если вы застряли, попросите людей поднять руку, чтобы увидеть, могут ли они помочь вам в WSL. Причины, по которым может произойти сбой, могут быть в том, что у вас не установлен Git или любые другие зависимости, но в остальном все должно быть довольно гладко. Хорошо, как только вы его откроете, вы можете начать изучать кодовую базу. Самое главное, есть папка lab с файлом guide.md, который будет нашим руководством для этой лаборатории. И то, что вы видели раньше. Большая просьба поднять руки, насколько продвинулись люди. Видят ли люди это перед собой? Да. Если нет, все документировано в руководстве. Так что, если вы доберетесь до него позже, вы также можете следить за ним в свое время позже. Так что не волнуйтесь. Что вы можете сделать с этим руководством, потому что именно отсюда вы будете копировать запросы и все остальное по ходу дела. Я фактически закреплю его. Если я щелкну правой кнопкой мыши по этой вкладке и нажму "Закрепить", она не закроется, когда я буду чистить свои вкладки и открывать другие вещи. В данном случае мое закрепление приведет к свертыванию. Ваше закрепление может выглядеть иначе. Но да, давайте поговорим об учебных целях. Итак, пока люди готовятся к клонированию и заканчивают, и поговорим о том, когда вы закончите эту лабораторию, вы поймете, как интегрировать ИИ в вашу кодовую базу, как внедрить его с помощью контекстной инженерии, которая предоставляет инструкции и все остальное. Так что ИИ из коробки работает лучше и гораздо лучше и глубже понимает вашу кодовую базу. Следующее — понимание примитивов агентов. Так что вы можете создавать рабочие процессы, ориентированные на ИИ, потому что стандартные решения помогают в 80% задач, но во многих случаях вы хотите дополнительно настроить Copilot для ваших рабочих процессов и того, как ваша команда работает с этими примитивами агентов. Есть много изобилия, которое может быть раскрыто с помощью этих систем агентов, когда вы используете их для параллельного выполнения большего количества задач, что может масштабировать исследование и скорость обучения для вас или вашей команды. Так что это то, что мы будем исследовать позже. И, наконец, вы, надеюсь, в конце почувствуете атмосферу уютной среды в среду днем, VIP-кодинг, и у вас будет готовое приложение, которое вы разработали и построили, которое вы можете запустить и показать своим друзьям и завести друзей, используя его. Итак, быстрая проверка рук. У кого работает VS Code, как я смотрю на него сейчас? Да. Несколько, потому что нам нужно создать лучший пользовательский агент, который просто подготовит и клонирует вашу вещь. Я добавил один фрагмент ИИ, чтобы помочь вам с настройкой, это приветственный запрос. Так что, как только вы его установите и подготовите, вы можете открыть чат сбоку либо с помощью этого значка сверху, либо с помощью боковой панели, а затем вы вводите /setup снова /setup, и этот маленький запрос мы можем посмотреть на него, так что вы можете просто запустить его. Я запущу его. Мне нечего настраивать. Но по сути, это маленький помощник, который снимает с вас все усилия по пониманию того, что нужно установить, какие зависимости могут отсутствовать. Он по сути сделает все за вас. В данном случае он проверит npm install. Он выполнит линтинг. Он выполнит сборку. Перемещу это вниз и запущу сервер разработки в конце. И все это просто запрограммировано в вашу цель — успешно собрать и запустить рабочее пространство, предоставив контрольный список задач для достижения. Затем, чтобы дать ему шаг за шагом, что ему нужно сделать, но он понимает, как устанавливать зависимости. Он понимает все эти вещи как концептуальную вещь. Мне просто нужно дать ему контрольный список, например, я хочу, чтобы эти вещи произошли. В данном случае сервер разработки откроет предварительный просмотр в браузере, который вы увидите здесь. Моя игра запущена. Замечательно. И теперь он дает мне краткий обзор. Нет. О нет, он хочет создать компонент приветствия. И мы этого не хотим. Мы не объясняем. Может быть, им не следует объяснять. Нет, если он начнет создавать файлы, он зашел слишком далеко. Он также не знает, как создавать файлы, потому что ему не дали инструмента редактирования. Так что он выводит их в виде блока кода. О, быстрая проверка руководства. Так что, если вы только что присоединились, это репозиторий microsoft/vscode-agent-labs/sock-ops, иначе спросите человека рядом с вами или проверьте запись. Все, что есть в обзоре, здесь. Хорошо, прошло 15 минут. Итак, мы начинаем. Итак, если вы проверите это, если вы запустили запрос на настройку, у вас должна быть рабочая версия перед вами с закрепленным руководством, и браузер показывает вам игру в рабочем состоянии. Свободное поле свободно, а затем я могу просто играть в игру. [кашляет] Итак, что еще здесь есть? Итак, у нас есть некоторые MCP для более позднего использования. Так что, если в вашей папке с кодом есть файл msp.json, JSON. Я добавил некоторые настройки, которые мы только что выпустили, чтобы убедиться, что вы используете все последние функции, которые мы только что включили. Да. Да. Если вы опоздали, если у вас есть репозиторий, то в руководстве вы можете следить за ним. >> Да. Вот так. Хорошо, как только он будет выгружен, вы сможете вернуться к gut. Итак, первый шаг. Этот репозиторий уже содержит кучу всего, но чего в нем нет, так это скопированных инструкций. И агент фактически сообщает нам на этом начальном экране, что я должен сгенерировать инструкции. Если вы их не видели, давайте создадим их и посмотрим, как они выглядят. Но по сути, что они делают, как выглядят инструкции, это то, что они хотят иметь краткую мини-карту и введение в репозиторий, о котором агент всегда осведомлен. Так что в большинстве случаев вы хотите дать ему базовое понимание того, о чем репозиторий, что такое продукт, над которым вы работаете, а затем дать краткий обзор того, где находятся различные артефакты репозитория, в каких папках находится логика и каковы общие правила внесения вклада в репозиторий. Чаще всего вы получаете файл, подобный этому. Когда вы генерируете его автоматически, Copilot будет смотреть на разные файлы и понимать, что происходит, и он будет смотреть на эти файлы, смотреть на еще несколько файлов [кашляет] и начнет документировать, что происходит в репозитории. Так что, если вы еще этого не сделали, первое — это сгенерировать инструкции чата, они также находятся в меню выше. Так что вы можете вызвать его из окна агента или вызвать его из меню или команды. Как только у вас это будет, это было довольно быстро. Мы также, поскольку мы используем Haiku, который является хитрой быстрой моделью, мы теперь можем спуститься и, возможно, если это слишком долго, давайте скопируем этот запрос из руководства, потому что это все еще много всего, например, каковы функции. Есть несколько дополнительных примеров локального хранилища API. Нам не обязательно нужно все это, чтобы агент понял, как это работает, потому что он может просто найти это в конечном итоге. Так что мы можем сказать вам сжать его наполовину. Мы хотим, чтобы он был очень кратким, очень маленьким, потому что все эти инструкции будут в каждом запросе. Чем больше мы можем оптимизировать эти токены и сжать их, сохраняя при этом смысл, тем лучше. И я также хочу, мы только что узнали о контрольных списках из запроса на настройку. Так что это может очень помочь в обеспечении того, чтобы каждый раз, когда мы вносим большие изменения, происходили линтинг, сборка и тестирование. Мы хотим дать агенту еще один контрольный список, потому что агенты любят контрольные списки. Так что мы попросим его сжать наполовину и добавить контрольный список в инструкции в качестве последующего шага. Так что всегда относитесь к этим автоматически сгенерированным инструкциям как к черновику. Вы хотите убедиться, что они правильные, и продолжать работать над ними. Хорошо, это сделало редактирование. Теперь у нас есть контрольный список спереди. У нас есть архитектура, немного обозначенная, гораздо короче. Давайте поговорим о стилизации с помощью Tailwind и некоторых общих задачах, таких как добавление в вопрос ts. Это первый шаг. Я еще даже не смотрел код кодовой базы, и вам не обязательно, потому что агент просто задокументировал его для себя и для последующего использования. Так что мы можем фактически, одна рекомендация, которую я дал в руководстве, — это каждый раз, когда у нас есть рабочее состояние, давайте закоммитим, и мы можем автоматически сгенерировать коммит. Хорошо, кто уже создал инструкции? Да, ни одна из этих вещей не блокирует следующий шаг. Так что, если вы отстаете на одном шаге, хотите перейти к следующей задаче, мы можем просто сделать это. Так что давайте попробуем фоновый агент. Итак, в VS Code мы только что выпустили метод для фактического выполнения задач в фоновом режиме параллельно. Так что, пока это могло закончиться, я мог бы уже начать переходить к большому плюсовому меню здесь наверху и в выпадающем списке нажать "Фоновый агент", и эти фоновые агенты запускаются в изолированных рабочих деревьях Git. Так что все изменения, которые они делают, не будут конфликтовать с тем, что делал агент в основном агенте, но вы можете фактически импортировать их, когда они будут готовы, и объединить их обратно. Так что одна вещь, которая действительно важна для агентов и для людей, когда они работают с кодовой базой, — это наличие хороших правил линтинга. Но единственное, что мы добавим, мы добавим немного более строгие правила линтинга для таких вещей, как неиспользуемые переменные и пробуждения, потому что одна вещь, которую вы замечаете при использовании ИИ, заключается в том, что агенты хороши в добавлении новых функций, но очень плохи в уборке за собой. И просто проверка неиспользуемых переменных — это хороший намек для агента, что он, вероятно, добавил новые функции где-то или рефакторил что-то еще, но он мог забыть некоторый код, который все еще простаивает и фактически не используется. И что круто, потому что этот агент работает в VS Code, любые правила линтинга, которые вы, любые красные закорючки, которые вы получаете в VS Code, агент также автоматически видит, как только они добавляют средства. Итак, вы видите, что он создал изолированное рабочее дерево, и как это выглядит, не похоже, что мы редактируем это сейчас. Вы видите это здесь наверху. Итак, у нас есть рабочее дерево, лексическое whippbit, куда поступают изменения, где он запускает llinter, фактически должен npm install, потому что это новый checkout, у него еще нет зависимостей, а затем он может внести изменения, и нам на самом деле не нужно это наблюдать. Мы можем просто отложить это в сторону и продолжать работать. И это новая концепция в VS Code, что вы можете фактически просто открыть нового агента, а старые агенты будут продолжать работать в фоновом режиме. Это новое. Это то, о чем я должен был мысленно переключить свой собственный стиль работы, чтобы не просто смотреть на агента, делающего что-то. Так что теперь вы можете подумать, что еще я могу сделать? Могу ли я перейти к следующему этапу планирования? В данном случае я могу прокрутить вниз. Я мог бы также сделать README, он довольно скучный. Так что давайте фактически откроем облачный агент. новый облачный агент и отправим ему запрос, чтобы сделать README более привлекательным, что всегда хорошо для проекта. Мы хотим привлечь новых участников в проект, поскольку у нас есть этот новый опыт социального бинго. В данном случае облачный агент не будет работать в рабочем дереве, но фактически создаст PR в репозитории, и он появится здесь. Итак, теперь у нас есть этот фоновый агент, который вносит изменения, облачный агент начал вносить изменения, и у нас есть это завершено. Итак, у нас уже несколько агентов, которых мы вызвали в разных частях. Облачные агенты будут работать в PR, и мы увидим обновление здесь, как только он внесет изменения, и мы можем принять PR или вернуть его. Фоновый агент работал в рабочем дереве, и мы можем внести эти изменения с помощью простого keep и apply. И у нас есть ESLin config теперь обратно в нашей основной ветке. Так что это изменение, которое произошло в рабочем дереве. И теперь это изменение обратно в нашем рабочем дереве. Так что он все исправил. Давайте убедимся. Действительно ли он запустился? Он действительно запустил линтинг. Все прошло. Это хорошо. И вот как вы теперь можете гораздо лучше понять, что агент хорошо справился с созданием рабочего кода, а не чего-то, что выходит из строя из коробки, что запустило линтинг и сборку из шага. Хорошо, давайте закоммитим это. Это рабочий фоновый агент, который мы только что объединили. Мы можем архивировать это. Это сделано. Это сделано. И это сделано. Хорошо, облачный агент, мы можем проверить его позже. Нам не обязательно делать это сейчас. Хорошо, вернемся к руководству. Кто-нибудь, кто еще не дошел до шага пользовательских инструкций или прошел его, все еще в курсе? Итак, мы были как бы привыкли к тому, что все делается в Visual Studio, но когда вы работаете в фоновом агенте или облачном агенте, например, с такими вещами, как состояние Azure CLI, статус входа или некоторые секреты, с которыми вы работаете локально. Каковы лучшие практики в отношении этого? >> Это хороший вопрос. Кодирующий агент имеет доступ к секретам в ваших GitHub Actions. Так что он сможет запускать все, что вы запускаете в GitHub Actions. Кодирующий агент также может работать там. Локально — это то, как ваша локальная среда управляет этим. Хорошо, еще один, и тогда я продолжу. Я вижу, что вы называете этого агента через плюс, а затем выбираете агента, которого хотите вызвать. Возможно ли, что вы дадите задачу, и он автоматически выберет агента для вас? >> Да. Автоматически. Так что есть несколько способов их вызвать. Давайте пройдемся по следующему. Итак, я хочу выделить две вещи, которые вы можете проверить позже, чтобы лучше понять инструкции. У меня есть две инструкции, уже имеющиеся в проекте, которые являются специфичными для домена. Одна из них — инструкции по дизайну фронтенда. Мы фактически скопировали их из блока f, который сделали облачные специалисты, и это примерно то, как получить из облака создание фиолетовых градиентов — это основной эффект этой инструкции. Вы когда-нибудь видели веб-сайты VIP-кодинга? Обычно вы можете увидеть веб-сайт VIP-кодинга по тому, что он заполнен большими типами одного шрифта и фиолетовыми градиентами. Так что обычно это говорит ему: не используйте избитые общие шрифты, выберите хороший эстетический вид и избегайте избитых шрифтовых семейств. Не используйте клишированные цветовые темы, предсказуемые макеты. Так что он пытается подтолкнуть его за пределы его зоны комфорта с безопасными темами дизайна, которые он выбрал по умолчанию, и это действительно творит чудеса. Так что это отличная проблема, если вы работаете во фронтенде, но также подумайте, куда еще вы хотите подтолкнуть ИИ за пределы его настроек по умолчанию. Другой — Tailwind CSS3, и это большая проблема для меня, как только я перехожу к VIP-кодингу и использую последние стеки, заключается в том, что в агенте просто немного не хватает знаний об этих последних стеках. Так что он понимает Tailwind CSS3 по умолчанию. В любое время, когда я прошу его сделать Tailwind, он по умолчанию выберет то, что является большинством в его обучающих данных. Так что я фактически, есть запрос ниже, который вы можете проверить, это то, что я использовал для заполнения этой инструкции. Я дал ему инструмент веб-поиска, часть GitHub MCP, и попросил одностраничный документ о минимальных плюсах и компактном объяснении основных аспектов разработки Tailwind v4 для фронтенд-разработчика. Так что ему не нужно вдаваться в то, как его установить, почему это важно. Я просто хочу лучшие практики, которые я бы сказал фронтенд-разработчику, как моему агенту. И вот что я получаю, очень точно: вот примитивы привязки, которые новы в v4. Все, что находится за пределами слоя обучающих данных, накладывается сверху. Так что действительно отличная практика писать инструкции для частей вашей кодовой базы. И если вы хотите попробовать, просто уничтожьте файл и попробуйте с нуля. Итак, это инструкции Tailwind 4 и инструкции фронтенда. Итак, любой, у кого есть эта настройка, может теперь присоединиться к более веселым вещам. В противном случае вы также можете попробовать это дома в одиночку и иметь больше времени для экспериментов. Следующее — дизайн в первую очередь фронтенд-приглашение. Мы контекстно спроектировали репозиторий. Мы можем проявить творческий подход. Теперь мы будем использовать режим планирования. Кто использовал режим планирования в VS Code Copilot? Недостаточно людей. Так что вы можете открыть нового агента и перейти к плану в выпадающем списке агентов, и мы введем этот запрос. Давайте сделаем полный редизайн. И мы дали ему действительно хорошие инструкции по фронтенду, чтобы стать более креативным. Так что я ожидаю совершенства, и я дал вам несколько идей о том, каким может быть этот редизайн, и вот где вы можете выбрать свое собственное приключение. Я обычно выбирал " Vaporware wave in my sunset", что всегда выглядит потрясающе. Отличная атмосфера 70-х. Я сделаю "Уютную кофейню", потому что мы здесь. Так что давайте посмотрим, как это выглядит. Я определенно с нетерпением жду, чтобы увидеть, что вы придумаете. Не стесняйтесь выбирать свой собственный дизайн здесь. Скевоморфные наклейки, вероятно, то, что я бы попробовал, если бы у меня не было только одного варианта. Хорошо, давайте сделаем полный редизайн. Мы в режиме планирования. Итак, что происходит сейчас, это то, что агент по умолчанию будет гораздо глубже размышлять о том, как применить то, что вы просите, к кодовой базе. И прямо сейчас то, что я прошу, это очень широкий запрос. Так что у него есть много возможностей для исследования того, что это на самом деле означает, например, что означает редизайн в уютную кофейню с точки зрения дизайна. Так что он читает кучу файлов. Он выполняет всю эту работу, как вы можете видеть, в своем собственном маленьком контейнере каким-то образом. Так что все эти вещи находятся в разделе "Исследование текущего дизайна", и это то, что мы называем субагентом. Он изолирован в своем собственном контексте и просто возвращает результаты исследования. Он смотрит на тонну файлов. Он смотрит на несколько файлов и просто размышляет над этими файлами, чтобы дать ответ на исследовательский вопрос, который он получил, который в данном случае заключается в том, пожалуйста, составьте план. Да. У вас есть вопрос? Да, мы можем это сделать. Вот так. Это очень простой вопрос. Разница между режимом планирования и режимом агента. Если я делаю что-то в режиме агента, будут ли изменения автоматически вноситься в файл, над которым я работаю? А режим планирования все еще размышляет и не коммитит и не вносит изменения в файл. Это правильно? Или почему мы должны использовать режим планирования вместо режима агента? >> Да. Так что это, я не пропустил, я пропустил рассказать о режиме планирования немного больше. Так что большие части режима планирования с точки зрения доверия и уверенности заключаются в том, что режим планирования позволяет гораздо более легкий обзор, чем финальный код. Так что в любое время, когда у вас есть большие изменения в коде, даже если ваш запрос может быть более неоднозначным. Так что часто именно здесь все разваливается в разговорах агентов, потому что агент делает предположения о том, что вы просите. Так что режим планирования выводит эти предположения. Так что вы можете видеть сейчас в режиме планирования у нас есть то, что он хочет изменить. Он выбрал цветовую палитру, сделал еще кое-что, но затем спросил о типографике, потому что мы ее не определили. Так что он выводит все, что вы, возможно, не ответили конкретно в исходном запросе, и действительно выводит это таким образом, чтобы вы могли быстро ответить. Так что он уже дает вам некоторые значения по умолчанию и некоторые предложения в этих вопросах. Так что это одно, и гораздо проще итерировать по этому, чем когда у вас уже написан код, давать обратную связь по этому, это становится намного сложнее, потому что ему затем приходится итерировать по всему коду снова и потенциально пересматривать очень базовые предположения, которые он сделал при написании кода, и его также легче читать, когда у вас есть план, который выглядит действительно надежным и не имеет никаких больших нарушающих соображений, все еще открытых предположений, тогда у вас гораздо более высокая уверенность в том, что результирующий код соответствует всему, что вы только что сказали, по сравнению с широким подходом к созданию запросов, где вы итерируете через меньшие изменения. Хорошо, у нас это идет. Руководство говорит, что мы должны просмотреть это, и это здесь. Просмотреть план и начать реализацию. Давайте сделаем эту реализацию и начнем. У нас открыт браузер, так что мы можем следить за этим. Итак, уютная кофейня. Давайте посмотрим, как это выглядит. Есть предположения? Предположите, что это коричневые тона, уютная атмосфера. Давайте посмотрим, как это выглядит. Итак, несколько вещей, которые мы только что выпустили. Итак, одно из TODO отправляется уже давно, но было доработано с момента последнего перед этим, фактически теперь поместим их сюда, чтобы вы могли следить за тем, над чем работает агент. В данном случае нужно обновить индекс, поместить цветовую палитру, переделать стартовый экран с тепло-кремовыми и кофейными тонами. Идеально. И квадрат бинго получит цвет капучино, что определенно звучит как кофе. И вид resell будет полностью в теплых кофейных тонах. Это выглядит идеально. Когда это будет сделано, все еще думает. Итак, теперь вы видите больше этих блоков мышления, у нас теперь включено мышление для моделей clock и GPD5, так что большая часть работы, если вы использовали cop в прошлом, теперь будет происходить в этих блоках мышления. Да >> Извините, еще один вопрос по режиму планирования. Есть ли какой-нибудь способ, которым вы можете, по сути, сделать это списком задач, и он просто следует за ним, и, возможно, у вас есть определенные задачи, выполненные фоновыми агентами? Да. Да, вы можете это сделать. Мы попробуем это через мгновение. Да. >> Извините, слишком тихо. >> Приносим извинения. Прошу прощения. Я просто хотел спросить, нет ли способа просмотреть визуальное представление "до" и "после" того, как это будет выглядеть, прежде чем мы внесем изменения? >> Прежде чем вы внесете изменения. >> Я думаю, что здесь PR работают лучше. >> Типа, вы хотите увидеть, но да, у меня тоже был этот вопрос сегодня от кого-то, например, просто хочу переключать изменения. Это крутая функция, я думаю, потому что иногда вы просто хотите увидеть визуально. Но теперь я мог следить. Это выглядит так, это мой теплый кофейный цвет. Измените шрифт. Давайте посмотрим, как это выглядит, когда это будет завершено. Ах, уютный кофейный дом. Но да, в данном случае я мог бы, если бы я сделал это в рабочем дереве с фоновым агентом, я мог бы легче переключаться между ними. Так что это, я думаю, что фоновые агенты или использование облачных агентов также помогают. Да. Хорошо, мы внесли изменение в дизайн, и фактически у нас есть система дизайна. Мы выбрали этот смелый уютный кофейный дом, который действительно создает интересное, увлекательное бинго. Итак, что мы собираемся сделать, мы добавим руководство по дизайну, потому что у нас есть весь этот разговор. Этот разговор теперь заполнен дизайнерскими решениями, которые мы хотим отразить в любых последующих изменениях, иначе следующее редактирование, которое мы сделаем, вернется к нашему скучному стандартному дизайну Tailwind. Так что то, что мы просим, мы добавим раздел дизайна в инструкции Copilot. Мы можем сохранить предыдущие изменения. Уютная кофейня здесь, чтобы остаться, она нам нравится. И мы также можем, я думаю, я уже отправил, возможно. Так что мы получим обновленную страницу. Кофе. Я люблю сообщения коммитов. Это очень важно. Кофе пуш. Вот так. И теперь у нас есть обновленные инструкции. Хорошо, посмотрим, что на самом деле изменилось. Он задокументировал цветовую палитру, которая имеет цветовой акцент и коричневый акцент, которые там есть. Так что Copilot может лучше использовать цветовую палитру, которую мы определили, определили шрифт George или Sarif и о, эмодзи кофейной чашки для брендинга. Всегда хороший запасной вариант, иначе делайте, да, так что очень краткие правила дизайна. Так что все, что мы делаем сейчас, будет отражать этот дизайн. Да. Вопрос. >> С режимом планирования, есть ли у нас что-то вроде опросника, где мы можем настроить то, что хотим, вместо того, чтобы просто соглашаться с тем, что он нам дает, например, какой цветовой палитрой или каким шрифтом мы имеем выбор? >> Да. То, что он не сделал в моем режиме планирования, он фактически спросил меня, какую типографику вы бы выбрали и какие цвета. Так что я могу в любое время внести изменения, потому что он фактически указал, какие цвета он хочет использовать. Так что вы можете внести изменения и отправить их обратно в режим планирования. Это цветовые палитры. Я не хочу эмодзи. У меня есть настоящий логотип. Так что вы можете сохранить, это моя рекомендация для режима планирования. По крайней мере, итерировать хотя бы один раз. Мы переходим от плана непосредственно к реализации, потому что это мастер-класс, у нас нет времени. Но в противном случае я бы провел больше времени в режиме планирования, чем в чем-либо еще позже, потому что это приводит к >> было бы намного проще иметь опросник, где мы выбираем самые базовые критерии, или я думаю, что это помогло бы нам. >> Да. Да. Да, я думаю, мы определенно смотрим на то, что находится в этом разделе ниже, дальнейшие соображения, чтобы сделать его более похожим на то, хотите ли вы выбрать это или то. Сейчас он очень ориентирован на естественный язык. Так что я люблю просто переходить в режим диктовки и как бы читать спецификацию и говорить да, нет, о, может быть, мы можем сделать это, а затем просто отправить ее обратно. Так что использование таких входов, как диктовка, на самом деле делает это намного проще. >> Спасибо. Да. Хорошо, мы прошли больше половины. Давайте сделаем гораздо больший редизайн и используем мощь облака. Вот почему я говорил об изобилии в прошлом. Так что мы откроем новый чат, а затем попросим его переделать стартовый экран, потому что вы посмотрите на стартовый экран прямо сейчас. Продолжайте играть. Вернитесь сюда. Это не так. Да, логотип классный, но нам нужно больше. Итак, переделайте стартовый экран снова. Мы переходим в режим планирования. Вероятно, у него будет куча вопросов, потому что я не дал ему никаких деталей о том, что это должно делать. Но интересно, что с такими задачами иногда у меня нет хорошего представления. Есть много задач, над которыми мы работаем, где у нас есть общее направление, куда мы хотим идти, но есть много неоднозначности в том, куда мы на самом деле хотим идти и как мы туда доберемся. И режим планирования может помочь выявить некоторые из этих вещей, например, он сделает некоторые предположения, которые могут быть неправильными, например, цвета, он предположил, что означают цвета теплой кофейни. Он сделал некоторые хорошие предположения, но мы все еще можем направить его к определенной цветовой палитре, которую мы можем захотеть. В данном случае мы видим, что он читает инструкции по дизайну фронтенда, что хорошо. Так что, надеюсь, мы получим очень смелую эстетику и посмотрим на все остальные компоненты. А затем следующий запрос, который мы выполним, посмотрит на это, потому что он выполняет тяжелую работу, это облачный проводник. О нет, звучит весело. Я использую экспериментальное расширение TypeScript здесь. О, хорошо, все еще запускается план. Итак, облачный проводник использует GitHub MCP. Кто использовал MCP? Просто чтобы понять. Итак, MCP — это эти маленькие серверы протоколов, которые позволяют вам подключать вашего агента к различным серверам и инфраструктуре, а также к другим агентам. Так что это просто протокол связи. И вам даже не следует думать о MCP. Я просто установил GitHub в свой Copilot, и теперь он говорит на GitHub. В данном случае он говорит, он фактически может создавать новые pull requests и назначать их кодирующему агенту, что является действительно мощным способом просто сказать: вот задача, передайте ее в облако. Я не хочу думать об этом некоторое время, а затем вы вернетесь, когда сделаете это. Так что лучший шаблон, который, я думаю, мы отметили в течение дня, — это в конце дня выяснить, что вы хотите сделать в первую очередь на следующий день, и просто отправить все эти задачи в виде PR кодирующего агента, а затем на следующий день вы вернетесь, и у вас будут некоторые идеи и черновики, с чего начать свой день. Так что в данном случае у нас есть план. Он придумал многослойную атмосферу, геометрические кофейные узоры. Звучит здорово. Я понятия не имею, что это значит. Так что мы посмотрим на это. Более сильный призыв к действию. Хотите улучшить типографику? Я думаю, это звучит очень смело. Давайте сделаем это. Но что я хочу сделать, это использовать облачный проводник. Так что я буду использовать этот HQ, и облачный проводник посмотрит на план и определит три варианта для выполнения, а затем создаст PR для каждого из них. Итак, у нас есть план. И у нас много неоднозначности в плане. Например, что такое сложность изображения, подход к фону, но я хочу, чтобы он исследовал варианты дизайна и просто нажал Enter. Это переключится в режим агента, потому что это определено в запросе. Он теперь посмотрит на план и выяснит, что такое, какие это исследования. Давайте посмотрим, что он думает. Минималистичный, игривый и атмосферный, иммерсивный, в зависимости от того, что вы проектируете, что вы применяете, вы увидите разные варианты. Так что, и все, кто вернется с рабочим приложением в конце, получит значок. Три человека, три человека получат, никогда не должны обещать. Да. Хорошо. MCP вызывается. Это агент, который вызывается. Это выполнение задачи, выполнение кодирующего агента имеет проблему, бла-бла-бла-бла-бла, супер длинный текст, привет, мы доверяем ему, потому что это мой репозиторий. PR выполняются в песочницах, и я могу фактически, следующий запрос я могу разрешить для этой сессии. Хорошо. Другой способ, которым я мог бы это сделать, если бы у меня был тот же план. Давайте скопируем план, и я мог бы просто перейти в облачный агент с хорошим планом и отправить его в облачный агент, или я мог бы открыть этот чат, а затем нажать здесь, чтобы продолжить. Так что есть много точек входа для делегирования задач агентам в этих потоках. Иногда у вас уже есть план. Вы хотите потратить некоторое время на планирование локально в быстром итеративном режиме, а затем продолжение позволяет вам передать окончательный результат облачному агенту с большей уверенностью. Хорошо, здорово, что я теперь могу просто переключиться на нового агента, а остальное просто продолжается. Так что этот передает. И что мы получили здесь? Итак, у нас есть окончательное резюме. У нас есть три версии. Это минималистичный, игривый, атмосферный. По-видимому, атмосферный — самый сложный. С точки зрения производительности, у нас, вероятно, возникнут проблемы с узорами и слоями. Так что это действительно хороший способ заставить агента исследовать пространство проблем. В данном случае это дизайн. Я мог бы также дать ему разные реализации или способ работы призыва к действию, возможно, разные виды взломов роста для привлечения людей в игры бинго. Но есть все эти места, где мы, как инженеры или менеджеры по продукту, исследуем пространство с высокой неоднозначностью, где передача задач агенту и просто предоставление нам разметки или рабочего архитектурного диаграммы может действительно помочь нам исследовать быстрее. Это сделало одно, два, мы сделали только одно на этот раз. Давайте пойдем. У нас есть одно. Хорошо. Итак, это сейчас выполняется. Вы также можете нажать на него и увидеть, как оно выполняется. Так что, и вы можете сделать то же самое здесь. Вы можете фильтровать.cloud. Вот почему вы можете фильтровать здесь. Что вы на самом деле хотите видеть. Итак, это теперь облачный агент работает, и я могу следить за этим в VS Code. Я также могу открыть в браузере. Так что он все еще планирует, что он делает. Так что это займет некоторое время. Так что облачный агент обычно занимает несколько минут до получаса, даже дольше, в зависимости от задачи, потому что это действительно долгая траектория сложной задачи. Так что это действительно хорошая идея для вас выяснить, на что он хорош, чтобы вы могли передавать эти элементы из VS Code и работать над тем, что вы действительно хотите контролировать больше или продолжать итерации вручную. Хорошо, это был редизайн. Я просмотрю их позже, потому что это займет время. Хорошо, давайте попробуем пользовательский агент, чтобы фактически сделать лучшие викторины, потому что сейчас у нас довольно скучно, например, "люблю острую еду" — это круто и готовить, но это как бы слишком просто. Так что мы могли бы придумать проблему, например, придумать супер креативные викторины и сделать, что такое хорошая викторина, каковы правила викторин, которые делают игру бинго интересной? И фактически у меня есть пользовательский агент, мастер викторин, который имеет именно такой ход мыслей. Так что его единственная цель — курировать вопросы для бинго-ледоколов, учитывая тему. Если нет темы, спросите о теме. И тогда есть хороший микс. Я написал все это с помощью ИИ. Спасибо. [смех] Но, например, какие хорошие вопросы для ледоколов? Он сбалансирован: легкий, средний, смелее, чтобы действительно поощрить общение с разными приоритетами. Убедитесь, что они инклюзивны. Убедитесь, что они интересные разговоры, а не скучные, вроде: "О, ты тоже любишь готовить? Это здорово." Итак, давайте попробуем это. Так что пользовательские агенты, этот находится в репозитории. Он находится в GitHub/agents/quizmaster. Мы собираемся запустить это прямо сейчас в режиме агента. Так что мы можем выбрать его из выпадающего списка "Пользовательский" и спросить, какую тему мы должны использовать? Чай или кофе, чай. Я думаю, давайте сделаем О, подождите, у меня на самом деле есть несколько ледоколов здесь. Так что нам нужно прокрутить вниз. Вам не нужно слишком много думать. Так что, бинго путешествий звучит весело. Креативное бинго. Я делаю креативное бинго. Создать тему. И я потерял своего агента. Это в странном состоянии. Я быстро обновлю. Вот так. Новый агент. Новый агент и мастер викторин и креативная тема. Давайте скопируем все это. Так что мастер викторин фактически будет агентом, который обрабатывает запрос. Так что все сразу — это тема, и он уйдет и сделает мне новые вопросы. Так что подумайте о том, какие еще задачи вы выполняете в своей повседневной жизни, где вы просто хотите передать: вот повторяющаяся задача. Я просто дам вам дополнительный контекст, а затем повторяющаяся задача может быть решена пользовательским агентом, и именно так мы делаем это локально. Так что он уже пошел. Вопрос будет "Любимая ошибка дизайна". Вау, это здорово. Он использует креативное программное обеспечение. Это креативно. Посетил концерт. Люблю это. Цветовая палитра имеет цветовую палитру, которую можно полюбить. Кто любит цветовую палитру? Кто-нибудь? Моя новая любимая цветовая палитра — "Уютная кофейня". Да. [фыркает] Креативные флоппи. Да. Хорошо, давайте. Мы сделали это локально. VS Code имеет поддержку пользовательских агентов. Раньше это называлось режимами чата, но мы можем фактически делать это и в фоновом режиме. Так что я могу фактически открыть фоновый агент, и он поддерживает тот же мастер викторин, агент, и даже облачный агент имеет тот же мастер викторин, агент. Так что эти агенты доступны в облаке, в фоновом режиме, в режиме переднего плана. Так что я не хочу особо беспокоиться о том, что мой мастер викторин обновляется. Так что я могу также отправить его в облако. Это теперь облачный. Может быть, я сделаю еще один, потому что я не был уверен, например, креативные вещи, но также, например, о, может быть, бинго для глубоких разговоров, давайте или офисный юмор, да, это тема офисного бинго, так что давайте также отправим его в облако, и это будет обработано в PR снова, и я смогу посмотреть вопросы позже. В данном случае он фактически спросит, потому что у нас есть несколько ожидающих изменений, он спросит, следует ли включать изменения или нет. В данном случае они мне не нужны, потому что это мои предыдущие вопросы, которые я уже сделал. Так что давайте также отправим наши вопросы. Итак, у нас были ожидающие вопросы. Вопросы обновлены. Я выяснил, что это креативная тема. Успех. Хорошо. Осталось 10 минут. Кто обновил свои вопросы? Кто-нибудь дошел до этого? Круто. Вот так. Следующее: есть ли вопрос? Да. >> У меня был вопрос, который был, вы знаете, мы видели пользовательские запросы, и мы видели файлы инструкций, и теперь мы видели этого агента, которого вы построили. Как вы решаете, какой из них вы будете использовать для разных задач, которые у вас есть? >> Да. Ранее сегодня была диаграмма, которую я могу рекомендовать от меня. Но общее правило таково: я обычно начинаю с запросов, чтобы получить базовое представление о рабочем процессе. Если это как бы одноразовая проблема, где мы просто просим агента что-то сделать. Так что это мог быть запрос. По сути, новый ответ на все, например, это могло быть электронное письмо, это могло быть проблема. Но затем, когда это становится более сложным и многоразовым, и вы работаете с агентом, или агент должен приостановиться, что этот делает сейчас. Я дал ему, если нет темы, предложите пользователю несколько тем. Если вы посмотрите на пользовательский агент, это делает его многоразовым, и это делает его, он должен рассуждать в течение более длительного времени и оставаться сосредоточенным. И вот где вам нужен пользовательский агент. А затем инструкции действительно больше о том, как каждый агент должен работать в кодовой базе. Будь то агент для обзора кода, агент для написания кода, агент для планирования. Все эти виды знаний и контекстных фрагментов, это были бы инструкции. Но да, это развивающаяся область. Я думаю, что она постоянно меняется. >> Я также хотел бы спросить здесь, вы показываете пользовательского агента, а затем перед этим вы показывали фонового агента. Они разные, или вы просто определили своего пользовательского агента для предыдущего, например, фонового агента, который вы только что продемонстрировали? >> Да, это хороший вопрос. Наша терминология там сильна. У нас есть облачные и фоновые агенты, которые просто определяют, где эти агенты запускаются. Так что облачный агент будет работать в GitHub Action и создавать свою работу в PR. Фоновый агент будет работать в рабочем дереве. Так что он менее изолирован, в некотором смысле, потому что рабочее дерево все еще потенциально может конфликтовать с другими вещами, которые вы запускаете на своей машине. Но они все еще работают локально и с более быстрой обратной связью. Но пользовательские агенты — это действительно просто файл, который вы видели. Это просто запрос, набор инструментов, который определяет очень специфический рабочий процесс, который может использоваться всеми агентами. Так что вы, по сути, надеваете разные шляпы, которые каждый из этих агентов может надеть, чтобы применить более специфическое мышление, чем "я могу видеть вашу кодовую базу, и вы можете спросить меня о чем угодно". Правильно. Похоже, мы должны быть близки к завершению. Вопрос. >> Могут ли пользовательские агенты запускаться облачными агентами? >> Облачными. Да. Да. Те же агенты, которые у меня здесь, также появятся на GitHub. Так что, если я зайду в свой репозиторий, агенты, я должен зайти в свой репозиторий, показать его. Я не знаю, как получить свой репозиторий сюда. Вернемся. Хорошо, вот оно. В моем репозитории "Мое потрясающее бинго", который является шаблонным, и я могу перейти сюда в панель агентов, и здесь я также могу выбрать своего агента. Так что мастер викторин определен в репозитории, кодирующий агент, который находится в github.com, также его подберет. Так что я также могу обновить свои темы здесь. Да, вопросы. Так что еще один PR, и мастер викторин обработает его. Хорошо. У нас осталось еще несколько минут. Скорее пять, и тогда мы увидим, что Джеймс сделал в студии с этим шаблоном. Я очень взволнован. У него, вероятно, сейчас очень хорошее настроение. Так что его его его бинго.
будет потрясающим. Хорошо. Режим "Охота за сокровищами". Давайте сделаем, это займет больше времени. Так что многоагентная, многобинговая секция, возможно, вы захотите принести это к своему столу, сделать это дома на выходных. Это будет разбито на поток разработки, управляемой тестами, что означает, что вы переходите от провальных тестов к проходящим тестам, а затем к фактической реализации, но мы хотим попробовать что-то более визуальное в конце. Мы собираемся сделать перемешивание колоды карт. Итак, откройте EU-агента. Давайте освободим место. И мы собираемся сделать новый режим, новый игровой режим, где мы хотим увидеть перемешивание колоды карт. Так что просто покажите одного ледокола, и вы должны найти человека, который соответствует, не множества. И мы собираемся выбрать пиксельную джем. Это еще один агент. И этот на самом деле больше ориентирован на итерации. Так что этот нацелен только на VS Code. Так что к вашему вопросу, типа, где все это появляется? Я могу фактически сказать, что этот должен быть только для VS Code. Pixam спрашивает, что мы должны спроектировать сегодня, и он быстро и итеративно проектирует интерфейсы в коде, тем временем, пока он итеративно проектирует, применяет дизайн, он фактически ведет записи отзывов и решений, которые я принимаю по пути, так что когда я закончу проектирование, я не просто получу дизайн, закодированный в VC, но и документ, который затем может направлять, как мы фактически хотим реализовать дизайн, который менее закодирован в VC, так что принесите на встречу, типа, вот дизайн, который я сделал, вот решения, которые мы приняли по пути. Итак, давайте посмотрим, как это выглядит. Собираюсь сделать сплошной, а затем просто запустить его. Тем временем буду смотреть на вывод. Перемещу это сюда, чтобы мы могли это видеть. А затем пиксельная джем просто немного проходит по этому. Так что другая вещь, к которой есть доступ, так что он будет сосредоточен только на UI. И это типичная проблема, с которой вы сталкиваетесь с ИИ. Например, даже в разработке программного обеспечения в целом, какой самый критический аспект вашего плана? В данном случае, это как будто я понятия не имею, как должна выглядеть колода карт. У меня есть некоторые идеи. Вероятно, там будет свайпинг, и это должно выглядеть как карта. Но в остальном, может быть много предположений только в этом одном предложении. Так что я хочу извлечь все предположения из этого начального шага, пока я не перейду к фактической полной реализации. И вот что, что эти помогают. Так что я также мог бы сделать один для архитектурного дизайна, типа, помоги мне придумать три разных способа реализовать это на бэкенде и подумать больше обо всех других решениях, которые мне нужно принять при реализации этого. Хорошо, получите дизайны обратно, и мы скоро должны увидеть некоторые визуальные изменения. Что также интересно с этим агентом, я хочу дать ему глаза, чтобы он фактически смотрел на дизайн. У нас уже есть простой браузер, встроенный в VS Code. Так что у него уже есть некоторые "глаза" на то, что он должен делать. И доступ к логам, если что-то не так. Вот оно. Cartic только что появился на экране рисования. И это то, как я предвзято отношусь к этому пиксельному джему. Предполагается, что он сначала построит точки входа, чтобы я мог следить за тем, как он строит вещи. Так кто пользовался playright раньше? Кто говорит playright? Да. Так что команда, есть несколько человек из команды, также здесь, не только хорошие, вы встречаете их, говоря спасибо. Это потрясающий инструмент. По сути, он может автоматизировать ваш браузер. Так что, если вы думаете об агентах и использовании браузера, это инструмент, который вы хотите использовать для этого. Он может открыть веб-сайт в данном случае это безголовый браузер, и он будет смотреть на веб-сайт, находить, что можно нажать. Это действительно хороший функциональный способ объединить все. >> Две минуты. >> Две минуты. Мы будем следить за другими вещами. Итак, давайте посмотрим на несколько вещей, которые вы все еще можете сделать >> с большим временем. Так что все документировано в руководстве. в репозитории. Если у вас не получилось, попробуйте. Если у вас не получилось запустить репозиторий локально, другой способ, который я рекомендую, — это использовать dev container или WSL на Windows. Это может дать вам больше удачи. И тогда, что мы сделали, это фронтенд-инструкции, мы сделали "сделай это своим". Мы прошли большую часть этого. Самое захватывающее занимает на самом деле больше времени. Это UX-видеоагент. И я очень рекомендую попробовать его позже. Так что посмотрите, как это выглядит, типа, мы просто получаем, получаем колоду карт. Мы получили колоду карт. Прекрасно. Хорошо. Просмотрите вопрос, который должен пойти к творческим часам, дизайнер, художественные уроки. Идеально. Хорошо. Это мое приложение. Мы собираемся запустить его прямо сейчас. Мы можем играть во время счастливого часа. Надеюсь, я смогу сыграть и в вашу игру, и вы закончили. Иначе следуйте руководству в свое время. Задавайте любые вопросы, которые у вас есть. Вы можете подавать проблемы в репозиторий. Это теперь Playright фактически играет в игру. Вы можете следить за этим здесь, пока Playright пытается быть социальным. Но в остальном здесь также есть финальные титры. Так что спасибо от меня. Спасибо от команды VS Code и несколько ссылок, где вы можете посмотреть наш другой контент.