Transcription
Всем привет. Э, мы представимся. Меня зовут Мадлен, и я старший разработчик-адвокат в Microsoft и GitHub. >> И я тоже, меня зовут Лиам Хэмптон, и я также работаю в Microsoft и GitHub в команде адвокатов по инструментам разработчика для Visual Studio Code и GitHub Copilot. >> Да. Я занимаюсь похожими вещами, но, вероятно, Лиам больше занимается стороной VS Code. Итак, чтобы начать, краткое содержание того, что мы собираемся осветить сегодня в этой сессии. Мы поговорим о том, что такое MCP, а затем поговорим о том, почему нам нужны MCP-приложения и что это такое. А затем Лиам проведет несколько живых демонстраций того, как использовать MCP-приложения, как их создавать и использовать в VS Code. Итак, чтобы начать, может быть, я задам вопрос: сколько из нас знают, что такое MCP. Хорошо, это хорошее, это хорошее количество людей в зале. Хорошо, отлично. Это означает, что мы в курсе. Я сделаю краткое резюме, чтобы рассказать о том, что это такое, но MCP, конечно же, является открытым протоколом, который стандартизирует, как приложения предоставляют контекст LLM. Так что он был создан Anthropic. Э, он открыт. Э, это открытый протокол, так что, к счастью, сообщество может его использовать, и он позволяет нам получать доступ к контексту или LLM для доступа к контексту, такому как инструменты, подсказки или ресурсы, различными способами. Итак, чтобы получить общий обзор того, какие части MCP мы будем рассматривать с инструментами MCP. Первое, что у нас есть, это MCP-хосты. И хосты, вероятно, являются программами, такими как VS Code, которые хотят получить доступ к данным с ваших MCP-серверов. Итак, у вас могут быть разные типы хостов, и они также будут поставляться с разными клиентами. Итак, второе, что у нас есть, это клиенты, и иногда они будут совпадать с хостом, но не всегда. И они будут поддерживать соединение один к одному с серверами. Итак, в нашем случае в VS Code мы обычно рекомендуем людям использовать клиент GitHub Copilot. И это то, что мы будем рассматривать сегодня. И затем последнее, что будет, это серверы. И с серверами, это будут фактически легкие программы, которые предоставляют конкретные возможности через MCP для предоставления этого контекста. И вы можете создавать свои собственные серверы или использовать любой из множества доступных серверов. Итак, в VS Code, если вы зайдете в раздел расширений и введете @MCP, вы получите различные доступные серверы. Мы определенно рекомендуем вам использовать список серверов, который находится в VS Code, просто потому, что иногда могут возникнуть проблемы с безопасностью, если вы просто зайдете в интернет и выберете случайный сервер, он может содержать вредоносное содержимое. Поэтому мы рекомендуем использовать то, что есть в VS Code или GitHub. Итак, когда MCP был впервые выпущен, одним из недостатков было то, что он возвращал практически только текст. Так что, если бы кто-то задал вопрос, как в этом случае, я бы задал вопрос, попросив его нарисовать изображение, диаграмму, объясняющую, что такое MCP. И поэтому, часто в ранние дни MCP или в целом LLM, вы можете зайти в репозиторий GitHub, и большинство README содержат ASCII-арт или много эмодзи. Я чувствую, что мы перекомпенсировали эмодзи, потому что мы на самом деле не могли генерировать диаграммы или интересный богатый текст с помощью MCP или инструментов, которые были нам доступны. Так что хороший вопрос, который стоит задать, это как мы можем создавать богатый пользовательский интерфейс в чате? Так вот где MCP-приложения вступают в игру. Итак, MCP-приложения позволяют серверным инструментам возвращать богатые интерактивные компоненты, которые отображаются непосредственно в чате. Таким образом, вы можете позволить серверу фактически возвращать эти приятные элементы пользовательского интерфейса, чтобы вы могли взаимодействовать с ними непосредственно в чате, а также это улучшает общий визуальный элемент вещей. Итак, я показал ранее пример ASCII-арта, где был возвращен текст. Я задал тот же вопрос, используя MCP-сервер Excalidraw, который теперь использует MCP-приложение для генерации диаграммы, объясняющей MCP. И вы можете видеть, что он генерирует. Это просто снимок экрана того, как это выглядит. Но, еще одна действительно классная вещь заключается в том, что вы можете фактически взаимодействовать с этой диаграммой. Вы можете двигать ее, обновлять текст и так далее, потому что это живой элемент, который фактически доступен в чате. Итак, как на самом деле работают MCP-приложения? Хороший пример заключается в том, что, возможно, у нас есть пользователь. Мы начинаем с того, что пользователь задает вопрос. Итак, они отправят подсказку. Возможно, они скажут: "Покажи мне аналитику". И агент с LLM решит, какие инструменты вызвать, используя MCP-сервер. Он подключится, а затем выберет инструмент. И тогда сервер вернет результаты инструмента с ссылкой на ресурс пользовательского интерфейса. Итак, MCP имеет MCP-ресурсы, и эта ссылка будет указывать на HTML-элемент, который хранится, который сервер сгенерировал. Затем хост, а не клиент, это не будет GitHub Copilot, а хост, которым является VS Code, получит HTML из этой ссылки на пользовательский интерфейс, на которую ссылался сервер, а затем хост отобразит приложение внутри изолированного iframe. Таким образом, пользователь в этот момент может взаимодействовать с iframe в хосте, и там есть действительно хорошее разделение между ними. И тогда приложение может вызывать сервер обратно и вперед, чтобы у вас был этот живой интерактивный опыт. И тогда сервер может возвращать свежие данные, и приложение также будет обновляться. Некоторые различные варианты использования MCP-приложений. Один, например, это исследование данных. Вы можете представить, если бы мы просто печатали в чате все время, и мы хотели бы узнать больше о наборе данных. Было бы сложно взаимодействовать с базой данных. Было бы сложно постоянно печатать и задавать новые вопросы. О, знаете ли, вы нашли информацию о тенденции с помощью гистограммы, а затем вы хотели бы найти больше информации о, возможно, некоторых конкретных числах в другой диаграмме, и фактически ввод этой информации будет утомительным для пользователя, когда он может просто нажимать разные кнопки в пользовательском интерфейсе таким образом. Другая вещь — это электронная коммерция. Я думаю, это действительно отличный пример, когда пользователь, возможно, в одном случае захочет иметь возможность фактически купить что-то в пользовательском интерфейсе чата. Итак, возможно, не столько в VS Code, сколько в других чат-интерфейсах, таких как OpenAI или что-то в этом роде, пользователь должен иметь возможность в чате фактически совершить покупку и пройти весь процесс оформления заказа в чате вместо того, чтобы просто печатать. В прошлом, что происходило, возможно, вы печатали, вы могли спросить своего клиента: "Могу ли я купить что-то онлайн?" И тогда он просто возвращал бы вам ссылки, и вам пришлось бы перейти в браузер. Что мы хотим, так это удержать пользователя в чате, а затем позволить ему взаимодействовать и получить этот опыт там. Кто сейчас создает MCP-приложения? Я думаю, это хороший вопрос. Spotify — нет, не Spotify, а Shopify. Shopify — это пример компании, которая в настоящее время разрабатывает MCP-приложения. И я слушал действительно хороший доклад о том, как они также сосредоточены на сохранении фирменного стиля компании таким же, как если бы вы были на веб-сайте компании. Если пользователь находится в чате, отображаемые элементы должны быть такими же и должны давать то же фирменное ощущение. Поэтому они действительно работают над элементами пользовательского интерфейса, которые возвращаются, чтобы пользователь мог буквально пройти полный процесс оформления заказа, как я упоминал, чтобы иметь возможность фактически покупать в чате. Другая группа, которая использует MCP-приложения, как я упоминал ранее, это Excalidraw. Это очень популярно сейчас для, возможно, создания архитектурных диаграмм или интерактивных диаграмм. Если вы зайдете, например, в Cloud Code, у них есть очень хорошие MCP-приложения, которые используют Excalidraw для просто генерации изображения, визуализирующего вещи. Figma — еще одна компания, которая использует MCP-приложения. Я не смог найти изображение приятного отображаемого MCP-приложения Figma, но в целом у них есть компоненты, которые вы можете генерировать на лету с помощью MCP-приложений. Итак, я думаю, это все, что я собираюсь осветить, и теперь Лиам проведет нашу живую демонстрацию. >> Да, отлично. Спасибо. Итак, все подняли руки, когда Марлон спросил, кто использует MCP или кто знает, что такое MCP. Кто уже использует MCP-приложения? Хорошо, есть, отлично. Отлично. Кричите с задних рядов, если вы не видите этого. Но, по сути, MCP-приложение позволит нам действительно взаимодействовать или оставаться в одном контексте, таком как VS Code. Итак, способ, которым я это делаю, это я фактически позаимствовал навык, который находится в репозитории Model Context Protocol онлайн. Он от Anthropic. Я немного отредактировал его и пропустил через GitHub Copilot CLI. Это позволяет мне выдавать ряд различных MCP-приложений. Итак, в этом репозитории у меня есть один для графа пламени. Это тот, который мы будем показывать сегодня. Но у меня есть просмотрщик Markdown, статус полета, выбор цвета и т. д. Просто общие, которые вы проходите, когда начинаете создавать эти проекты. Итак, начиная с этого README, вы можете видеть, что в MCP-приложении есть три основные части. У вас есть инструмент, который является самим LLM, и хост, то есть в данный момент VS Code. У вас есть ресурс, который затем является упакованным HTML-интерфейсом, который вы будете собирать. Это может быть React, это может быть Vue, что угодно, как вы хотите отображать свой пользовательский интерфейс. А затем у вас есть связь между ними. Итак, хост и MCP или сервер будут распознавать связь между наличием фактического ответа данных и доступным для отображения пользовательским интерфейсом. Итак, есть хорошие способы сделать это. Как я сказал, у вас есть React, у вас есть ванильный JS, у вас есть Vue, Svelte и т. д. Итак, вы можете пройти через весь этот навык. Это фактически расскажет Copilot CLI или Claude или любому другому инструменту ИИ, который вы используете, как запустить это или что делать при запуске этого навыка. Он настроит его определенным образом, и он точно расскажет вам, как его запустить и как его следует запускать с примерами кода, такими как обработчики, видимость инструмента, то есть является ли это только моделью, которая может вызывать приложение, является ли это моделью и приложением, или является ли это только приложением. Итак, это то, кто вызывает инструмент в любой данный момент. Итак, для этого примера я буду использовать файл Go. Я Go-инженер. Я пишу много кода на Go, но все, что меня действительно волнует, это алгоритм пузырьковой сортировки. Итак, простое сравнение значений массива, довольно стандартное для любого собеседования по программированию. А затем у нас есть последовательность Фибоначчи. Итак, n + 1. Это похоже на O большое. Итак, по сути, просто добавление к следующему перед ним. Что я делаю там, это я собираюсь использовать MCP-сервер для профилирования кода приложения в течение 5 секунд, чтобы увидеть, где тратится больше всего времени в этом приложении. Как и любое профилирование, это использует Go pprof, так что это базовый профиль, который вы получаете в Go. Но, по сути, MCP-сервер работает на localhost. Это точка входа здесь. Это просто сервер, который я запускаю локально. Затем он вызывает сервер TypeScript. Все это написано на TypeScript в соответствии с навыком, который был включен. Из всего этого файла этот является наиболее важным, где MCP упакует мою программу Go, запустит ее, профилирует и выдаст некоторые данные. И именно в этот момент пользовательский интерфейс затем связывается с самим MCP-сервером для отображения фронтенда. Здесь у нас есть приложение React flame, которое использует хуки в React. И здесь мы видим, что мы будем смотреть на получение входных данных инструмента. У нас есть результаты. У нас есть, где он тратит больше всего времени, и сам граф пламени. Итак, кто, кто, кто здесь использовал графы пламени или касался их или как бы знает? По сути, это очень неприятный набор данных, который вы получаете в конце, и он весь перемешан. Это действительно хороший способ профилировать и видеть, как это работает. Итак, я собираюсь открыть GitHub Copilot и убедиться, что мой MCP-сервер запущен. У меня он установлен здесь, и для него есть один инструмент. Итак, профилировать приложение. Надеюсь, если я пойду и спрошу GitHub Copilot, он все еще будет работать. Он должен распознать, что ему нужно вызвать инструмент. Так что я просто дам этому минутку, чтобы запуститься. Вот. Он заметил, что у меня установлен профилировщик графа пламени. Должен использовать это, загружая MSP-приложение. Дайте ему секунду, чтобы загрузиться. Вот. Мы можем закрыть это. Здесь выглядит MCP-приложение внутри окна чата. Итак, оно отобразило пользовательский интерфейс в iframe. Мы можем посмотреть на верхние функции и сводку того, как это работает. Это можно редактировать, а затем просматривать и как бы обрабатывать по мере того, как вы хотите, чтобы оно соответствовало вашему окну чата. Мое довольно большое. Но это дает общий обзор того, как они выглядят и как вы можете их сопоставить. Обычно, что я бы делал с этими данными, это спрашивал бы свои ИИ-модели: "Это хорошо? Это плохо? Где я трачу свое время?" Есть много обмена. С приложением пользовательского интерфейса, которое у нас есть внутри iframe, вы просто устраняете это. Вы фактически избавляетесь от этого. У вас все доступно здесь. Итак, вы можете видеть, где оно тратит больше всего времени в функциях и так далее. Так что это действительно хороший способ его использовать. Теперь я написал очень примитивный рисунок, который был немного лучше на слайде Марлен. Но, по сути, я сказал: "Профилируй мое приложение". Это было отправлено в модель LLM, которая затем сказала: "Мне нужно вызвать этот инструмент". MCP-сервер запустился, вернул мне JSON-данные, передал их хосту. Хост распознал, что есть ресурс для связи, и поэтому он был отображен в iframe в окне чата. Причина, по которой мы делаем это в iframe, или почему iframe, та же причина, по которой вы помещаете хомяка в клетку, верно? Если вы не отпустите его в комнату, он просто будет грызть вещи. Вы не хотите, чтобы это приложение взаимодействовало с вашими настройками VS Code, любыми API, чем-либо внешним, всем этим. Так что вы хотите держать все это внутри окна чата. Вот почему это в iframe. И я думаю, что время истекло. Так что, я думаю, Марлен, что-нибудь еще? >> Э, нет. Мы Microsoft здесь. У GitHub есть стенд на четвертом этаже, на третьем этаже. Так что, о. Как мне вернуться? Нужно быть в камере. Но у GitHub есть стенд. У нас также будет Microsoft Build в этом году, который будет очень посвящен коду, и у нас будет много мастер-классов. Он будет проходить с третьего по шестое, я думаю, июня. Так что мы приглашаем вас посетить наш стенд GitHub или ознакомиться с Microsoft Build онлайн. Но, да, спасибо, что присоединились. >> Итак, это все. Спасибо.