Ship an AI Chat Agent in Minutes, Not Months
Persona is an open-source chat widget that drops into any site with one script tag. No framework lock-in, no months of infrastructure work.
Nate Stewart/Co-Founder & CEOMost teams building AI products hit the same wall. The model works. The prompt is solid. Then you spend six weeks building the chat UI, handling streaming, wiring up authentication, and debugging Safari edge cases.
Persona exists because we got tired of watching that happen.
What Persona actually is
Persona is a chat widget written in plain JavaScript. Not React. Not Vue. Not Svelte. Just JavaScript. That means it works everywhere: drop a <script> tag on a static site, install it via npm in your React app, or import it into your Next.js project. The same widget works across all of them.
<script src="https://cdn.jsdelivr.net/npm/@runtypelabs/persona/dist/index.global.js"></script>
<script>
AgentWidget.initAgentWidget({
target: document.getElementById('chat'),
config: {
apiUrl: 'https://api.runtype.com',
features: { showToolCalls: true, showReasoning: true }
}
})
</script>Paired with Runtype, you get a complete backend for your chat agent: model routing, conversation logging, tool calling, and analytics. No infrastructure to manage.
One-command setup with the Runtype CLI
If you use Runtype as the backend, you can create an agent, mint a client token, and get a paste-ready embed snippet without hopping between CLI commands:
npm install @runtypelabs/persona
npx @runtypelabs/cli@latest persona init
Sign in when prompted (or set RUNTYPE_API_KEY for CI). The CLI prints your token once and guides you to copy the snippet. For scripts and automation, use --json or --no-tty with --agent-name (and optional flags such as --origins and --format). Lower-level steps (agents create, client-tokens create) remain available when you want full control.
What you get out of the box
Surface
SSE streaming with incremental rendering
Chunked responses render incrementally with built-in markdown parsing. You get smooth token-by-token output without writing a single line of streaming code.
Agent
Voice input
Speech-to-text with automatic turn-taking and barge-in. Users can talk to your agent. Toggle it on with one config flag.
Tool
File attachments
Images, PDFs, documents. Users can upload files directly into the chat and your AI can reason about them.
Feature
Theme presets and Active Camouflage
From clean minimalism to cyberpunk. Every color, radius, shadow, and font is configurable through design tokens. Or use Active Camouflage from the Runtype dashboard to auto-match your site's existing styles.
Agent
Tool call visualization
When your agent calls tools, users see expandable bubbles showing what's happening. Optional human-in-the-loop approval for sensitive actions.
Surface
Feedback and analytics
Built-in thumbs up/down, copy tracking, and CSAT surveys on every conversation. Feed this data back into your product iteration cycle.
The comparison that matters
| Building from scratch | With Persona on Runtype |
|---|---|
| Build SSE parser, chunk buffering, markdown rendering | Streaming with incremental markdown rendering included |
| Design theme system, dark mode, overrides | Presets, auto light/dark mode, full design tokens |
| Build tool call UI, approval flows, progress | Tool bubbles, approvals, and progress built in |
| Build feedback, logging, analytics pipeline | Per-message feedback, history, PostHog ready |
How to get started
Start with the Deploy on Runtype button below to open a ready-made Persona chat agent in your dashboard.
Once it opens, pick a model, write your system prompt, choose a theme, then go to the Ship tab to copy the embed code into your site. Your users can start chatting immediately.
If you want to go deeper, Persona has 13 render hooks, a plugin system, local tool calling with DOM awareness, and a full artifact rendering pane. But you do not need any of that to get started.