Ранее на этой неделе мы взяли интервью у двух разработчиков MCP-UI, нового способа добавления React и веб-компонентов к агентам искусственного интеллекта. Один из них, Лиад Йосеф, работал в Shopify в то время, когда MCP-UI запустился (всего три месяца назад). Неудивительно, что Shopify сделал одну из первых крупномасштабных реализаций MCP-UI.
Сегодня мы рассмотрим, почему канадский гигант электронной коммерции преследует веб-интерфейс внутри агентов; И как они это делают.
Брет Литтл и Сэмюэль Пэт были двумя инженерами, ответственными за реализацию MCP-UI Shopify, наряду с самим Йосефом. Это было частью более крупного запуска «агентской торговли» в этом месяце от Shopify. 5 августа компания объявила о каталоге MCP -сервере Shopify, состоящей из трех основных частей:
Так где же MCP-UI входит в этот процесс? Что ж, фактически агент будет общаться с продавцом через сервер Chopify Catalog MCP, который отправит запрошенные данные и (через MCP-UI) любые необходимые визуальные компоненты. Как объяснено в моем предыдущем посте, каждый компонент пользовательского интерфейса обернута в элемент HTML iframe.
«Пользовательский интерфейс, который определяет MCP-UI, это просто веб-материал, который определяется в iframe»,-подтвердил Литтл, добавив, что «это сервер MCP-или хост сервера MCP [meaning Shopify] — Это владеет этим пользовательским интерфейсом ».
Поскольку это просто «веб -материал», он будет легко встроен в собственный пользовательский интерфейс агента — при условии, что он также поддерживает MCP.
Сложность виджетов электронной коммерции
Ранее мало что прокомментировал LinkedIn о сложности компонентов пользовательского интерфейса электронной коммерции (точка Yosef также сделала в инженерном блоге Shopify). «MCP-UI предоставляет очень простой способ легко встроить все сложности коммерции (подписки, пачки, скидки, тысячи вариантов и т. Д.)
«В этом смысл Shopify — это хост MCP Server, и у нас есть его», — объяснил Литтл, рассказывая о компоненте пользовательского интерфейса, отправляемого агенту. «Мы также должны владеть сложностью, если мы являемся экспертами. Мы должны знать, как сделать все это. Вы не обязательно хотите тратить шесть месяцев, получая все придурки рендеринга этого пользовательского интерфейса. Вы можете просто получить это внедрение в своего агента, и это просто работает».
«Вы не обязательно хотите потратить шесть месяцев, получая все придурки рендеринга этого пользовательского интерфейса. Вы можете просто получить это в своем агенте, и это просто работает».
— Брет Литтл, персонал -инженер в Shopify
В предыдущей статье я отметил, что большинство нынешних пользователей MCP-UI доставляют пользовательский интерфейс в качестве компонентов React. Но Shopify использует веб -компоненты для отправки фрагментов пользовательского интерфейса — веб -компонентов Shopify, если быть точным. Выпущенные ранее в этом году, это «набор компонентов HTML, которые справляются с сложностью API -интерфейса Shopify, позволяющей отображать продукты, коллекции и функциональность корзины для покупок на вашем веб -сайте без необходимости писать сложный код JavaScript».
Немного отметил, что веб-компоненты Shopify также были предназначены для справки с сложностью электронной коммерции, поэтому они хорошо дополняют MCP-UI.
«Как мне сделать выбор варианта с тысячами различных вариантов? Как мне делать пакеты? Все подобные вещи также обернуты в веб -компоненты магазина», — сказал он. «И поскольку это уже работает в любом месте в Интернете-это просто веб-компоненты-было естественно использовать его для MCP-UI, потому что MCP-UI может просто ссылаться и использовать их под капюшоном в Iframe».
Как агент отображает виджет?
Итак, как клиентское приложение-агент-фактически использует компоненты MCP-UI, отправляемые торговцем Shopify? В конце концов, то, как они представлены, в конечном итоге зависит от получения приложения. Например, у CHATGPT может быть определенный способ отображения визуальных компонентов, которые немного отличаются от, скажем, от Клода.
Мало что объяснило, что у MCP-UI есть три части с точки зрения клиента.
«Во-первых, это просто протокол того, как вы можете определить некоторые ресурсы на сервере MCP стандартным способом. Это всего лишь первый слой. Второй уровень-это протокол для общения с этими определенными ресурсами. А затем последний, MCP-UI обеспечивает фактическую реализацию, которую вы можете просто использовать из коробки».
Shopify Agentic Commerce в действии.
Практически, есть два основных варианта того, как агент может использовать полезную нагрузку MCP-UI.
«Одним из них, вы можете использовать SDK, который предоставляется из коробки»,-сказал Литтл, что означает клиент MCP-UI SDK. «Существует пакет NPM для клиента, который дает вам некоторые компоненты, которые вы можете отображать, и просто передавать результаты с сервера MCP-UI непосредственно на них, и они просто будут отображаться. Если вы не хотите этого делать, посмотрите на необработанную реакцию протокола MCP-это во многом iframe. Если вы хотите сделать это [i.e. display a UI component]вы просто создаете iframe, вставляете URL на этот URL Iframe (источник), а затем вы можете его использовать ».
Будущее MCP-UI в Shopify
В дополнение к Shopify Merchants, использующим MCP-UI-каждая торговая магазина получает собственный MCP-сервер-Shopify выбирает партнеров, которые объединяют всех торговцев Shopify. Microsoft Copilot является одним из них; Он получает доступ ко всем продавцам, которые существуют в Shopify «через API каталога и сервер MCP и тому подобное», — сказал Литтл.
Сэмюэл Пэт добавил, что в Shopify появляются другие варианты использования.
«У нас есть торговец, который на самом деле имеет несколько разных брендов, и они хотели бы использовать [Shopify] Каталог, используйте его на разных брендах и создайте агента чата, который затем может искать все свои бренды, [so they] иметь единого агента для нескольких брендов по всему миру ».
Это приводит нас к реальному пользовательскому опыту-люди, использующие агентов-и будет ли эта форма онлайн-покупок в конечном итоге заменить веб-сайты электронной коммерции.
Path сказал, что в своих ранних демонстрациях обратная связь, которую они получили от пользователей, предположили, что они будут стремиться к использованию агентов для своих потребностей в онлайн -покупках.
«Как только этот опыт улучшится, люди могут представить себе, как они делают покупки таким образом».
— Сэмюэль Пат, старший инженер программного обеспечения, Shopify
«Как только этот опыт улучшится, люди могут представить себе, как они делают покупки таким образом», — сказал Пат. «Вместо того, чтобы ходить в Google или искать разные продукты, у них может быть просто единый агент и сказать:« Это то, что я ищу, для моих детей, которые являются в этом возрасте и которые любят единороги, радуги и принцессы ». И вместо них щелкнет по ссылкам, у вас есть интегрированный опыт [in the agent chat]с карточками продукта от разных торговцев, которые вы можете легко просеять. Это уже лучший опыт, чем текущий опыт покупок в Интернете, я нахожу ».
Путь добавил, что «края все еще немного грубые» в настоящее время, но он ожидает, что это быстро улучшится.
Литтл сказал это: «Для меня, лично, я не думаю, что дошел до того, что я доверяю агенту, чтобы купить вещи для меня». Но он добавляет: «Я думаю, что это удивительная цель для съемки, где мы добираемся до такой степени, что люди могут доверять агентам делать важные покупки для них. И я думаю, что Shopify определенно пытается подтолкнуть в этом направлении».
Пут также отметил, что еще предстоит сделать работу по адаптации MCP-UI для мобильных устройств, потому что в настоящее время он ориентирован на веб-технологии.
«Есть много работы […] делать это, как оптимизировать это [MCP-UI] Для мобильного опыта, потому что через мобильные устройства совершается больше покупок ».
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Ричард Макманус — старший редактор нового стека и пишет о тенденциях разработки веб -и приложений. Ранее он основал ReadWriteWeb в 2003 году и встроил его в один из самых влиятельных технологических новостей в мире. С самого раннего … Подробнее от Ричарда Макмануса
