Persona is an open-source, themeable AI chat widget that can be added to any website, featuring SSE streaming, agent loops, tool use, and style isolation.

Is Persona free to use?

Yes, Persona is open-source and free to use.

Does Persona support streaming responses?

Yes, Persona supports SSE streaming for real-time chat responses.

Can Persona be customized to match my website's design?

Yes, Persona is themeable and offers style isolation, allowing you to customize its appearance without affecting your site's styles.

What are agent loops in Persona?

Agent loops allow the AI to perform multi-step reasoning or actions, such as calling tools or APIs, to complete tasks.

Does Persona require a specific framework?

No, Persona is framework-agnostic and can be integrated into any website.

Persona - AI Chat bot tools - Free trial, pricing intro, performance review, official site access and online experience

What is Persona?

Persona is an open-source, vanilla JS agent UI library that lets developers build agentic front-end experiences for any website. It works with any stack and any SSE backend, offering lightweight, extensible, and WebMCP-native chat widgets. Persona supports SSE streaming, agent loops, tool use, and style isolation with zero framework dependencies. You can drop it into a page as a floating launcher, a docked copilot, or a fullscreen assistant—all configurable by changing the launcher settings.

Application scenarios

Customer support
Add a floating chat launcher to handle support, docs, sales, or onboarding without layout config.
Copilot interfaces
Dock a side panel beside your app that resizes, pushes, or overlays your layout for real-time assistance.
Fullscreen assistants
Fill a container as an app surface with an optional artifact split for immersive agent interactions.
E-commerce storefront
Use WebMCP tools to expose product search, carts, and bookings directly through the agent.
Calendar scheduling
Integrate calendar actions as WebMCP tools for booking appointments via chat.
Presentation slides
Control slides via agent-driven WebMCP tools with user approval built in.
Bakery assistant demo
Showcase agentic workflows for ordering, inventory, or custom requests in a themed demo.

Core Features

Three UX modes
Choose between floating, docked, or fullscreen layouts by changing the launcher config—no changes to your agent or app required.
WebMCP-native tool use
Expose page actions like search, carts, bookings, and forms as WebMCP tools that the agent drives directly, with user approval built in.
Shadow DOM isolation
Widget and host styles stay fully separate via Shadow DOM rendering and prefixed CSS—nothing leaks in or out.
SSE streaming support
Works with any SSE backend for real-time streaming responses from your agent.
Agent loops and tool use
Supports agentic loops that can operate your app through exposed WebMCP tools without backend integration.
Lightweight vanilla JS
No framework dependencies—pure JavaScript that runs on any stack.
Simple install options
Install via npm (`@runtypelabs/persona`) or a script tag from CDN with minimal configuration.
Themeable editor
Includes a Theme Editor for customizing the widget’s look and feel.
Full-height mode
Turn off the launcher and use full-height mode to own the entire page as an app surface.

Target users

Persona is built for front-end developers, web developers, and product teams who want to add intelligent, agentic chat interfaces to their websites without rewriting their stack. It’s ideal for teams building customer support widgets, copilot experiences, or fullscreen AI assistants that need to operate page actions through WebMCP tools.

How to use Persona?

Install Persona via npm (npm install @runtypelabs/persona) or include the CDN script tag in your HTML. Import the CSS and init function, then configure the widget with your SSE backend API URL. Choose your UX mode (floating, docked, or fullscreen) by setting the launcher config. For floating, use the default launcher; for docked, set mountMode: "docked" with a side and width; for fullscreen, disable the launcher and set fullHeight: true. Point the target at a DOM element (e.g., #chat or #workspace) to mount the widget.

Effect review

Persona delivers a polished, developer-friendly approach to embedding agentic chat widgets, with a focus on flexibility and isolation. The three UX modes—floating, docked, and fullscreen—cover common deployment patterns without requiring backend changes. The Shadow DOM isolation is a standout feature for teams worried about CSS conflicts in existing sites. While the demos (WebMCP Storefront, Calendar, Slides) show real-world potential, the library’s true strength lies in its zero-framework, vanilla JS design and WebMCP-native tool use. For developers seeking a lightweight, extensible agent UI that works with any SSE backend, Persona is a solid, no-nonsense choice.

Persona