Persona.js

Persona: Библиотека Agent UI на VanillaJS для создания агентских интерфейсов

В современную эпоху развития искусственного интеллекта взаимодействие пользователя с веб-интерфейсами стремительно меняется. Persona — это передовая библиотека Agent UI, разработанная на чистом JavaScript (VanillaJS), которая позволяет создавать глубоко интегрированные интерфейсы для ИИ-агентов. Будучи нативным решением для стандарта WebMCP, Persona обеспечивает легкость, расширяемость и бесшовную работу с любым стеком технологий.

Что такое Persona?

Persona представляет собой библиотеку для создания интерфейсов агентов, которая работает непосредственно в браузере. В отличие от тяжеловесных фреймворков, Persona написана на VanillaJS, что делает ее невероятно производительной и совместимой с любым современным веб-приложением.

Основная философия Persona заключается в предоставлении «агентского» опыта (agentic experiences). Это означает, что ваш ИИ-помощник не просто ведет диалог, а активно взаимодействует с элементами страницы, управляет корзиной покупок, осуществляет поиск или бронирование. Благодаря поддержке WebMCP, Persona превращает ваш чат-интерфейс в полноценный пульт управления приложением.

Ключевые особенности Persona

Библиотека Persona обладает рядом уникальных характеристик, которые делают ее идеальным выбором для разработчиков, стремящихся внедрить ИИ-ассистентов:

1. Универсальность стека и SSE

Persona работает на любом стеке. Она поддерживает потоковую передачу данных через SSE (Server-Sent Events) с подключаемыми парсерами. Вы можете адаптировать любой формат запроса или события с помощью customFetch и parseSSEEvent. Это позволяет подключать библиотеку к любому бэкенду, будь то Node.js, Python или специализированные ИИ-платформы.

2. Изоляция стилей (Shadow DOM)

Одной из главных проблем при внедрении виджетов является конфликт стилей. Persona использует Shadow DOM и префиксный CSS, что гарантирует полную изоляцию стилей виджета от стилей хост-страницы. Никакие стили вашего сайта не «просочатся» внутрь Persona, и наоборот.

3. Нативная поддержка WebMCP

WebMCP предоставляет браузеру стандартное место для инструментов страницы через document.modelContext. Persona автоматически обнаруживает эти инструменты, запрашивает одобрение пользователя перед их вызовом и передает результаты обратно в диалог. Это позволяет агенту буквально «управлять» вашим приложением.

4. Гибкая система тем

Библиотека включает в себя трехуровневое дерево токенов (палитра, семантика, компоненты), поддержку темной темы и живой редактор тем (Theme Editor). Вы можете настроить внешний вид Persona так, чтобы он полностью соответствовал вашему бренду, без необходимости форка библиотеки.

Варианты макетов (UX Layouts)

Persona предлагает три основных Jump-off точки для вашего интерфейса, между которыми можно переключаться простым изменением конфигурации:

• Floating (Плавающий): Лаунчер в углу экрана, открывающий панель. Идеально подходит для поддержки, документации, продаж или онбординга. Не требует настройки макета страницы.
• Docked (Закрепленный): Панель «копилота», закрепленная рядом с вашим приложением.
• Fullscreen (Полноэкранный): Полноценный интерфейс ассистента на весь экран.

Как использовать Persona

Интеграция Persona в ваш проект максимально упрощена. Вы можете выбрать путь установки через менеджер пакетов или обычный скрипт.

Установка через NPM

Для начала работы установите пакет:

npm install @runtypelabs/persona

Быстрый старт (Floating Widget)

Инициализация базового виджета чата требует всего нескольких строк кода:

import "@runtypelabs/persona/widget.css";
import { initAgentWidget } from "@runtypelabs/persona";

initAgentWidget({
  target: "#chat",
  config: {
    apiUrl: "https://your-api.com/chat",
    // плавающий лаунчер используется по умолчанию
  },
});

Регистрация инструментов через WebMCP

Чтобы агент мог взаимодействовать с вашей страницей, зарегистрируйте инструменты:

document.modelContext.registerTool({
  name: "search_products",
  description: "Поиск по каталогу товаров.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string" },
    },
    required: ["query"],
  },
  async execute({ query }) {
    return searchCatalog(query);
  },
});

Варианты использования (Use Case)

Persona подходит для широкого спектра бизнес-сценариев и технических реализаций:

• E-commerce (WebMCP Storefront): Агент помогает пользователям находить товары и добавлять их в корзину.
• Планирование (WebMCP Calendar): Интеграция с календарем для автоматизации бронирования.
• Поддержка клиентов (Bakery Assistant): Создание специализированных ассистентов для ответов на вопросы и помощи в оформлении заказов.
• Инструменты продуктивности: Использование Persona в качестве боковой панели (Artifact Sidebar) для работы с документами или слайдами.
• Голосовая интеграция: Создание интерфейсов с поддержкой распознавания речи.

Интеграция с популярными бэкендами

Persona легко соединяется с различными технологиями через готовые примеры:

• Vercel AI SDK: Использование инструментов WebMCP на бэкенде AI SDK.
• OpenAI Agents: Работа с OpenAI Agents SDK (@openai/agents).
• LangGraph.js: Потоковая передача графов LangGraph в виджет.
• SvelteKit, Hono, Express: Быстрое развертывание на популярных серверных фреймворках.

Часто задаваемые вопросы (FAQ)

Влияет ли Persona на производительность моего сайта? Нет, Persona — это легковесная библиотека на чистом JavaScript. Использование Shadow DOM гарантирует, что она не будет конфликтовать с другими скриптами и стилями на странице.

Обязательно ли использовать Runtype для работы Persona? Хотя Runtype предоставляет быстрый путь для настройки, Persona поддерживает любые SSE-бэкенды. Вы можете настроить собственные парсеры для любого формата данных.

Может ли агент выполнять действия на странице автоматически? Persona спроектирована с учетом безопасности: встроенная система одобрения действий (Tool Approval) гарантирует, что агент выполнит инструмент только после подтверждения пользователем.

Как изменить цвета виджета? Вы можете использовать встроенный Theme Editor или настроить токены в CSS, чтобы Persona идеально вписалась в дизайн вашего приложения.

Persona — это будущее фронтенд-разработки для ИИ, предоставляющее разработчикам мощные инструменты для создания по-настоящему умных и интерактивных веб-интерфейсов.