Persona — это open-source VanillaJS библиотека для создания AI-агентных интерфейсов на вебе

Persona — VanillaJS Agent UI Library: что это и где применяется

Что такое Persona?

Persona — это open-source VanillaJS библиотека для создания AI-агентных интерфейсов на вебе. Разрабатывается командой Runtype. Лицензия — MIT.

Суть проекта: одна npm-установка или один script-тег даёт готовый чат-виджет, который подключается к любому SSE-совместимому AI-бэкенду.

Ключевые характеристики:

• Zero framework lock-in — чистый JavaScript без зависимостей от React/Vue/Svelte
• Три режима встраивания: floating (уголок), docked (боковая панель), fullscreen (полноэкранный)
• Shadow DOM изоляция — стили виджета не влияют на сайт и наоборот
• SSE streaming с плагинными парсерами
• WebMCP — агент может вызывать функции, зарегистрированные на странице
• Система тем — три слоя токенов (палитра, семантика, компоненты), тёмная тема, live-редактор
• Плагинная архитектура — 14 хуков рендеринга для кастомизации
• Поддержка голосового ввода/вывода

Где применяется и для чего

1. Customer Support / Чат поддержки

Самый распространённый сценарий. Floating-виджет в углу страницы заменяет традиционные чаты поддержки на AI-агента, который отвечает на вопросы, ищет в документации, создаёт тикеты.

2. Copilot внутри веб-приложений

Docked-режим — ассистент закреплён сбоку от рабочей области CRM, редактора или админки. Агент помогает искать данные, заполнять формы, генерировать контент и управлять интерфейсом через WebMCP-инструменты.

3. Полноценный AI-интерфейс (fullscreen)

Persona используется как основа для полноэкранного assistant-интерфейса. Подходит для internal tools, AI-терминалов и аналитических дашбордов.

4. Онлайн-коммерция

Агент помогает покупателю искать товары, добавлять в корзину и оформлять заказ — прямо из чата, используя существующие функции сайта.

5. Образовательные платформы

Агент объясняет материал, проверяет задания, генерирует тесты. Voice I/O добавляет голосовое взаимодействие.

6. B2B и корпоративные порталы

Persona встраивается в сложные бизнес-приложения, где агент работает с корпоративными данными, бронированием, созданием документов.

Почему стоит выбрать Persona вместо самописного решения?

Задача	Самописное решение	Persona
Парсинг SSE, буферизация чанков	Месяц разработки	Из коробки
Система тем, тёмная мода	Недели	Токены + Live Editor
UI для tool calls и approval flows	Месяц	Готовые компоненты
Сбор фидбека, аналитика	Недели	PostHog-ready
Интеграция с бэкендом	Выбор и адаптация	10+ готовых примеров

Для кого

• Frontend-разработчикам — не нужно писать UI чата, достаточно встроить виджет
• Backend-разработчикам — достаточно SSE-совместимого бэкенда, фронтенд готов
• Продуктовым командам — быстрая итерация от прототипа до продакшена за дни
• Стартапам — не нужно содержать отдельного фронтенд-инженера для чата

Технологический стек

• Библиотека: VanillaJS + TypeScript
• Протокол: SSE + WebMCP
• Бэкенды: любые (OpenAI Agents SDK, LangGraph.js, Vercel AI SDK, Hono, Express, SvelteKit и др.)
• Установка: npm install @runtypelabs/persona или script-тег с CDN
• CLI: npx @runtypelabs/cli@latest persona init — создание агента и токена за 2 команды

Ссылки

• Сайт проекта: persona-chat.dev
• GitHub: github.com/runtypelabs/persona
• npm: @runtypelabs/persona
• Документация: GitHub Docs
• Блог: Ship an AI Chat Agent in Minutes, Not Months
• Лицензия: MIT