Приложения MCP меняют интернет. Вот как создать одно из них! (Skybridge)
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
스크립트
00:00:00В индустрии происходит огромный сдвиг парадигмы из-за искусственного интеллекта.
00:00:04Все больше пользователей используют чат-боты для повседневного поиска или исследований.
00:00:10И именно поэтому концепция приложений MCP становится все более популярной.
00:00:14Вместо того чтобы выдавать файл JSON или документ Markdown,
00:00:18все больше приложений и сервисов переходят на предоставление таких интерактивных и полезных виджетов внутри чат-бота.
00:00:24Компания Alpic недавно выпустила классный новый фреймворк под названием SkyBridge,
00:00:29который позволяет очень легко создавать собственные пользовательские приложения MCP для самых разных сценариев.
00:00:35Поэтому в сегодняшнем видео мы рассмотрим SkyBridge, посмотрим, как он работает, и попробуем его в деле.
00:00:41Будет очень интересно, так что давайте погрузимся в это.
00:00:47Чтобы по-настоящему понять, почему SkyBridge имеет такое большое значение, нужно понять, как работают эти новые приложения.
00:00:53Когда вы создаете традиционное веб-приложение, вы создаете его для одного пользователя — человека.
00:00:58Но с приложением MCP вы фактически создаете продукт сразу для двух пользователей: человека и ИИ-ассистента,
00:01:05потому что они оба используют один и тот же интерфейс.
00:01:08Человек может нажимать кнопки, вводить данные и двигать ползунки, а языковая модель мгновенно видит это состояние.
00:01:15И наоборот, языковая модель может обновлять данные в фоновом режиме,
00:01:18а пользовательский интерфейс меняется в реальном времени прямо перед вами.
00:01:21SkyBridge — это открытый TypeScript-фреймворк, который берет на себя всю сложную обвязку,
00:01:26мосты протоколов, синхронизацию состояния и правила безопасности,
00:01:30так что вы можете просто сосредоточиться на написании стандартного кода React.
00:01:34Если вы когда-нибудь пытались создавать приложения MCP для ChatGPT или Claude раньше,
00:01:39вы знаете, что локальное тестирование раньше было настоящей головной болью.
00:01:43Вам приходилось вручную настраивать публичные туннели, копировать конфигурации,
00:01:47и перезапускать сеансы чата только для того, чтобы исправить мелкую опечатку в CSS.
00:01:52Но самая крутая часть SkyBridge 1.0 заключается в том, что в нем полностью переработана панель управления DevTools.
00:01:59Теперь при запуске локального сервера разработки в вашем браузере открывается панель эмулятора.
00:02:04И внутри этой панели есть три отличных инструмента.
00:02:08Первый — это Alpik Playground,
00:02:11локальная песочница, где вы можете тестировать свои инструменты и настраивать виджеты React с помощью горячей замены модулей.
00:02:17И вы можете видеть изменения мгновенно, пока не прикасаясь к реальной языковой модели.
00:02:21Во-вторых, здесь есть встроенный туннель,
00:02:24который позволяет буквально в один клик открыть ваш локальный сервер через безопасный публичный URL-адрес.
00:02:30Так что вам больше не придется возиться с внешними туннелями.
00:02:33Просто вставьте этот URL-адрес в настройки разработчика ChatGPT, и вы в эфире.
00:02:37И третий — это инструмент аудита Beacon.
00:02:40Это просто спасение, если вы планируете отправлять свои приложения в публичные магазины.
00:02:44Он сканирует метаданные, инструменты и политики безопасности вашего приложения на предмет частых причин отклонения,
00:02:49прежде чем вы отправите приложение на проверку.
00:02:52Самое крутое, что даже если вы никогда не создавали MCP-приложения,
00:02:56вы можете легко установить навык SkyBridge на своего любимого агента ИИ, чтобы начать работу мгновенно.
00:03:02А теперь давайте попробуем создать небольшое приложение MCP самостоятельно и посмотрим, как оно работает.
00:03:07Для этой демонстрации я создал небольшой сайт электронной коммерции,
00:03:11где можно покупать различные объективы для камер.
00:03:14По сути, это полноценный магазин на базе React с функцией корзины и оформления заказа.
00:03:19И теперь я хочу добавить для него приложение MCP.
00:03:22Чтобы потенциальный покупатель при использовании чат-бота вроде ChatGPT или Claude для поиска рекомендаций объективов,
00:03:30мог сразу вызвать наше приложение MCP для отображения списков товаров конечным пользователям.
00:03:36Как я уже говорил, проще всего начать с установки навыка SkyBridge.
00:03:42Мы можем установить его глобально или только для нашего конкретного репозитория.
00:03:46Для целей этой демонстрации я установлю его прямо в репозиторий.
00:03:51Теперь вы видите, что у нас появился каталог .agents с установленным навыком SkyBridge.
00:03:57Все, что мне нужно сделать теперь, — попросить Claude создать приложение MCP для моего интернет-магазина.
00:04:04Перед созданием Claude задаст мне несколько дополнительных вопросов о назначении приложения,
00:04:09чтобы лучше понять, какой функционал в него нужно включить.
00:04:13Для этой демо-версии мне нужно приложение, которое выводит список объективов в зависимости от запроса пользователя.
00:04:18Затем мы сможем выбирать их, сравнивать бок о бок, а также добавлять в корзину.
00:04:24и предоставить нашим клиентам быстрое решение для оформления заказа.
00:04:28В принципе, это все, что мне нужно сделать.
00:04:29А теперь я просто позволяю Claude делать свою работу.
00:04:32Буквально через пару минут мы видим, что Claude сгенерировал наше приложение MCP.
00:04:37Самое классное то, что теперь мы можем открыть панель разработчика, предоставленную SkyBridge,
00:04:41и опробовать ее самостоятельно.
00:04:44Итак, если мы откроем панель управления, то увидим, как она выглядит.
00:04:47Здесь у нас есть инструмент поиска объективов и инструмент оформления заказа.
00:04:53Прежде всего, для поиска объективов я просто укажу максимальную цену для искомых моделей.
00:05:00И ограничим результат, пожалуй, пятью объективами.
00:05:03И вот пожалуйста.
00:05:04Нашлось 14 вариантов дешевле 2000 долларов.
00:05:09Вот как приложение выглядит на десктопе.
00:05:12Мы также можем предварительно просмотреть мобильную версию.
00:05:14Выглядит неплохо.
00:05:15Также у нас есть темный и светлый режимы.
00:05:18Здесь отображаются результат работы инструмента и состояние.
00:05:23Посмотрите, что произойдет, если я выберу несколько объективов.
00:05:26Как видите, состояние обновляется на лету, и это здорово.
00:05:31Давайте выберем три объектива.
00:05:34Если мы нажмем кнопку сравнения, мы попадем на экран сравнения.
00:05:40Здесь мы можем увидеть все три объектива рядом со всеми параметрами.
00:05:45Если нас устраивает этот выбор, мы можем перейти к оформлению заказа.
00:05:49Мы переходим на этап оформления, где можем ввести свое полное имя, адрес электронной почты, адрес доставки и разместить заказ.
00:05:59Как видите, эта панель отлично подходит для тестирования виджетов и проверки правильности их работы.
00:06:08Теперь перейдем в Claude, где в настройках есть раздел под названием "Коннекторы".
00:06:16Нужно нажать кнопку настройки.
00:06:19Для этого вам понадобится URL-адрес туннеля.
00:06:21Поэтому убедитесь, что туннель активирован.
00:06:24Мы можем просто скопировать этот URL.
00:06:26В разделе коннекторов вам просто нужно добавить пользовательский коннектор.
00:06:31Дать ему имя.
00:06:33И вставить скопированный URL-адрес туннеля.
00:06:38Затем просто нажать кнопку добавления.
00:06:39Я уже добавил его сюда.
00:06:41И последнее, что вам нужно сделать, — нажать кнопку подключения.
00:06:45Вы также можете настроить разрешения, если хотите, чтобы эти инструменты запускались автоматически или требовали подтверждения пользователя.
00:06:53А затем мы можем просто начать новый чат.
00:06:57И в новом чате я теперь могу попросить: дай мне рекомендации лучших объективов стоимостью до 2000 долларов для портретной съемки.
00:07:05И теперь мы видим, что система сообщает, что выполнит поиск по каталогу магазина объективов для поиска отличных вариантов для портрета дешевле 2000 долларов.
00:07:12И только посмотрите на это.
00:07:14Оно открыло наше приложение MCP.
00:07:16Ну разве не круто?
00:07:18И мы можем проделать то же самое здесь.
00:07:20Мы можем выбрать некоторые из объективов прямо здесь.
00:07:24А затем перейти в раздел сравнения.
00:07:27И здесь есть вот такая небольшая сравнительная таблица.
00:07:32Единственное, что я заметил, это то, что здесь осталось пустое пространство от предыдущего состояния нашего инструмента.
00:07:40Так что это, вероятно, можно исправить с помощью CSS.
00:07:43Но в целом все выглядит отлично.
00:07:46И у нас также есть возможность оформить заказ.
00:07:49Мы переходим в раздел оформления заказа, где можем разместить наш заказ.
00:07:54Ну разве это не здорово?
00:07:57И наконец, самое главное: чтобы проверить, готово ли ваше приложение к публикации в публичных магазинах приложений,
00:08:02мы также можем запустить аудит нашего приложения через панель разработчика и проверить, нет ли у нас каких-либо проблем.
00:08:10И в общем-то, это всё.
00:08:11Всего за несколько минут мы смогли создать готовое к продакшену приложение MCP с помощью SkyBridge.
00:08:16Которое мы теоретически могли бы отправить в Магазин приложений ИИ.
00:08:20Надеюсь, это показывает вам, как легко начать работу со SkyBridge.
00:08:25И честно говоря, это ощущается как будущее современного веба.
00:08:28Я думаю, мы будем все чаще видеть подобные интерактивные виджет-приложения MCP внутри наших чат-ботов.
00:08:34Поэтому здорово, что существуют такие фреймворки, как SkyBridge, которые так сильно упрощают процесс создания подобных приложений для нас, разработчиков.
00:08:42Вот такие дела, друзья.
00:08:44Это SkyBridge в двух словах.
00:08:46Что вы думаете о SkyBridge?
00:08:47Вы уже пробовали его?
00:08:48Будете ли вы его использовать?
00:08:49Дайте нам знать в комментариях ниже.
00:08:52И друзья, если вам нравятся подобные технические разборы, пожалуйста, дайте мне знать, нажав кнопку лайка под видео.
00:08:58А также не забудьте подписаться на наш канал.
00:09:01С вами был Андрус из BetterStack, и увидимся в следующих видео.
00:09:16вы