Profile
Back to NewsBack
GitHub Trending 14 min
Reader Mode
runtypelabs/persona: Create agentic front-end experiences for the web in VanillaJS™️. Lightweight, extensible, and WebMCP-native.

runtypelabs/persona: Create agentic front-end experiences for the web in VanillaJS™️. Lightweight, extensible, and WebMCP-native.

7 hours ago

Persona.js

npm</a> Live demo</a> Ask DeepWiki</a>

A themeable, pluggable AI chat widget for websites: built in TypeScript with zero framework dependencies. It renders using Vanilla JS. Its initial bundle tries hard to be small.

Persona gives you a drop-in UI for your AI assistant that works on basically any site or product on the web. It ships with support for streaming responses, direct client-token installs, WebMCP/page tools, built-in local client tools, voice I/O, multi-modal content, tool call visualization, approval gates, artifact rendering, safe markdown/HTML rendering, and a plugin system so you can customize every layer of the UI.

Persona chat widget slideshow

Persona works with any SSE-capable backend. See the "examples" section below for pre-built framework / platform / frontend combos.

Built something cool that you'd like to contribute back? Awesome! We'd love that.

Live demo

persona-chat.dev hosts the interactive showcase: streaming chat, voice, docked and fullscreen layouts, themes, tool calls, artifacts, and more. It's the hosted version of apps/web. To run the same pages on your machine with hot reload while you edit code, run pnpm dev from the repository root: the Vite dev server reloads the demo, and the app resolves @runtypelabs/persona from the workspace (packages/widget), so widget changes apply without publishing to npm.

When should you use this?

If you want to create AI experiences quickly within your site or app, configured in a declarative manner, and love building with plain TS/JS hooks... Persona will be one of your best friends!

This includes layering on top of what's already been built with React, Vue, or any other FE framework. Persona is lightweight and is built to work alongside.

That said, if you really don't like the idea of building AI without JSX... you probably want to check out Assistant UI, CopilotKit, or Vercel's AI Elements. No worries, Persona still thinks you are cool.

Packages

| Package | npm | Description | |---------|-----|-------------| | packages/widget | @runtypelabs/persona | The installable chat widget | | packages/proxy | @runtypelabs/persona-proxy | Optional Hono-based proxy server for flow configuration |

Apps

| App | Platform | Description | |-----|----------|-------------| | apps/web | Vite | The Persona showcase: 35+ interactive demo pages (live) |

Examples

| Example | Platform | Description | |---------|----------|-------------| | examples/ai-sdk-webmcp | Next.js | WebMCP page tools using Vercel AI SDK (live) | | examples/ai-sdk-next | Next.js | Minimal SSE adapters for AI SDK and OpenAI Responses | | examples/eve-next | Next.js | Vercel eve agent backend (beta; needs Node 24 + a running eve server) | | examples/openai-agents-next | Next.js | OpenAI Agents SDK (@openai/agents) backend | | examples/langgraph-next | Next.js | LangGraph.js (@langchain/langgraph) backend | | examples/echo-hono | Hono | Host matrix: same adapter on Hono (Node/Bun/Deno/Workers) | | examples/echo-script-tag | Bare HTML + node:http | Host matrix: zero-framework Chat with me