00:00:00Появилось новое предложение при поддержке Google и Microsoft, которое может определить будущее
00:00:03того, как мы используем интернет, и мне оно нравится. Называется WebMCP, но не путайте это
00:00:08с обычным сервером MCP. WebMCP — это на самом деле браузерный API, который позволит
00:00:13фронтенд-разработчикам открывать функции своих сайтов как инструменты для ИИ-агентов,
00:00:18превращая каждый сайт в мини-сервер MCP. Возможно, вы уже видели, как некоторые сайты
00:00:23запускают свои собственные серверы MCP, но здесь всё немного иначе. Его цель — позволить
00:00:27вашим агентам использовать сайт за вас, а не просто обращаться к API и выводить данные
00:00:32в чате. Всё будет работать целиком на фронтенде. Если это различие кажется вам
00:00:37немного запутанным, давайте перейдем к демо и обсудим, почему мне это нравится.
00:00:46Сразу признаюсь: само демо не будет выглядеть слишком захватывающе, но
00:00:49в этом и суть WebMCP. Он берет то, что уже возможно, и делает это
00:00:54в разы лучше. Так что не отключайтесь. У меня здесь версия Chrome Canary,
00:00:58в которой тестируют это предложение, а также сайт с настроенными
00:01:02инструментами WebMCP. Справа вы видите расширение, которое может взаимодействовать
00:01:06с этими инструментами, но представьте, что в будущем это будет просто ваш встроенный
00:01:10в браузер ИИ — Gemini, ChatGPT Atlas или во что там превратился ARC.
00:01:15Допустим, находясь на этом сайте, я отправляю запрос ИИ, что хочу
00:01:19забронировать перелет туда-обратно на двоих из Лондона в Нью-Йорк на конкретные даты.
00:01:23Я нажимаю «отправить», и система перенаправляет меня на страницу результатов. То есть ИИ
00:01:28воспользовался сайтом за меня. Невероятно, правда? Как я и говорил, выглядит очень просто,
00:01:33но секрет WebMCP в том, *как* он использовал этот сайт. Сейчас ИИ обычно
00:01:38использует сайты через Playwright, парсинг HTML или даже делает скриншоты,
00:01:42пытаясь взаимодействовать с ними как человек. Но всё это довольно неэффективно,
00:01:48особенно по расходу токенов, и всё равно чревато кучей ошибок. WebMCP призван
00:01:53это исправить. Вместо этого WebMCP позволяет разработчику сайта выставлять определенные
00:01:58MCP-инструменты, которые взаимодействуют с клиентским JavaScript. Вот и всё:
00:02:03когда ИИ решает применить такой инструмент, он просто запускает функцию JavaScript
00:02:07на вашем сайте, которую вы, как разработчик, разрешили выполнять. Посмотрите на пример
00:02:12этой страницы поиска авиабилетов: тут доступен один WebMCP-инструмент — search_flights.
00:02:16Он принимает такие аргументы, как пункт отправления, назначения и тип поездки, что
00:02:20полностью соответствует нашей форме на сайте. Главное, что ИИ теперь знает,
00:02:25что может использовать этот MCP-инструмент. Когда мы отправляем запрос, он не будет
00:02:29заполнять форму через Playwright или парсинг HTML. Ему вообще не нужно знать,
00:02:34как выглядит сайт или его HTML-код. Он просто знает, что у него есть этот
00:02:38инструмент WebMCP, и вызывает его с нужными аргументами. А я, как разработчик, уже задал,
00:02:43что именно произойдет при их получении: запускается JavaScript-функция,
00:02:47которая просто обновляет состояние React, и это приводит к переходу на страницу поиска.
00:02:52Если мы взглянем на код фронтенда, то увидим, что он невероятно прост, и всё
00:02:55сразу станет понятнее. Первым делом нам нужно зарегистрировать инструменты
00:02:59WebMCP, доступные для данной страницы, через window.navigator.model_context.
00:03:04Это тот самый API, который должен быть встроен в браузеры, если предложение
00:03:09будет принято. Сейчас он есть в Chrome Canary для тестов. Как только
00:03:13у нас появляется API model_context, мы регистрируем инструменты с помощью
00:03:18функции registerTool. В данном случае я регистрирую тот самый search_flights.
00:03:22Если посмотреть на определение самого инструмента, это простой объект.
00:03:26У него есть имя, описание (оно передается ИИ, чтобы тот знал, когда
00:03:30использовать этот инструмент) и схема входных данных, если нужны аргументы.
00:03:34У меня это были пункты отправления и назначения под стать форме. Мы также можем
00:03:38добавить контекст, чтобы ИИ лучше понимал, какими именно должны быть эти
00:03:42аргументы. Самая важная часть определения — функция execute. Это тот самый
00:03:47клиентский JavaScript, который сработает на сайте при вызове MCP-инструмента.
00:03:51Тут можно прописать что угодно. В моем случае используется функция searchFlights.
00:03:55Нам не обязательно вникать в детали реализации, но суть в том, что я беру
00:03:59параметры, которые ИИ подставил в аргументы, и создаю событие
00:04:03«searchFlights» с этими данными. Затем в коде React я просто
00:04:08добавляю слушатель для этого события. Когда оно происходит, срабатывает
00:04:12функция handleSearchFlights. Здесь мы можем делать всё, что позволяет
00:04:15React. Я принимаю параметры и устанавливаю их как параметры
00:04:19поиска, что запускает навигацию. Всё действительно так просто. И именно поэтому
00:04:24мне нравится такой подход: он не только экономит токены, но и позволяет мне
00:04:29самому задавать логику взаимодействия, а ИИ остается в рамках моих правил.
00:04:34Это отличное решение для сайтов, ориентированных и на людей, и на ИИ-помощников.
00:04:39Сейчас же мы строим сайт для людей, а для ИИ делаем отдельный MCP-сервер.
00:04:43И если ИИ нужно зайти на сайт, остается только надеяться, что он там как-нибудь разберется.
00:04:48Кстати, инструменты WebMCP полезны не только для запуска событий на странице,
00:04:51вроде навигации или заполнения форм. Они незаменимы,
00:04:55когда нужно считать информацию с экрана. Допустим, я сам зашел на сайт
00:05:00и выставил фильтры: цена до $500 и вылет до полудня.
00:05:05На странице всё еще много вариантов, и я хочу, чтобы ИИ
00:05:11помог мне выбрать лучший. Я спрашиваю: «Какой рейс на этой странице ты рекомендуешь?»
00:05:15Обычно ИИ пришлось бы использовать Playwright или парсинг HTML, чтобы прочитать
00:05:20всю страницу и попытаться структурировать эти данные. Но с WebMCP
00:05:24это не нужно. Вместо этого я, как разработчик, просто настроил
00:05:29инструмент WebMCP под названием list_flights. У него есть доступ к текущему состоянию
00:05:33React, а значит — ко всей информации, которую видит пользователь, но в удобном
00:05:38формате JSON. В итоге, если я отправлю ИИ такой запрос, он просто вызывает
00:05:42этот инструмент, получает список всех рейсов на странице и выдает
00:05:46нам рекомендацию, например, «рейс №56». И я сразу вижу этот рейс
00:05:51на экране. Это требует гораздо меньше токенов и работает намного точнее.
00:05:56Напоследок я хочу показать, как использовать WebMCP вообще без
00:06:00написания JavaScript. До этого мы использовали императивный API, где я сам
00:06:05прописывал код для обработки вызовов и регистрации каждого инструмента.
00:06:10Но есть и второй вариант — декларативный API. Он гораздо проще и создан
00:06:14специально для обычного заполнения HTML-форм. Вот у меня простая форма
00:06:19бронирования столика. Я могу просто попросить ИИ заказать мне стол, указав
00:06:23необходимые данные, и он сам заполнит эту форму за меня.
00:06:27Это возможно, потому что у него есть доступ к инструменту book_table.
00:06:32Но самое важное — я не писал ни строчки JavaScript для этого инструмента.
00:06:36Декларативный API WebMCP работает так: вы просто добавляете
00:06:40атрибуты названия и описания инструмента прямо в HTML-тег <form>.
00:06:44А браузер сам превращает форму в MCP-инструмент, пытаясь понять,
00:06:49какие поля ввода соответствуют аргументам инструмента. Здесь мы видим
00:06:53имя «book_table» и описание у нашей формы бронирования. ИИ понимает,
00:06:57когда её вызывать, хотя это обычная HTML-форма. Единственное отличие —
00:07:02в полях ввода. Мы добавили атрибут tool-param-description, чтобы
00:07:06дать ИИ чуть больше контекста о том, как заполнять данные. В остальном же
00:07:10браузер сам берет тип поля, его имя и создает на их основе
00:07:14MCP-инструмент. Это видно в инспекторе: аргументы определены верно —
00:07:18имя, телефон, дата, время, количество гостей и пожелания.
00:07:23Всё это работает на логике HTML-форм, при этом я не написал ни строчки кода.
00:07:27Вот, пожалуй, и всё, что представляет собой проект WebMCP на данный момент.
00:07:31Я настроен оптимистично. Мне нравится, как он сокращает дистанцию между сайтами
00:07:34и ИИ-агентами, убирает элемент угадывания при работе ИИ с сайтом и гарантирует,
00:07:38что все действия четко заданы разработчиком. К тому же, я еще не окончательно
00:07:43«помешан» на ИИ. Мне нравится, когда инструмент помогает ИИ работать вместе
00:07:47со мной, а не вместо меня. Мне не хочется бронировать билеты или рестораны
00:07:51исключительно в интерфейсе ChatGPT. Я предпочитаю сам зайти на сайт через браузер,
00:07:56и если нужно, попросить ИИ помочь мне прямо там. Эта система гораздо лучше
00:08:00сохраняет контроль за человеком и дает разработчикам право определять этот опыт.
00:08:05Но не забывайте, что пока это только предложение. Пройдет время, прежде чем
00:08:08оно появится в браузерах. Есть и нерешенные вопросы,
00:08:12например, безопасность. На сайтах могут быть вредоносные инструменты или
00:08:16описания. Сколько доступа к личным данным получит ИИ и насколько он сможет
00:08:21контролировать весь браузер? Если такой «отравленный» инструмент выйдет из-под
00:08:25контроля, какой ущерб он нанесет? Надеюсь, решение найдется,
00:08:29ведь сама идея мне очень нравится. Пишите в комментариях, что думаете вы.
00:08:33Подписывайтесь, и, как всегда, до встречи в новом видео!