Интеграция ИИ-агентов с состоянием приложения через протокол WebMCP в Chrome DevTools

Протокол WebMCP и регистрация инструментов на клиенте

Вместо того чтобы заставлять ИИ парсить DOM, новый стандарт WebMCP предлагает взаимодействовать с веб-приложениями через машиночитаемые действия. Под капотом Chrome DevTools MCP server ищет кастомные инструменты через событие `devtoolstooldiscovery` на глобальном объекте `window`. Это событие триггерится автоматически при навигации или смене страницы, а также вызывается вручную через MCP-инструмент `list_3p_developer_tools`.

Чтобы агент увидел ваши внутренние структуры данных, приложение или библиотека должны подписаться на это событие и вернуть `ToolGroup` — группу инструментов с описанием, схемой входных параметров и функцией выполнения.

Примерная схема регистрации очередного костыля для отладки выглядит так:

```javascript

window.addEventListener('devtoolstooldiscovery', (event) => {

// Возвращаем ToolGroup с описанием и исполняемой функцией

return {

name: 'app_state_helper',

tools: [{

name: 'get_runtime_context',

description: 'Возвращает внутреннее состояние приложения',

inputSchema: {... },

execute: => {

// Выполняется в контексте страницы

return window.__APP_STATE__;

}

}]

};

});

```

Учтите ограничение: несериализуемые объекты напрямую передавать между страницей и DevTools for agents нельзя. Исключение сделано только для DOM-элементов — DevTools сопоставляет их по UID, полученным через `take_snapshot`.

Отладка Angular и React без парсинга DOM

Агент вызывает зарегистрированный инструмент через `execute_3p_developer_tool`, а DevTools валидирует входные параметры по описанной схеме. Если нужно выполнить сложную цепочку действий без лишних сетевых транзакций между агентом и браузером, используется метод `evaluate_script` — агент просто передает кусок JS-кода для выполнения прямо на странице.

Google уже обкатал эту схему совместно с командой Angular. Для агентов выкатили два инструмента:

1. Signal Graph — показывает связи между стейтом и представлением. Помогает агенту находить циклические зависимости, которые приводят к бесконечным обновлениям интерфейса.

2. Dependency Injection Graph — дает доступ к инжекторам во время выполнения. Поскольку DI-граф существует только в рантайме, статический анализ кода тут бесполезен. Без этого инструмента агент не поймет, почему упал DI-провайдер.

Разработчики React тоже начали экспериментировать со сторонними инструментами для DevTools for agents.

Как вызвать инструменты в сессии отладки

Для работы со сторонними инструментами вам понадобятся вызовы к MCP-серверу DevTools. Сначала запрашиваем список доступных методов, затем дергаем нужный:

```json

// 1. Получить список сторонних инструментов

list_3p_developer_tools

// 2. Запустить выбранный инструмент на странице

execute_3p_developer_tool {

"tool_name": "get_runtime_context",

"arguments": {}

}

```

Если вы надеетесь, что ИИ-агенты теперь сами починят все ваши баги в рантайме без вашего участия — снимите розовые очки. Без вменяемой разметки инструментов и понимания жизненного цикла приложения вы получите только бесконечный цикл выполнения и счета за токены. Пишите тесты и делайте бэкапы перед каждым деплоем.