WebMCP обладает огромным потенциалом для обеспечения высокой совместимости наших приложений с агентами. Давайте поближе познакомимся с этим предлагаемым стандартом и узнаем, как начать использовать инструмент предварительного просмотра в Telerik и Kendo UI.
Когда я только начал работать с ИИ-агентами, они в основном подходили для написания кода или выполнения задач на моем локальном компьютере. Но сегодня они умеют гораздо больше. ИИ-агенты теперь могут открывать браузер, перемещаться по веб-страницам и взаимодействовать с онлайн-приложениями точно так же, как это делаем мы.
Способ взаимодействия агентов с веб-страницами сегодня может быть медленным и ненадежным. Многие браузерные агенты ведут себя как человек, смотрящий на экран: они сначала делают скриншоты, считывают текст с изображений или сканируют тысячи строк чистого HTML, а затем пытаются угадать, на какую кнопку нажать или какое поле ввода использовать.
Что происходит, когда агент пытается взаимодействовать с сеткой данных? Такие функции, как виртуальная прокрутка, пользовательские шаблоны и выпадающие меню, делают HTML очень сложным. Строки исчезают по мере прокрутки. CSS-классы меняются. Когда это происходит, агент теряется.
Что если бы наши веб-приложения могли предоставлять ИИ-агентам понятный и прямой API прямо внутри браузера?
Именно здесь на помощь приходит WebModel Context Protocol (WebMCP)! Мы узнаем, что такое WebMCP и как библиотеки Progress Telerik и Kendo UI внедряют этот предлагаемый стандарт в ваши приложения.
Мы начнем с нашей существующей панели мониторинга скаута игроков НБА, созданной с помощью Angular и Kendo UI for Angular, и посмотрим, почему ИИ-агент может испытывать трудности при работе с ней. Затем мы сделаем ее готовой к работе с агентами всего за несколько минут с помощью @progress/kendo-angular-webmcp.
Важное примечание: WebMCP по-прежнему является предлагаемым веб-стандартом, который работает только за флагами функций разработки в определенных браузерах. Эту публикацию и ее демоверсию следует рассматривать как предварительный просмотр.
Важное примечание: WebMCP по-прежнему является предлагаемым веб-стандартом, который работает только за флагами функций разработки в определенных браузерах. Эту публикацию и ее демоверсию следует рассматривать как предварительный просмотр.
Давайте заставим это работать в реальном проекте, но сначала разберем, что такое WebMCP.
Что такое WebMCP?
Возможно, вы уже знакомы с Model Context Protocol (MCP) от Anthropic. MCP — это открытый стандарт. Он соединяет ИИ-ассистентов с внешними базами данных, файлами и инструментами разработчика. Обычно он работает на сервере или локальном компьютере.
WebMCP берет эту идею и переносит ее непосредственно в ваш веб-браузер.
Предложенный W3C Web Machine Learning Community Group, WebMCP добавляет новый API браузера: navigator.modelContext.
Думайте о WebMCP как о меню API для вашей веб-страницы. Вместо того чтобы просить ИИ-агента читать сложные HTML-элементы, WebMCP позволяет вашему приложению регистрировать функции JavaScript в качестве структурированных инструментов. Каждый инструмент имеет четкое имя, описание и типизированные параметры.
Когда ИИ-агент посещает вашу страницу, ему не нужно угадывать, как работает ваш интерфейс. Он читает список инструментов, понимает параметры и выполняет действие напрямую.
Но как нам на самом деле создать эти инструменты, не тратя часы на написание схем JSON? Именно здесь на сцену выходят Progress Telerik и Kendo UI.
Для более глубокого понимания WebMCP ознакомьтесь со статьей: Краткий курс по ИИ: WebMCP.
Для более глубокого понимания WebMCP ознакомьтесь со статьей: Краткий курс по ИИ: WebMCP.
Использование инструментов ИИ Telerik и Kendo UI для WebMCP
Создание пользовательских инструментов вручную отнимает много времени. Вам нужно написать код и синхронизировать его с состоянием пользовательского интерфейса. Именно здесь на помощь приходит такая библиотека компонентов, как Kendo UI for Angular. И теперь, благодаря нативной поддержке предварительного просмотра WebMCP через @progress/kendo-angular-webmcp, компоненты Kendo UI сразу готовы к работе с ИИ-агентами.
Вам не нужно писать собственные схемы JSON для сортировки или фильтрации. Вы просто добавляете директиву к своему компоненту:
Когда вы добавляете директиву kendoWebMcp к такому компоненту, как Kendo UI Grid:
- Директива проверяет активные функции, такие как [sortable]="true" или [filterable]="true".
- Она регистрирует инструменты в контексте браузера, такие как players-sort-column или players-filter.
- Когда ИИ-агент вызывает один из этих инструментов, директива вызывает внутренние методы Grid. Angular реагирует, обновляет состояние и обновляет представление.
Для тестирования этих инструментов Progress предоставляет расширение браузера Telerik & Kendo UI WebMCP. Оно предоставляет вам панель чата прямо в браузере. Прежде чем писать какой-либо код, нам нужно убедиться, что наш браузер действительно понимает эти новые команды WebMCP.
Progress также предлагает инструменты предварительного просмотра React WebMCP и Blazor WebMCP. Инструменты интеграции Progress WebMCP являются функциями предварительного просмотра, поскольку WebMCP все еще является предлагаемым веб-стандартом, который работает только в ограниченных ситуациях. В быстро развивающейся экосистеме поддержка также может быть ограниченной.
Progress также предлагает инструменты предварительного просмотра React WebMCP и Blazor WebMCP. Инструменты интеграции Progress WebMCP являются функциями предварительного просмотра, поскольку WebMCP все еще является предлагаемым веб-стандартом, который работает только в ограниченных ситуациях. В быстро развивающейся экосистеме поддержка также может быть ограниченной.
Подготовка вашего браузера
Поскольку WebMCP — это недавно предложенный веб-стандарт, нам нужно выполнить два простых шага настройки перед началом:
1. Включите флаг браузера
В настоящее время WebMCP работает за флагом в браузерах на базе Chromium (Google Chrome или Microsoft Edge).
- Откройте браузер и перейдите по адресу: chrome://flags/#enable-webmcp-testing
- Установите для флага значение Enabled.
- Нажмите Relaunch в нижней части окна.
2. Установите и настройте расширение Telerik WebMCP
- Установите расширение Telerik & Kendo UI WebMCP из интернет-магазина Chrome.
- Расширение служит мостом между браузером и языковой моделью (LLM) для интерпретации команд на естественном языке. Вам необходимо настроить его с помощью ключа API от провайдера ИИ (такого как Anthropic, Google Gemini или OpenAI).
Расширение служит мостом между браузером и языковой моделью (LLM) для интерпретации команд на естественном языке. Вам необходимо настроить его с помощью ключа API от провайдера ИИ (такого как Anthropic, Google Gemini или OpenAI).
- Откройте настройки расширения (значок шестеренки), выберите предпочитаемого провайдера и вставьте свой ключ API.
Откройте настройки расширения (значок шестеренки), выберите предпочитаемого провайдера и вставьте свой ключ API.
- (Рекомендуется): В том же меню настроек в разделе «Поведение» (Behavior) включите автоматическое одобрение вызовов инструментов (Auto-approve tool calls). Это делает работу в чате намного плавнее, так как ИИ не будет запрашивать разрешение каждый раз, когда он захочет обновить сетку Grid.
(Рекомендуется): В том же меню настроек в разделе «Поведение» (Behavior) включите автоматическое одобрение вызовов инструментов (Auto-approve tool calls). Это делает работу в чате намного плавнее, так как ИИ не будет запрашивать разрешение каждый раз, когда он захочет обновить сетку Grid.
После настройки вы можете открыть панель чата, выбрать нужную модель и начать вводить запросы!
Предупреждение: WebMCP и это расширение в настоящее время являются экспериментальными. Если вы получите ошибку API, просто переключитесь на Anthropic или OpenAI в настройках.
Предупреждение: WebMCP и это расширение в настоящее время являются экспериментальными. Если вы получите ошибку API, просто переключитесь на Anthropic или OpenAI в настройках.
Теперь ваш браузер полностью готов! Настроив окружение, мы готовы погрузиться в код и увидеть это в действии.
Исходная точка: наша существующая панель мониторинга скаута НБА
В реальном мире мы редко создаем приложения с нуля только ради поддержки ИИ-агентов. Как правило, у нас уже есть готовые рабочие приложения.
Давайте посмотрим на наше существующее приложение: информационную панель скаута НБА (NBA Scout Dashboard). Баскетбольные скауты используют ее для анализа статистики игроков.
Примечание: Полный исходный код доступен на GitHub. Вы можете клонировать начальную ветку (starter), чтобы следовать этому руководству шаг за шагом, или переключиться на основную ветку (main), чтобы посмотреть итоговый код.
Примечание: Полный исходный код доступен на . Вы можете клонировать начальную ветку (starter), чтобы следовать этому руководству шаг за шагом, или переключиться на основную ветку (main), чтобы посмотреть итоговый код.
Чтобы следовать вместе с нами, откройте терминал и клонируйте начальную ветку репозитория:
Модель данных в src/app/player.model.ts выглядит следующим образом:
Компонент в src/app/app.ts представляет собой современный автономный компонент Angular с использованием KENDO_GRID:
А вот шаблон в src/app/app.html:
Запустите приложение с помощью этой команды:
Тестирование приложения пользователем-человеком
Если вы откроете http://localhost:4200 в браузере прямо сейчас, то увидите полнофункциональную таблицу. Нажмите на заголовки столбцов, чтобы отсортировать данные, или откройте меню фильтров, чтобы найти конкретных игроков. Для нас, людей, панель управления работает идеально и готова к использованию. Но что происходит, когда ИИ-агент пытается сделать то же самое? Давайте выясним.
Проблема: как ИИ-агент видит наше приложение сегодня
Теперь откройте расширение Telerik & Kendo UI WebMCP в панели инструментов браузера и перейдите на вкладку Tools (Инструменты).
Вы увидите: No tools available (Нет доступных инструментов).
Поскольку мы не зарегистрировали ни одного инструмента, у ИИ-агента нет прямого способа взаимодействия с таблицей. Если вы попросите агента «Показать разыгрывающих со средним показателем более 25 очков за игру», ему придется угадывать HTML-структуру. Если макет таблицы изменится, агент потерпит неудачу.
Эту проблему мы решаем как разработчики: мы хотим, чтобы наше существующее приложение точно говорило агенту, что он может делать, без переписывания всего нашего кода.
Итак, как же преодолеть этот разрыв и предоставить ИИ именно те инструменты, которые ему нужны? Давайте сделаем это приложение готовым к работе с агентами всего за три простых шага.
Подготовка существующего приложения к работе с агентами
До сих пор мы тестировали нашу панель управления и видели проблему. Теперь давайте исправим ее за три простых шага.
Установите @progress/kendo-angular-webmcp
Остановите сервер разработки и выполните эту команду:
Это установит пакет Kendo UI WebMCP.
Шаг 2: Импортируйте KENDO_WEBMCP в компонент
Откройте src/app/app.ts. Импортируйте KENDO_WEBMCP и добавьте его в массив imports:
Добавьте директиву kendoWebMcp в таблицу
Откройте src/app/app.html. Обновите тег <kendo-grid>, добавив в него [kendoWebMcp]:
Что только что произошло?
Прописав всего лишь [kendoWebMcp]="{ dataName: 'players' }", Kendo UI проверяет функции вашей таблицы. Поскольку заданы параметры [sortable]="true" и [filterable]="true", он автоматически создает список таких инструментов, как:
- players-sort-column: позволяет агенту сортировать любой столбец.
- players-filter: позволяет агенту фильтровать столбцы (например, больше, равно).
- players-highlight: позволяет агенту визуально выделять определенные строки.
Обратите внимание на то, чего мы не делали. Мы не писали сложные схемы JSON. Мы не меняли наши сигналы Angular. Все просто работает. Теперь, когда наша таблица предоставляет эти инструменты нативно, пришло время испытать ИИ-агент в деле.
Взаимодействие с ИИ-агентом
Давайте посмотрим на результат. Снова запустите приложение (npm start).
Проверка инструментов
- URL: http://localhost:4200
- Действие: обновите страницу. Откройте расширение Telerik WebMCP и проверьте вкладку Tools.
- Ожидаемый результат: вы видите в списке players-sort-column, players-filter и players-highlight.
Давайте протестируем запрос с многоусловной фильтрацией. В чате расширения введите:
«Покажи мне всех разыгрывающих из Западной конференции, которые набирают в среднем более 25 очков за игру».
«Покажи мне всех разыгрывающих из Западной конференции, которые набирают в среднем более 25 очков за игру».
Вместо кликов по меню ИИ вызывает инструмент players-filter, используя следующий JSON:
Таблица Kendo UI применяет фильтр мгновенно! Лука Дончич, Шей Гилджес-Александер и Стефен Карри остаются видимыми.
Затем сбросьте фильтр и попробуйте отсортировать и выделить данные с помощью двухшагового запроса:
«Сбрось фильтр, отсортируй игроков по очкам за игру по убыванию и выдели всех игроков, которые в настоящее время травмированы».
«Сбрось фильтр, отсортируй игроков по очкам за игру по убыванию и выдели всех игроков, которые в настоящее время травмированы».
Агент вызывает два инструмента автоматически:
- players-sort-column с параметрами { field: "ppg", dir: "desc" }.
- players-highlight для строк, где status == "Injured".
Джоэл Эмбиид и Джимми Батлер подсвечены. Никаких угадываний HTML-структуры. Это быстро и надежно.
Поиграйте с этим и посмотрите, как ИИ управляет пользовательским интерфейсом словно по волшебству!
Но что это значит для нас с точки зрения архитектуры?
Это обновление WebMCP приносит несколько ключевых преимуществ для улучшения взаимодействия нашего приложения с агентами:
- Вместо того чтобы агент делал тяжелые скриншоты или парсер читал огромные блоки HTML, WebMCP использует только небольшие полезные данные JSON. Это экономит деньги, время и токены!
- WebMCP помогает обеспечить стабильное взаимодействие. Дизайн пользовательского интерфейса и классы CSS могут часто меняться, поэтому, если агент полагается на теги HTML вроде .k-grid-table > tr, он сломается. WebMCP создает четкий контракт. Вы можете менять свой CSS, не ломая ИИ-агент.
- Лучшая часть — это нативная поддержка Angular, поскольку компоненты Kendo UI для Angular создаются изначально с использованием Angular. Когда ИИ-агент вызывает инструмент, Kendo UI должным образом обновляет таблицу.
Все это звучит потрясающе, но, конечно, не все в предварительной версии еще идеально, и WebMCP имеет некоторые компромиссы, о которых следует помнить:
- Экспериментальная спецификация: WebMCP все еще является экспериментальным черновиком. API может измениться до того, как станет окончательным стандартом.
- Требуется настройка браузера: в настоящее время пользователям необходимо включить флаг браузера и установить расширение. В будущем браузеры будут поддерживать это нативно.
- Клиентская безопасность: инструменты выполняются в сеансе браузера. Всегда проверяйте входные данные и права доступа на своем серверном бэкенде.
Несмотря на эти ранние компромиссы, будущее веб-приложений на базе ИИ невероятно потрясающе.
Резюме
WebMCP предоставляет ИИ-агентам более надежный способ взаимодействия с вашими веб-приложениями. В этом руководстве мы рассмотрели, что такое WebMCP и почему стандартные веб-приложения сложны для использования ИИ-агентами.
Затем мы решили эту проблему с помощью @progress/kendo-angular-webmcp. С помощью простой директивы мы подготовили наше приложение к работе с агентами и увидели, как ИИ-агент сортирует, фильтрует и выделяет наши данные на естественном языке.
Вы можете найти финальный код в основной ветке нашего репозитория на GitHub.
Приятного кодинга!
Помните, что компоненты Telerik и Kendo UI поставляются с бесплатной пробной версией. Так что вперед — исследуйте постоянно развивающуюся готовность этих известных компонентов к работе с ИИ.
Попробовать сейчас
