Transcription
Режим агента в VS Code быстро развивался, и появилось множество новых функций, таких как Copilot Vision, Bring Your Own Key, интеграция MCP и многое другое. В сегодняшнем видео я покажу вам, как режим агента может быть использован в вашем собственном пользовательском режиме со всеми этими функциями при создании приложения для бюджетирования, которое не только поможет вам отслеживать ваши финансы, но и повысит ваши финансовые знания. Итак, давайте приступим и посмотрим.
Сейчас это видео посвящено режиму агента. И чтобы получить к нему доступ, вы можете нажать на значок чата прямо здесь. И вы заметите здесь, в чате. По умолчанию он находится в режиме запроса, который используется для того, чтобы мы могли задать ему любой вопрос. И чат ответит. А затем есть режим редактирования, в котором чат выполняет несколько задач, которые вы ему поручаете, но вам нужно принять и просмотреть их через подсказки. А затем есть режим агента, который делает все последовательно автономно. И планирование позволяет нам планировать наши функции, и мы увидим это в действии позже. Для получения более подробной информации об этих функциях вы можете ознакомиться с документацией VS Code прямо здесь.
Теперь здесь вы увидите, что есть опция, где вы можете выбирать различные модели. Сейчас она установлена на GPT5, но есть несколько других, из которых мы можем выбрать. И есть также микрофон, который вы увидите, если у вас установлено расширение VS Code Speech. А затем здесь есть кнопка отправки. Также вы можете добавлять вложения, такие как код или даже визуальные изображения, используя функцию под названием Copilot Vision.
Итак, почему бы нам не использовать комбинацию этих функций, таких как Copilot Vision и режим запроса, прямо сейчас, чтобы начать. В последнее время я думал о финансах и о том, как лучше управлять своим бюджетом. Поэтому я подумал, что хорошим упражнением будет создать приложение для бюджетирования. Поэтому я попрошу Copilot взглянуть на то, как выглядит эта электронная таблица, потому что именно ее я использовал в прошлом, и я хотел бы, чтобы мое приложение было вдохновлено ею. Поэтому я сделаю снимок экрана этого сводного отчета здесь, а также этого листа транзакций. В листе транзакций указаны мои расходы и доходы с вымышленными цифрами, так что не судите меня. А в сводном отчете показано, сколько я потратил и сколько могу сэкономить. Но давайте спросим Copilot, что он видит на этом изображении. Что вы видите на этих двух изображениях? И посмотрите. Он дает подробный сводный отчет о том, как он интерпретирует то, что видит на изображениях. А теперь я просто попрошу его написать мне подсказку, чтобы я мог создать приложение для бюджетирования, потому что я думаю, что он, вероятно, сможет написать подсказку лучше, чем я. Так что позвольте мне сделать это. И это было бы полезно сделать в режиме запроса. Можете ли вы написать мне подсказку, которую я могу использовать для создания простого приложения для бюджетирования, вдохновленного изображениями, которые вы видели, которое позволит мне вводить мои доходы и расходы, а затем даст мне сводку о том, сколько денег я могу в итоге сэкономить, и диаграмму. И посмотрите. В течение нескольких секунд он написал эту подробную подсказку здесь, которую я скопирую и вставлю. А теперь мы переключимся в режим редактирования, чтобы увидеть, что получится после ее выполнения.
Хорошо. Итак, я перешел в пустую папку для приложения бюджета, прежде чем мы попытаемся выполнить нашу подсказку. И я также переключился в режим редактирования. Позвольте мне вставить нашу подсказку. В самом начале подсказки я хочу убедиться, что я указал, что это чистое, современное, адаптивное приложение. И я больше ничего не буду менять. И давайте посмотрим, как это работает. Хорошо, давайте сохраним проделанную работу. А теперь я попрошу его запустить это приложение. И обратите внимание, что я переключился в режим агента. Теперь, для крупных действий, которые ему нужно предпринять, таких как установка некоторых зависимостей, он будет запрашивать у меня разрешение, что нормально, но по крайней мере он знает шаги, которые ему нужно предпринять для установки зависимостей. Теперь, что еще прекрасно в режиме агента, так это то, что если задача занимает слишком много времени, он может обнаружить это и спросить вас, хотите ли вы продолжать ждать, как он только что сделал. Но если задача возобновляется с того места, где ей нужно было продолжить, режим агента поймет это, как он только что сделал сейчас, и скажет: хорошо, вы хотите выполнить эту команду прямо сейчас? И я скажу: разрешить. И теперь он сообщил мне, что приложение запущено на этом порту. Так что, если мы перейдем сюда и откроем этот порт, давайте посмотрим, как это выглядит.
Теперь, поскольку я ничего не вижу, я скажу режиму агента, что я ничего не вижу. Пустой экран. И на самом деле, я могу дать ему снимок экрана моей проблемы и перетащить его сюда, как мы делали раньше. И вот мы подходим к теме отладки. насколько легко отлаживать с помощью режима агента в сочетании с Copilot Vision. Сбор проектов для диагностики причины пустого экрана. Внедрение необходимых обновлений. И это довольно круто здесь, как вместо того, чтобы занимать все пространство чата объяснениями происходящего, он объяснил это и свернул. Но я могу вернуться и просто увидеть, что именно он делает за кулисами. А затем снова свернуть это. Хорошо. Я настроил экран так, чтобы мы могли видеть обе стороны. Теперь он дает мне возможность запускать и собирать. Хорошо. И после принятия нескольких изменений, которые он предоставил, у нас теперь есть визуальное представление нашего приложения для бюджетирования.
Хорошо. Давайте поиграем с приложением, которое он построил для нас. Итак, я вижу, что у меня есть начальный баланс, затем получен дополнительный доход минус некоторые расходы, и это будет конечный баланс, и это кажется правильным. Итак, давайте скажем, я хочу нажать на "добавить" здесь. Хорошо, кнопка "добавить", кажется, ничего не делает. Я вижу, что я могу изменить это, и это сразу же обновляет числа. Я верну это к 500. Но на самом деле, похоже, я могу Да, я вижу. Давайте введем описание. Мы ввели "кабель". Теперь мы введем "автомобильный транспорт". И я введу 500. Теперь, можем ли мы добавить? Да, мы можем это добавить. Хотя, возможно, мне следовало назвать это Uber, как будто это была подработка. Если я введу расход "кабель", "коммунальные услуги", 100 и "добавить", вот так. Довольно круто. Так что это кажется довольно круто. И есть некоторые изменения, которые мы, вероятно, могли бы добавить, например, сделать это редактируемым, чтобы я мог удалять строки, которые мне не нужны. И, возможно, добавить какой-нибудь графический график, показывающий расходы по сравнению с доходами. Пока что давайте предположим, что мы довольны тем, как работает приложение, но мы хотим убедиться, что код понятен, и хотим добавить к нему документацию. Давайте посмотрим на это дальше.
Итак, если бы мы посмотрели на наш код здесь, в app.tsx, мы могли бы увидеть, что код выглядит приятно и организованно, но комментариев не так много. Поэтому я могу перейти в чат и просто сказать: "Эй, можешь ли ты документировать все комментарии?". И используя хэштег, я могу затем указать контекст, который мне нужен, и выбрать app.tsx. Также обратите внимание, что здесь есть кнопка для добавления контекста. И здесь мы можем добавлять файлы, изображения или просто перетаскивать их. Поэтому, когда я нажимаю кнопку отправки, она сразу же приступает к работе. И вот, вы можете видеть, что он добавил некоторые подробные комментарии, начиная с самого начала и по всему коду, что здорово, потому что если вы работаете с младшим разработчиком или даже с старшим разработчиком, который был в отпуске и давно не видел код, дополнительные комментарии, подобные этим, очень помогают.
Теперь в чате есть понятие участников, которое распространяется на чат как на эксперта в предметной области. Поэтому, если у меня есть вопросы о VS Code, я могу использовать участника @VS Code, который обладает знаниями о VS Code и его API расширений. Аналогично, если у меня есть вопросы о моем проекте, я использую участника @workspace, потому что он может отвечать на вопросы о моем проекте. Ответ будет более конкретным для моей местной ситуации, а не общим. Например, мы можем попросить его в нашем рабочем пространстве объяснить, как работает код в нашем активном редакторе. Поэтому, в дополнение к комментариям, которые у нас есть, мы можем перейти сюда и получить сводки различных разделов кода. Например, в наших комментариях есть небольшое описание того, что делает функция добавления транзакции, но здесь гораздо более подробная информация о функции добавления транзакции.
Хотя я ценю то, как он объяснил работу моего кода в очень прямолинейной манере, я хочу упомянуть, что я могу попросить его иметь немного больше индивидуальности, сказав ему объяснить это с юмором и эмодзи. И это просто пример того, как вы можете настраивать ответы. И посмотрите. Хотя он и включил эмодзи в код, что не совсем то, что я имел в виду. Я имел в виду объяснить с юмором и эмодзи в вашем объяснении, а не в самом коде. Так что отмените это. И вот, я хотел бы теперь обратить ваше внимание на концепцию пользовательских агентов. Пользовательские агенты позволяют вам контролировать поведение агента. И на самом деле, они стали настолько популярны, что у нас даже есть место на GitHub, где вы можете найти множество других пользовательских агентов, созданных другими. И если вы хотите создать один, вы можете нажать на выпадающее меню, где у нас есть опция для агента, запроса и редактирования. И вы увидите опцию для настройки пользовательских агентов. И на самом деле, есть агент, который был настроен, который называется "план" по умолчанию. И вы можете увидеть, как он был настроен, перейдя в "настроить пользовательских агентов", а затем просто нажав на "план". И вы можете увидеть его структуру, где вы просто находите имя, описание, инструменты, к которым у него есть доступ, передачи и затем подробные инструкции о том, как должен вести себя этот планирующий агент.
Итак, вы можете создать свой собственный, просто зайдя в "настроить пользовательских агентов", выбрав "создать нового пользовательского агента", и в этот момент я могу выбрать "данные пользователя", дать ему имя, и скажем, это было для исследовательских целей, и в этот момент я могу дать ему инструменты, которые я хотел бы использовать, а затем определить описание того, как он должен себя вести, и когда я сохраню моего исследовательского агента. И вы можете видеть, что он появляется прямо здесь. Но давайте удалим это. И то, что я хочу использовать, это тот, который был по умолчанию, а именно планирующий агент. И мы сделаем это, чтобы добавить функцию в наше приложение. Поэтому я выберу его. А затем я попрошу его создать функцию, которая добавляет кнопку "совет дня", которая даст мне некоторую финансовую информацию, чтобы помочь мне стать более осведомленным в области бюджетирования, инвестирования и общих финансов, и добавить ее в интерфейс. И я отправлю это, и он приступит к работе.
Итак, что здесь здорово, так это то, что он создаст подробный план и не будет трогать мой код, потому что мы находимся на этапе планирования. И там я могу видеть все шаги, которые он создал. И в этот момент у меня есть возможность начать реализацию, или я могу открыть его в редакторе. И что это сделает, так это сгенерирует файл подсказки с деталями плана. И вот он. И я могу выбрать, сохранить ли это. И если я захочу, я могу зайти и изменить его и доработать по своему вкусу. Но сейчас он выглядит нормально. Поэтому я не буду вносить никаких изменений. И если я перейду в верхнюю часть, я увижу, что у меня есть возможность либо запустить эту подсказку в новом чате, либо запустить подсказку в текущем чате. Если я решу не делать этого сейчас, я всегда могу перейти к своим сессиям агентов, которые находятся прямо здесь, где я могу видеть все различные сессии агентов, к которым у меня есть доступ. Как вы можете видеть, есть история их. Но пока я закрою это.
Итак, скажем, я готов запустить это, и я запущу это в текущем чате. Итак, давайте перейдем к верхней части и выберем эту опцию "запустить подсказку в текущем чате". И теперь он приступит к реализации функции "совет дня", которую я просил. Я сохраню изменения, которые он вносит, и позволю ему собрать. И он предоставит мне сводку проделанной работы по добавлению этой функции. Теперь я закрою свой файл подсказки и в терминале запущу свое приложение, чтобы увидеть результаты. Давайте посмотрим.
И вот оно. В самом верху: "Сегодняшний совет: постройте финансовую грамотность, один маленький концепт за раз. Нажмите кнопку, чтобы раскрыть сегодняшний подобранный обучающий материал. Используйте сберегательный счет с высокой процентной ставкой, свободные средства для краткосрочных целей должны приносить конкурентные проценты вместо того, чтобы лежать на расчетном счете с 0%." Хорошо, неплохо. Давайте нажмем еще один совет. Мы можем узнать, что такое бюджетирование с нулевой базой. А затем есть шаг к действию. Довольно круто. Так что теперь у вас не только приложение для бюджета, но и возможность учиться одновременно.
Итак, давайте поговорим об управлении исходным кодом. У меня сейчас весь этот код локально, но скажем, я хотел бы загрузить его весь на GitHub. Ну, первое, что я хочу сделать, это просто убедиться, что я вошел в свою учетную запись GitHub, что вы можете проверить по значку учетной записи прямо здесь. А затем просто нажмите на значок управления исходным кодом здесь, слева. И чтобы начать, мы можем просто инициализировать наш репозиторий. Теперь мы видим все наши файлы, которые в настоящее время отслеживаются. Но чтобы добавить их все, все, что мне нужно сделать, это перейти сюда и нажать на значок плюса над всеми файлами. И теперь буква А указывает, что они были добавлены. Теперь, в этот момент, я готов зафиксировать. Но что действительно приятно, так это то, что если вы посмотрите на значок справа, у нас есть возможность автоматически генерировать сообщение коммита с помощью ИИ. Как только я нажму на него, давайте посмотрим, что он для меня составит. И мы получаем это приятное подробное объяснение, которое довольно круто. И я нажму "зафиксировать". Как только я закончу фиксацию, я могу перейти сюда и опубликовать. И я хочу, чтобы мой репозиторий был общедоступным. И в правом нижнем углу у меня есть возможность просто открыть его на GitHub прямо здесь. И вот он с некоторой документацией, описанием нашего технологического стека и шагами для начала работы.
Хотя я ценю, что мы можем предпринять некоторые из этих шагов в управлении исходным кодом в VS Code, нам не всегда приходится делать все вручную, и мы можем использовать MCP, что означает Mono Context Protocol, который, по сути, позволяет нам иметь доступ к внешним инструментам для нашего агента. И если мы нажмем на этот значок здесь, мы можем увидеть некоторые инструменты, которые установлены по умолчанию, но любые дополнительные серверы MCP, которые мы добавим, также будут отображаться здесь. И чтобы добавить один, все, что нам нужно сделать, это перейти на наш маркетплейс и набрать @MCP. И в нашем случае мы захотим установить GitHub MCP Server, официальный, который отображается прямо здесь. И я могу установить. Как только я его установлю, если я теперь перейду к нашему списку инструментов, мы увидим, что он отображается прямо здесь. И когда мы нажмем на выпадающее меню, мы увидим некоторые функции, которые он нам предоставляет.
Итак, почему бы нам не протестировать его, попросив чат дать мне три новые идеи для функций для этого проекта и открыть для них задачи? И в идеале, он мог бы дать мне три идеи и использовать серверы GitHub MCP для создания задачи. Итак, вот мои три идеи. И прямо под ними мы можем видеть, где он будет использовать сервер GitHub MCP. И я дам ему разрешение. Вместо того, чтобы говорить "разрешить" каждый раз, я скажу "всегда разрешать". И это здорово. Похоже, он создал мои задачи здесь. Но я также хотел бы показать вам, что у меня есть расширение от GitHub, которое позволит нам видеть различные вещи, такие как запросы на вытягивание и задачи. И прямо здесь, в разделе "недавние задачи", мы также можем увидеть это здесь. Когда я нажимаю на него, у меня есть приятный вид содержимого в задачах для каждой из них. И, кроме того, просто щелкнув правой кнопкой мыши, я могу назначить их нашему агенту кодирования. В правом нижнем углу написано, что задача один была назначена Copilot. Итак, теперь, если мы нажмем "обновить", мы увидим назначенных. Copilot указан. И я могу сделать то же самое для двух других задач. И, конечно, если мы зайдем сюда на GitHub, мы увидим ту же информацию. И, кроме того, если мы перейдем к нашим сессиям агентов, в разделе GitHub Copilot Cloud Agent, вы можете увидеть новые задачи, которые были назначены, и просто нажать на любую из них, чтобы запустить их.
Прежде чем я закончу, есть две классные функции, которые я хочу вам показать, о которых многие не знают. Во-первых, в этом видео я использовал внешние браузеры для отображения приложения вот так, но я хочу сообщить вам, что вы можете использовать его внутри VS Code, если захотите. Поэтому в следующий раз, когда вы будете запускать приложение, если мы перейдем в палитру команд и наберем "простой браузер", вы сможете ввести URL прямо здесь. И затем просто внутри VS Code вы сможете перемещаться по приложению. И это дает мне некоторую гибкость, например, если я захочу поэкспериментировать с некоторыми элементами здесь. Я могу нажать "начать", и это позволит мне выделить различные части элементов приложения, например, возможно, здесь. И как только я нажму на него, это позволит мне получить некоторую информацию DOM, которая сейчас прикреплена к чату, в дополнение к снимку экрана.
И другая функция, которую я хочу вам показать, заключается в том, что когда мы выбираем наши модели, вы видите, что у нас есть большой список различных моделей, но, возможно, мы не хотим видеть их все. У нас есть опция ниже для управления нашими моделями, и это включает их видимость. Например, в настоящее время мы видим, что у нас есть GPC 41 и 40 в этом списке. Если я захочу просто наведя курсор сюда и дважды щелкнув на значке глаза здесь, я скрою это из выбора модели чата. И вы можете видеть, что они слегка затенены. Поэтому теперь, когда мы вернемся, их больше нет в списке. Другая опция, которую мы имеем здесь, это добавить наши собственные модели отсюда, используя "принеси свой собственный ключ". И здесь есть некоторые по умолчанию, которые можно добавить. И, конечно, у вас есть возможность просто искать, если вы хотите просто отфильтровать его, что все довольно удобно.
Спасибо, что провели время со мной в этом видео. Если вы получили от него пользу, обязательно нажмите кнопку "лайк" и подпишитесь на больше таких подробных обзоров. И если вы хотите продолжать учиться, обязательно посмотрите это видео прямо здесь.