Overview
Persona.js is an open-source agent UI library for adding AI chat to existing websites and applications. Instead of assuming a React rewrite, it ships as a Vanilla JS widget that can run in modern apps, CMS sites, static pages, and mixed frontend stacks.
The core idea is to make the chat layer agentic without forcing every product team to build a custom assistant UI. Persona supports streaming chat over SSE, floating, docked, and fullscreen layouts, WebMCP page tools, tool-call visualization, approval gates, voice input and output, artifacts, themes, and a plugin system.
Persona.js fits both the AI chatbots and AI agent categories. If you are evaluating how assistants should use page-level tools, ToolWorthy's MCP beginner guide and MCP versus A2A comparison are useful background.
Key Features
- Framework-free widget - Embed a chat launcher, docked copilot, or fullscreen assistant in any frontend with Vanilla JS.
- WebMCP page tools - Expose page actions through
document.modelContextso the assistant can discover and call tools with user approval. - Backend-agnostic streaming - Connect to any SSE-capable backend, including examples for OpenAI Agents, LangGraph.js, Vercel AI SDK, Hono, Express, and SvelteKit.
- Polished chat UX - Support streaming messages, tool calls, approval bubbles, artifacts, safe markdown, multimodal attachments, and keyboard shortcuts.
- Voice and multimodal support - Add optional speech-to-text, text-to-speech, images, documents, and file previews.
- Theme and plugin system - Customize visual tokens, layouts, hooks, stream parsers, renderers, and widget behavior without forking the library.
How to Get Started
Install the widget from npm with npm install @runtypelabs/persona, import the CSS and initAgentWidget, then point it at an SSE backend. For a no-framework path, use the script-tag example. For agentic page actions, register WebMCP tools on the page and decide which actions require explicit user approval.
The GitHub repository includes examples for AI SDK, OpenAI Agents, LangGraph.js, Hono, Express, SvelteKit, and bare HTML. Start with the example closest to your current stack rather than rebuilding the assistant UI from scratch.
Pricing & Plans
Persona.js is open source and free to use from GitHub and npm.
| Item | Public information |
|---|---|
| License / cost | Free open-source library |
| Package | @runtypelabs/persona widget on npm |
| Optional proxy package | @runtypelabs/persona-proxy |
| Hosting and model cost | Bring your own backend, model provider, or Runtype flow |
The library cost is separate from the cost of the backend model, hosting, voice service, or any proprietary APIs you connect to it.
Best For
- Developers adding AI chat to existing sites
- SaaS teams building in-app copilots without a React rewrite
- Agent products that need page-level tools and approvals
- Teams comparing open-source chat UI libraries
- Builders who want a configurable assistant UI while keeping their own backend
FAQ
What is Persona.js?
Persona.js is an open-source Vanilla JS AI chat widget and agent UI library for websites and web apps.
Is Persona.js free?
Yes. The GitHub repository and npm package are free and open source. You still pay for your own backend, model usage, hosting, or optional services.
Does Persona.js require React?
No. It is designed to run without a frontend framework, though it can also be used inside React, Vue, Svelte, CMS, and static sites.
What is WebMCP support used for?
WebMCP lets a page expose tools such as search, cart actions, booking, or form submission. Persona can discover those tools and ask the user before executing them.
Can Persona.js connect to any model?
It connects to any backend that can stream responses over the expected SSE flow, so the model choice belongs to your backend.
