Как я добавил в браузерного AI-агента поддержку MCP за вечер

Как я добавил в браузерного AI-агента поддержку MCP за вечер

Habr AI

n0x — это open-source AI-воркстейшн, который работает полностью в браузере. Всё — от LLM и RAG до Python-песочницы и генерации изображений — запускается через WebGPU и WASM. Никакого сервера, никаких API-ключей. Ваши данные не покидают устройство.

Проблема: агент только разговаривал

Проект уже много умеет, но до недавнего времени его возможности ограничивались диалогом. Агент мог вызывать внутренние инструменты — поиск, Python, память, — но не взаимодействовал с внешним миром.

Мне хотелось, чтобы фраза «открой Хабр» приводила к реальному открытию вкладки с habr.com. Для этого я решил добавить поддержку MCP.

Что такое MCP (Model Context Protocol)

MCP — это протокол, позволяющий LLM-приложениям вызывать внешние инструменты через стандартизированный интерфейс. Его разработали в Anthropic (создатели Claude), но он быстро стал стандартом во всей экосистеме ИИ.

Принцип прост:

  • MCP Server — отдельный процесс, предоставляющий набор инструментов.
  • Например, chrome-devtools-mcp позволяет управлять браузером: открывать URL, делать скриншоты, выполнять JavaScript.
  • LLM в своём ответе формирует специальный объект вызова.
  • MCP-клиент перехватывает его, обращается к серверу, получает результат и передаёт обратно модели для финального ответа.

Интеграция MCP в n0x

В n0x используется стек: React + Zustand + Web Workers. Чтобы не блокировать интерфейс, MCP-клиент запущен в отдельном воркере.

Архитектура включает несколько уровней:

  • UI — отображает панель управления инструментами (McpToolDrawer).
  • useAgent.ts — парсит ответы LLM и инициирует вызовы инструментов.
  • useMCP.ts — Zustand-хранилище и связь с воркером.
  • mcp.worker.ts — выполняет HTTP-запросы к MCP-серверу.
  • MCP Server — внешний процесс, например, chrome-devtools-mcp.

Ключевые части реализации

1. Подключение к MCP-серверу (mcp.worker.ts)

Реализация проста: создаётся транспорт, подключается клиент, получается список доступных инструментов через стандартный MCP-интерфейс.

2. Парсинг команд (useAgent.ts)

Сложность была в том, чтобы научить LLM понимать естественный язык и возвращать структурированный вызов, а не просто текст. Например, фраза «открой Яндекс» теперь преобразуется в корректный вызов инструмента.

3. Алиасы для удобства (useChat.ts)

После загрузки MCP-инструментов я добавил короткие алиасы. Теперь можно писать «open google.com» вместо полного имени chrome_devtools_navigate.

4. Системный промпт с инструкциями

Чтобы модель понимала, когда и какие инструменты использовать, в системный промпт была добавлена специальная секция с описанием доступных действий и условиями их вызова.

Опыт пользователя

  1. Пользователь пишет: «открой хабр».
  2. Агент распознаёт команду и вызывает MCP-инструмент navigate.
  3. Chrome открывает новую вкладку с habr.com.
  4. Агент отвечает: «✓ Открыл https://habr.com».

Всё происходит быстро и без дополнительных действий.

Настройка подключения

Для работы нужна связка из двух процессов — мост между n0x и Chrome:

  • Запустите Chrome с включённым remote debugging.
  • Проверьте, что браузер доступен по http://localhost:9222.
  • Запустите supergateway с подключённым chrome-devtools-mcp.
  • Укажите в n0x путь к MCP-инструментам: http://localhost:8080/mcp.

Готово.

Что дальше?

Пока реализовано только открытие URL. Но MCP открывает гораздо больше возможностей:

  • Скриншоты — «сделай скриншот текущей страницы».
  • Выполнение JS — «найди на странице все заголовки h1».
  • Взаимодействие с DOM — «кликни на кнопку “Войти”».
  • Заполнение форм — «заполни поле поиска словом “MCP”».

Цель — создать полноценного AI-ассистента, который реально работает в браузере, а не просто ведёт диалог.

За один вечер я добавил в n0x поддержку MCP. Главное, что понял: MCP — это мост между LLM и реальным миром. И этот мост уже можно запустить прямо в браузере. Исходный код доступен в открытом репозитории n0x.

Читать оригинал