# Persona

> A themeable, pluggable VanillaJS AI chat widget for websites with WebMCP support, streaming, voice I/O, tool approvals, and zero framework dependencies.

Persona is an open-source AI chat widget library built in TypeScript with zero framework dependencies, published under the MIT License by Travrse Labs, LLC (d/b/a Runtype). It renders using Vanilla JS and is designed to drop into any website or web app — alongside React, Vue, or any other frontend framework — to deliver agentic chat experiences. The latest release is `@runtypelabs/persona@4.4.2`, published June 24, 2026.

## What It Is

Persona is a frontend UI library for embedding AI assistants into web pages. It ships as an npm package (`@runtypelabs/persona`) and also supports a no-build-step `<script>` tag install via jsDelivr CDN. The core job is rendering a chat widget — floating launcher, docked side panel, or fullscreen layout — that connects to any SSE-capable backend and handles streaming responses, tool calls, voice input/output, file attachments, and more. It is WebMCP-native, meaning it can discover and invoke tools registered on the page via `document.modelContext` without any backend integration.

## Three Primary Layouts

Persona supports three layout modes, switched by changing the `launcher` config rather than the agent or app code:

- **Floating** (default): a launcher button in the corner that opens a floating panel — the entry point for support, docs, sales, or onboarding.
- **Docked**: a copilot panel docked beside a page region, with four reveal modes (`resize`, `emerge`, `overlay`, `push`).
- **Fullscreen**: a full-height assistant that owns the page, with an optional resizable artifact split pane.

## WebMCP and Agentic Page Control

Persona is built around the WebMCP standard, which gives the browser a standard place for page tools at `document.modelContext`. Pages register tools (search, cart, calendar, forms) via `document.modelContext.registerTool()`, and Persona discovers them, presents them to the agent, and enforces a human-in-the-loop approval gate before any mutating tool executes. Read-only tools can be auto-approved; mutating tools surface an approval bubble. Parallel tool calls in a single turn each get their own approval bubble, and results are batched into a single `/resume` request. This means storefront catalogs, calendar copilots, slide editors, and dashboard assistants can all be driven by the agent using tools that live entirely in page JavaScript — no backend changes required.

## Backend Agnosticism and Adapter Ecosystem

Persona works with any SSE-capable backend. The repository ships pre-built example adapters for:

- Vercel AI SDK (with WebMCP and OpenAI Responses)
- OpenAI Agents SDK (`@openai/agents`)
- LangGraph.js (`@langchain/langgraph`)
- Hono (Node, Bun, Deno, Cloudflare Workers)
- Express, SvelteKit, bare `node:http`
- Vercel Eve (beta)

Additional adapters for Anthropic Claude Agent SDK, Google Gen AI, Mastra, and Cloudflare Agents live in the companion `runtypelabs/persona-examples` repository. For teams that prefer no backend at all, a `clientToken` embed against a hosted Runtype backend is available via the `@runtypelabs/cli` setup path.

## Feature Depth

Beyond basic chat, Persona ships a broad set of opt-in capabilities:

- **Streaming**: SSE with pluggable parsers (plain text, JSON, XML, regex) and eight reveal animations (typewriter, word-fade, letter-rise, glyph-cycle, wipe, pop-bubble, and custom plugins)
- **Voice I/O**: speech-to-text via Web Speech API or Runtype's WebSocket voice service with barge-in; TTS via a pluggable `SpeechEngine`
- **Reasoning display**: collapsible chain-of-thought bubbles with duration tracking
- **Artifacts**: resizable split pane for markdown and component content
- **Multi-modal**: images (PNG, JPEG, GIF, WebP, SVG) and documents (PDF, DOCX, TXT, CSV, JSON, Excel)
- **Plugin system**: 14 render hooks covering every major UI region, with priority-based ordering and Shadow DOM safety
- **Theming**: three-layer token tree (palette → semantic → component), dark mode, and a live visual Theme Editor at `persona-chat.dev/theme.html`
- **Composer history**: Up/Down navigation of previously sent messages
- **Feedback**: per-message upvote/downvote/copy with backend submission, CSAT and NPS survey components

## Update: v4.4.2

The latest published release is `@runtypelabs/persona@4.4.2` (June 24, 2026). The repository was last pushed June 26, 2026, and the GitHub project shows active development with the monorepo managed via Changesets for versioning. The project is tagged with topics including `webmcp`, `agentic-ai`, and `vanillajs`, reflecting its positioning as a WebMCP-native frontend library for the emerging agentic web.

## Features
- WebMCP-native page tool discovery and execution
- Three layout modes: floating, docked, fullscreen
- SSE streaming with pluggable parsers (plain text, JSON, XML, regex)
- Human-in-the-loop tool approval gates with parallel call batching
- Voice input via Web Speech API or Runtype WebSocket service
- Text-to-speech via pluggable SpeechEngine
- Collapsible reasoning/chain-of-thought bubbles
- Resizable artifact split pane for markdown and component content
- Multi-modal file attachments (images, PDF, DOCX, CSV, JSON, Excel)
- 14-hook plugin system with Shadow DOM safety
- Three-layer design token theming with live Theme Editor
- Eight streaming text reveal animations
- Composer history navigation (Up/Down)
- Dynamic inline components via stream directives
- Programmatic message injection with dual-content support
- Event stream inspector with search, filter, and diagnostics
- Per-message feedback (upvote/downvote/copy) with backend submission
- Script-tag install via jsDelivr CDN (no build step)
- Zero framework dependencies, works alongside React/Vue/Svelte

## Integrations
Vercel AI SDK, OpenAI Agents SDK, LangGraph.js, Hono, Express, SvelteKit, Next.js, Cloudflare Workers, Bun, Deno, Vercel Eve, Runtype, WebMCP / document.modelContext, jsDelivr CDN, Web Speech API

## Platforms
LINUX, WEB, API, DEVELOPER_SDK, CLI

## Pricing
Open Source

## Version
4.4.2

## Links
- Website: https://persona-chat.dev
- Documentation: https://github.com/runtypelabs/persona/blob/main/packages/widget/README.md
- Repository: https://github.com/runtypelabs/persona
- EveryDev.ai: https://www.everydev.ai/tools/persona-chat