Persona.js
Create agentic web interfaces with pure JavaScript components.
Open SourceChatbots & Assistants
Visit website Free to browse · updated 2026-06-28
What is Persona.js?
Developers can quickly add floating launchers, docked panels, or fullscreen assistants to their applications. The system allows agents to discover and invoke page-level actions such as searches or form submissions through a standardized mechanism, always seeking user confirmation before execution. Customization comes through a layered theming system that adapts to brand requirements including dark mode support. Integration works across frameworks or plain HTML via script tags or module imports, with parsers that adapt to various server-sent event formats. The library emphasizes separation from host page styles and code, enabling safe deployment without conflicts. Examples demonstrate usage in scenarios like product catalogs, scheduling tools, and guided assistants, all while remaining extensible for custom needs.
Key features
Pure JavaScript agent UI library
Floating, docked or fullscreen layouts
WebMCP-native page tool integration
SSE streaming from any backend
Shadow DOM style isolation
Three-layer theming with live editor
npm or script-tag installation
What you can use Persona.js for
E-commerce Storefront Assistant
Create an agentic widget that lets users search product catalogs, manage carts, and complete purchases by exposing page actions as WebMCP tools.
Calendar and Booking Integration
Build a docked or floating assistant that handles event scheduling and bookings directly through registered page tools with user approval.
Branded Themed Chat Experiences
Deploy customizable chat interfaces in floating, docked, or fullscreen modes that match brand styling via a three-layer token system and live theme editor.
How to use Persona.js
- 1Install the package via npm
- 2Import widget CSS and the initAgentWidget function
- 3Configure the widget with your SSE API endpoint
- 4Register page tools using document.modelContext
- 5Choose floating, docked, or fullscreen layout in config
- 6Apply custom theme tokens or open the live editor
Persona.js pricing
Pricing model: Open Source. Plan details are indicative — check the site for current prices.
MIT License
Free
- npm install @runtypelabs/persona
- Full source access
- WebMCP integration
- Any SSE backend support
Editor's verdict
Pros
- +Lightweight and framework-agnostic
- +No backend changes needed for tools
Cons
- –Requires SSE-compatible backend
- –Browser-only front-end focus
Our take: Persona.js is a solid chatbots & assistants choice. It's valued for lightweight and framework-agnostic and no backend changes needed for tools. The main trade-off is requires sse-compatible backend. A good pick if you want capable AI without a high upfront cost.
Frequently asked questions
Persona is a lightweight VanillaJS agent UI library for building agentic front-end experiences on the web with pure JavaScript and WebMCP support.
Summary
Persona.js is a solid chatbots & assistants choice. It's valued for lightweight and framework-agnostic and no backend changes needed for tools. The main trade-off is requires sse-compatible backend. A good pick if you want capable AI without a high upfront cost.
Did you find this helpful?
User reviews
Verified reviews from the community shape this tool's rating.
Loading reviews…
Persona.js alternatives
Similar chatbots & assistants tools worth comparing.
