00:00:00ИИ-агенты начали проникать во все сферы нашей жизни.
00:00:03И одна из самых значимых областей, где это произошло — браузер.
00:00:06Каждая крупная ИИ-компания осознала, что браузер — это тот инструмент, которым пользуются
00:00:11абсолютно каждый день.
00:00:12Так почему бы не внедрить в него искусственный интеллект?
00:00:14Но, честно говоря, все текущие решения работают плохо.
00:00:15И дело здесь не в оптимизации.
00:00:17Существует фундаментальная проблема, которую не исправить никакими доработками.
00:00:20Однако Google в сотрудничестве с Microsoft только что представили проект WebMCP.
00:00:24Вместо того чтобы учить агентов лучше пользоваться сайтами, он делает сайты удобнее
00:00:29для общения с агентами.
00:00:30Это принципиально иной подход.
00:00:32И он открывает возможности, которых мы раньше не видели.
00:00:35Перед вами простая HTML-страница, запущенная на локальном сервере.
00:00:38Откроем вкладку расширений, здесь у нас установлено расширение WebMCP.
00:00:41При его открытии под названием сайта виден один инструмент — BookTable.
00:00:45Мы подключили мост WebMCP к Claude Code и сообщили ему, что у нас открыта
00:00:49форма бронирования столика с доступными инструментами WebMCP.
00:00:52Мы дали задание забронировать столик на двоих, указав дату, имя и особое пожелание.
00:00:57Все эти поля присутствуют в форме.
00:00:59Он подтвердил дату, использовал инструмент WebMCP, предоставленный сайтом, заполнил поля
00:01:03и успешно оформил бронирование.
00:01:06Сейчас у агента есть два способа понять, что происходит на экране.
00:01:09Первый — на основе компьютерного зрения.
00:01:11Агент делает скриншот всей страницы, размечает каждый видимый элемент
00:01:15и передает изображение модели, которая пытается понять, куда нужно нажать.
00:01:19Второй способ — парсинг DOM-дерева.
00:01:21Агент извлекает исходный HTML-код страницы.
00:01:24Если вы когда-нибудь открывали «Просмотр кода элемента» на любом сайте, вы знаете, как это выглядит.
00:01:28Тысячи строк кода.
00:01:29Агент прочитывает всё это и пытается найти нужную кнопку.
00:01:33Оба этих подхода имеют одну и ту же фундаментальную проблему.
00:01:35Они не детерминированы.
00:01:36Агент каждый раз делает лишь предположение, основанное на догадках.
00:01:39Причина, по которой это не работает стабильно, в том, что весь интернет создавался
00:01:43для человеческих глаз.
00:01:45Каждый сайт подразумевает, что на него смотрит человек.
00:01:47Там нет структуры, понятной машинам.
00:01:48Поэтому любой агент, какой бы хорошей ни была модель, вынужден интерпретировать то,
00:01:53что никогда не предназначалось для машинного восприятия.
00:01:55С WebMCP вместо того, чтобы агент гадал, как устроен ваш сайт, сам сайт регистрирует
00:02:00свои доступные действия как инструменты.
00:02:01Когда агент заходит на страницу, он не гадает.
00:02:04Он просто считывает список инструментов и вызывает их напрямую.
00:02:07На данный момент WebMCP доступен только в режиме раннего превью.
00:02:10По мере развития «агентного веба», сайты также должны эволюционировать.
00:02:13И, как вы уже видели, определяя эти инструменты, мы даем агентам более эффективные
00:02:18способы взаимодействия с нашими ресурсами.
00:02:19Демонстрация сработала, потому что это была простая HTML-форма.
00:02:21Но большинство реальных сайтов устроены гораздо сложнее.
00:02:23Поэтому WebMCP предлагает два разных подхода в зависимости от ваших задач.
00:02:28Существует два метода, позволяющих агентам брать управление браузером на себя.
00:02:31Declarative API предназначен для простых рабочих процессов, вроде тех HTML-форм, что вы видели.
00:02:35Imperative API нужен для полноценных веб-приложений с множеством страниц, и они требуют
00:02:40дополнительной реализации, которую мы разберем чуть позже.
00:02:43На данный момент официальной документации нет, но есть репозиторий WebMCP
00:02:48в Google Chrome Labs с двумя демо-примерами, и лишь один из них реально размещен в сети.
00:02:52Там есть простое демо поиска авиабилетов и официальное расширение Marvel context tool inspector.
00:02:56После его установки на любых сайтах с поддержкой WebMCP вы сможете обнаруживать
00:03:01инструменты через расширение и делать другие крутые вещи.
00:03:05Схема входных данных для инструментов отображается прямо там.
00:03:07Сейчас на этой странице только один инструмент — поиск авиабилетов.
00:03:10Разработчики предложили два варианта использования.
00:03:12Вы можете либо вручную задать аргументы, которые должна заполнить ИИ-модель, либо
00:03:16указать свой API-ключ Gemini, ввести запрос на обычном английском, и страница будет
00:03:21управляться в соответствии с ним.
00:03:22Вот текущие входные данные по умолчанию.
00:03:24Мы их заменили, и система действительно выполнила поиск билетов, выдав кучу результатов.
00:03:28Затем я вернулся назад, и на этот раз на туристическом сайте WebMCP было доступно уже четыре
00:03:32инструмента, три из которых теперь — фильтры.
00:03:35Входные аргументы для страницы также изменились.
00:03:37Я добавил еще один аргумент, и мы получили уведомление об обновлении настроек фильтра.
00:03:41Билетов по этим фильтрам не нашлось, но все параметры были применены корректно.
00:03:44В процессе мы переключались между Zen browser и Chrome. Это потому что, хотя WebMCP
00:03:48выпущен как открытый протокол для любого браузера, сейчас он работает только
00:03:54в версии Chrome Canary.
00:03:55Это продлится до тех пор, пока они не утвердят стандарт для всеобщего использования.
00:03:58Вот так на сегодня обстоят дела с официальным инструментарием.
00:04:01Документации нет, всего два демо, работает только в Chrome Canary, и его нельзя
00:04:05использовать напрямую с Claude Code, так как он предназначен для браузерных агентов.
00:04:09Но мы нашли кастомный мост WebMCP, который можно установить в систему, и он
00:04:14дает вам как сервер MCP, так и расширение.
00:04:16Именно это позволяет Claude Code использовать WebMCP для навигации и работы с инструментами,
00:04:22которые предлагает любой сайт.
00:04:23Чтобы показать, как сайты внедряют это, начнем с более простого подхода.
00:04:27В Declarative API, который вы видели на примере HTML-формы, всё, что вам нужно — это
00:04:31объявить три вещи внутри формы: название инструмента, описание инструмента и описание
00:04:36параметров инструмента.
00:04:37Вам не нужно глубоко в них погружаться.
00:04:39Просто убедитесь, что ваш агент добавляет их в код.
00:04:41Мы подготовили два руководства, созданных на основе репозитория WebMCP, и дали Claude Code
00:04:46доступ к ним.
00:04:47В процессе мы столкнулись с типичными проблемами и исправляли эти
00:04:51руководства по ходу дела.
00:04:53Оба они доступны в AI Labs Pro — нашем сообществе, где вы получаете готовые
00:04:57к использованию шаблоны.
00:04:58Их можно сразу внедрять в проекты по этому видео и всем предыдущим.
00:05:01Вся обучающая часть есть в этом видео, но если вам нужны сами файлы, ссылки
00:05:05в описании.
00:05:06Если ваш агент добавляет эти объявления, остальное берет на себя браузер,
00:05:10который считывает их прямо из HTML.
00:05:12Второй способ — Imperative API для случаев, когда требуются сложные взаимодействия
00:05:17и выполнение JavaScript.
00:05:18Мы инициализировали приложение на Next.js, дали Claude Code руководство по Next.js, и этого
00:05:23хватило для реализации.
00:05:24В React-приложениях он создает новый файл в папке библиотеки, где объявляет все инструменты,
00:05:29необходимые сайту.
00:05:30Здесь находятся все функции и их определения.
00:05:33Но поскольку веб-приложения могут быть огромными и содержать более сотни инструментов,
00:05:38возникает та же проблема, что и в Claude Code: контекст перегружается
00:05:41и всё ломается.
00:05:43Поэтому вместо загрузки всех инструментов сайта лучше подгружать только те,
00:05:47которые относятся к текущей странице.
00:05:48Эта концепция называется контекстной загрузкой.
00:05:50Вот приложение на Next.js, которое создал Claude Code.
00:05:53Это полностью функциональное небольшое демо с реализованным бэкендом.
00:05:57Сейчас мы на главной странице, и здесь доступно только 3 инструмента.
00:06:01Я перешел в корзину, и на этот раз у нас уже 4 инструмента, и названия тоже изменились.
00:06:05Набор инструментов меняется в зависимости от страницы, на которой вы находитесь.
00:06:09Здесь и вступают в дело функции регистрации.
00:06:11Когда вы заходите на страницу, например главную, запускается функция registerHomeTools,
00:06:15а когда уходите — unregisterHomeTools.
00:06:18Она просто регистрирует и отменяет регистрацию инструментов конкретной страницы.
00:06:23В данном случае всё зависит не только от браузера — сам код управляет
00:06:27интеграцией.
00:06:28На самом деле мы не используем WebMCP с браузерным агентом, как того хочет Google
00:06:32и как планирует реализовать каждый браузер.
00:06:34Мы используем мост, соединяющий Claude Code с WebMCP, и именно так управляем
00:06:39веб-сайтами.
00:06:40Если вы хотите выжать максимум из самого Claude Code, у нас есть видео о 10
00:06:44самых актуальных способах получить преимущество с его помощью.
00:06:46Этот мост — проект сообщества, и с Imperative API у него есть проблема:
00:06:51переключение инструментов не совсем корректно работает с этим MCP-сервером.
00:06:54Когда я открыл сайт, мы были на странице оформления заказа, и там инициализировали сессию.
00:06:59Когда мы попросили его вернуться на главную, он не смог увидеть инструменты, доступные там.
00:07:04Мы были на главной, я перешел на страницу товара, и там появилась кнопка «Добавить в корзину».
00:07:08Но, находясь на странице товара, агент не смог распознать эту кнопку.
00:07:11Так что нам пришлось вручную добавить товар в корзину для демонстрации.
00:07:14Но когда мы попросили его завершить заказ, он автоматически заполнил данные,
00:07:18разместил заказ и прошел весь путь покупки.
00:07:21Это одно из ограничений текущего MCP, что подводит нас к другому моменту.
00:07:25WebMCP — проект с открытым исходным кодом, где в участниках значатся крупные разработчики браузеров.
00:07:30Но сейчас единственный браузер с поддержкой — Chrome Canary, а основной агент —
00:07:34Gemini, собственный ИИ от Google, встроенный прямо в браузер.
00:07:38Если вы владелец сайта и внедрите WebMCP сегодня, единственным агентом, способным
00:07:42использовать ваши инструменты нативно, будет Gemini.
00:07:44Для Claude Code нужен мост от сообщества, который ломается при контекстной загрузке.
00:07:49Все сторонние агенты оказываются в невыгодном положении.
00:07:51Сможет ли Claude догнать их?
00:07:52Конечно, у них есть свое расширение для браузера.
00:07:55И раз это тоже браузерный агент, он потенциально сможет находить инструменты так же,
00:07:59как это делает Gemini.
00:08:00Но вопрос в том, сколько людей захотят специально устанавливать расширение Claude,
00:08:04вместо того чтобы использовать Gemini, который уже встроен в Chrome.
00:08:08У Chrome миллиарды пользователей, им ничего не нужно устанавливать.
00:08:11На наш взгляд, Google никого не блокирует.
00:08:13Они просто используют архитектуру и аудиторию, которая у них уже есть.
00:08:17Открытый стандарт, который лучше всего работает в их браузере
00:08:21с их собственным агентом.
00:08:22Но это не значит, что вам не стоит его внедрять.
00:08:23Сам стандарт действительно полезен, и делать свой сайт доступным для агентов — разумно,
00:08:28независимо от того, какой агент извлечет выгоду первым.
00:08:30Вот несколько вещей, которые стоит знать при внедрении.
00:08:33Спецификация рекомендует не более 50 инструментов на страницу.
00:08:36Это не способ выставить наружу всё ваше приложение.
00:08:38Это нужно для конкретных, целенаправленных действий, которые пользователь
00:08:42действительно захочет совершить на этой странице.
00:08:43Описания инструментов также значат больше, чем кажется.
00:08:46Агенты читают их, чтобы решить, какой инструмент вызвать.
00:08:49Из-за размытых описаний агент выберет не то или вовсе пропустит инструмент.
00:08:53Пишите их так, будто объясняете действие человеку, который никогда не видел ваш сайт.
00:08:57И помните, это всё еще эксперимент.
00:08:58API будет меняться.
00:09:00Chrome 146 выйдет в марте с более широкой поддержкой.
00:09:03Но до тех пор это лишь пробная версия для разработчиков.
00:09:05Не выпускайте это в продакшн прямо сейчас.
00:09:06Если вы следите за каналом, то знаете, что для ИИ нужен крепкий технический фундамент.
00:09:11Именно поэтому я люблю платформу Brilliant.
00:09:13Это интерактивная площадка с практическими уроками от преподавателей мирового уровня
00:09:17из MIT, Гарварда и Стэнфорда.
00:09:19Очень рекомендую их курсы по кластеризации и классификации, а также по работе ИИ.
00:09:23Они учат находить скрытые паттерны и понимать логику больших языковых моделей
00:09:27в интерактивной форме.
00:09:28Как видно в каталоге на экране, у них огромное разнообразие курсов — от
00:09:33базовой математики до продвинутого анализа данных и программирования.
00:09:37Brilliant дарит нашим зрителям скидку 20% на годовую премиум-подписку,
00:09:42дающую неограниченный ежедневный доступ ко всему контенту.
00:09:44Чтобы учиться бесплатно в течение 30 дней, переходите на brilliant.org/ailabs, сканируйте
00:09:50QR-код на экране или кликайте по ссылке в описании.
00:09:53Начните учиться сегодня и поднимите свои навыки на новый уровень вместе
00:09:56с Brilliant.
00:09:57На этом наше видео подходит к концу.
00:09:59Если хотите поддержать канал и помочь нам выпускать подобные ролики,
00:10:03воспользуйтесь кнопкой «Суперспасибо» ниже.
00:10:06Как всегда, спасибо за просмотр, и увидимся в следующем выпуске!