Multiple launcher layouts
Mount Persona as a floating launcher, a docked panel, or a full-height assistant. The homepage shows that you can switch between these layouts by changing launcher config rather than rewriting the app.
Persona
Persona is an open-source vanilla JavaScript library for streaming AI chat on websites, with floating, docked, fullscreen, WebMCP tools, and SSE backends.
What Persona is
Persona is an open-source agent UI library for vanilla JavaScript that adds a streaming AI chat experience to a website. It is positioned as a lightweight, extensible widget that can run on any stack with an SSE backend or through the site’s installer workflow.
The product supports several presentation modes, including a floating launcher, a docked copilot panel, and a fullscreen assistant. It also includes WebMCP support so the agent can discover page tools already exposed by the site, ask for approval, and then execute actions such as search or cart operations directly in the browser.
Core capabilities
npm and script-tag installation
Install with a package import or a script tag. The homepage includes both an npm setup and a CDN installer, which makes it usable in framework and framework-free pages.
Pluggable SSE transport
Connect the widget to streaming backends that speak SSE. The docs say the transport is pluggable, with support for custom request and event parsing through customFetch and parseSSEEvent.
WebMCP tool execution with approval
Expose page actions as WebMCP tools so the agent can use existing site features such as search, carts, bookings, or forms. The agent asks before calling tools, and the result streams back into the chat.
Style isolation
Keep widget styles isolated from host-page styles using Shadow DOM rendering and prefixed CSS. The site explicitly says this prevents style leakage in both directions.
Theme editor and design tokens
Customize the chat experience with a layered token system, dark mode, and a live theme editor. The homepage positions theming as a way to match the host brand without forking the widget.
Where Persona fits
Website support and onboarding
Add a streaming chat launcher to a support, documentation, sales, or onboarding page without building a custom chat shell from scratch.
Docked product assistant
Embed a copilot beside a workspace or dashboard when you want the assistant to live alongside the user’s main task instead of replacing the page.
Standalone assistant experiences
Build a fullscreen assistant surface for an app-like workflow that needs the chat UI to own the page and optionally show an artifact pane.
Agent-driven page actions
Expose existing site functionality, such as search, cart actions, bookings, or forms, to an agent through WebMCP tools with user approval.
Prototyping and implementation reference
Use the demo patterns and advanced examples as references for approval flows, voice input and output, artifact sidebars, or streaming UI behaviors before wiring your own backend.
Pros and Cons
Pros
- Works with vanilla JavaScript and does not require a frontend framework.
- Supports multiple UI layouts from the same launcher configuration.
- Can connect to SSE backends and adapt different event shapes with customFetch and parseSSEEvent.
- Lets the agent use page tools through WebMCP instead of requiring all actions to be rebuilt inside the chat UI.
- Keeps host styles isolated with Shadow DOM and prefixed CSS.
Cons
- The pricing page currently returns a 404, so pricing and plan details are not clearly published there.
- The richest examples are on demo and advanced pages, so readers may need to inspect examples to understand the full range of patterns.
- Some integrations are shown as sample recipes rather than a single unified backend package, so implementation details vary by stack.
FAQ
How do you add Persona to a site?
Persona mounts a chat widget that streams responses from your backend. The site shows it being initialized with a target element and an API URL, or via a script tag installer for a faster setup path.
What backends can it connect to?
The product page says Persona works with any SSE backend and provides example integrations for stacks such as Hono, Express, SvelteKit, LangGraph.js, OpenAI Agents SDK, Vercel AI SDK, and others. It also supports custom adapters through customFetch and parseSSEEvent.
What kinds of UI layouts does Persona support?
The site presents three launcher modes: floating, docked, and fullscreen. It also mentions a default floating launcher, a docked side panel, and a full-height assistant layout.
Can Persona drive actions on the page itself?
Persona supports WebMCP page tools. The docs say you can register tools on the page, let the agent discover them through document.modelContext, and require user approval before tool execution.
Is pricing documented on the site?
The pricing page is currently unavailable at /pricing, so the site does not provide a pricing structure there. The homepage and docs emphasize open-source usage and installation via npm or a CDN script.
Quick Facts
- Category
- Developer tool / AI chat UI
- Primary stack
- VanillaJS, SSE, WebMCP
- Install methods
- npm package or script tag
- Brand
- Persona
- Source domain
- persona-chat.dev
- Open-source
- Yes, described on the homepage as open-source
Persona Alternatives
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads in Firecracker micro-VMs with private networking and SDK, CLI, or MCP control.
Ably Chat
Ably Chat is a chat API platform for custom realtime chat apps, with rooms, typing indicators, presence, reactions, message updates and usage-based pricing.
AakarDev AI
AakarDev AI helps teams manage AI provider access, project setup, logs, and analytics in one dashboard. BYOK support included.
Arduino VENTUNO Q
Arduino VENTUNO Q is an edge AI computer for AI and robotics, combining AI inference and deterministic control on one board with Arduino App Lab support.
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
Codex Plugins
Codex Plugins bundle reusable skills, app integrations, and MCP servers into workflows you can install in the Codex app or use from Codex CLI.