Persona

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.