{"id":47711021,"url":"https://github.com/runtypelabs/persona","last_synced_at":"2026-06-13T08:02:42.098Z","repository":{"id":346342950,"uuid":"1132293245","full_name":"runtypelabs/persona","owner":"runtypelabs","description":"Open-source embeddable AI chat UI with streaming, voice, and theming","archived":false,"fork":false,"pushed_at":"2026-06-02T03:24:15.000Z","size":14689,"stargazers_count":12,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-02T05:12:24.856Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://persona-chat.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/runtypelabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-11T17:32:51.000Z","updated_at":"2026-05-27T05:06:58.000Z","dependencies_parsed_at":"2026-04-18T10:02:58.319Z","dependency_job_id":null,"html_url":"https://github.com/runtypelabs/persona","commit_stats":null,"previous_names":["runtypelabs/persona"],"tags_count":84,"template":false,"template_full_name":null,"purl":"pkg:github/runtypelabs/persona","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runtypelabs%2Fpersona","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runtypelabs%2Fpersona/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runtypelabs%2Fpersona/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runtypelabs%2Fpersona/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/runtypelabs","download_url":"https://codeload.github.com/runtypelabs/persona/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runtypelabs%2Fpersona/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34044919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-02T18:32:03.368Z","updated_at":"2026-06-08T02:01:10.529Z","avatar_url":"https://github.com/runtypelabs.png","language":"TypeScript","funding_links":[],"categories":["📦 Libraries, SDKs \u0026 Polyfills"],"sub_categories":["Standalone Libraries"],"readme":"# Persona\n\n[![npm](https://img.shields.io/npm/v/@runtypelabs/persona?style=flat\u0026color=262626\u0026label=npm)](https://www.npmjs.com/package/@runtypelabs/persona)\n[![Live demo](https://img.shields.io/badge/live_demo-persona--chat.dev-0d9488?style=flat)](https://persona-chat.dev)\n[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/runtypelabs/persona)\n\nA themeable, pluggable AI chat widget for websites — built in Typescript with zero framework dependencies. It renders using Vanilla JS.\n\nPersona 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, voice I/O, multi-modal content, tool call visualization, artifact rendering, and a plugin system so you can customize every layer of the UI.\n\nPersona works with any SSE-capable backend. It's pre-integrated with [Runtype](https://runtype.com) out of the box, so you can go from install to live assistant with zero configuration.\n\n## Live demo\n\n**[persona-chat.dev](https://persona-chat.dev)** hosts the interactive gallery (35+ pages): streaming chat, voice, docked and fullscreen layouts, themes, tool calls, artifacts, and more. It mirrors [`examples/embedded-app`](./examples/embedded-app). 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.\n\n## Packages\n\n| Package | npm | Description |\n|---------|-----|-------------|\n| [`packages/widget`](./packages/widget) | `@runtypelabs/persona` | The installable chat widget |\n| [`packages/proxy`](./packages/proxy) | `@runtypelabs/persona-proxy` | Optional Hono-based proxy server for flow configuration |\n\n## Examples\n\n| Example | Platform | Description |\n|---------|----------|-------------|\n| [`examples/embedded-app`](./examples/embedded-app) | Vite | Vanilla JS demo with runtime configuration ([live](https://persona-chat.dev)) |\n| [`examples/ai-sdk-webmcp`](./examples/ai-sdk-webmcp) | Next.js | WebMCP page tools on a direct Vercel AI SDK backend, no Runtype ([live](https://ai-sdk-webmcp.persona-chat.dev)) |\n| [`examples/vercel-edge`](./examples/vercel-edge) | Vercel / Railway / Fly.io | Node.js proxy server |\n| [`examples/cloudflare-workers`](./examples/cloudflare-workers) | Cloudflare Workers | Edge proxy server |\n\n## Quick Start\n\n```bash\ncorepack enable\npnpm install\npnpm dev\n```\n\nThis starts the proxy on `http://localhost:43111` and the demo app at `http://localhost:5173`. Both depend on the local widget package via workspace linking, so changes hot-reload without publishing.\n\n\u003e **Note:** Requires Node.js 20+ (`nvm use` reads `.nvmrc`). Corepack manages pnpm for you.\n\n### Install from npm\n\n```bash\nnpm install @runtypelabs/persona        # widget\nnpm install @runtypelabs/persona-proxy   # proxy (optional)\n```\n\n## Features\n\nEverything below is opt-in and configurable via the widget config, feature flags, or the plugin system.\n\n### Streaming Chat\nSSE-based message streaming with pluggable parsers (plain text, JSON, XML, regex). Bring your own stream parser or use the built-ins. Supports partial JSON parsing for incomplete chunks.\n\n### Multi-Modal Content\nText, images (PNG, JPEG, GIF, WebP, SVG), and documents (PDF, DOCX, TXT, CSV, JSON, Excel). Configure allowed file types, size limits, and previews through the attachments config.\n\n### Voice Input \u0026 Output\nOptional speech-to-text via the Web Speech API or Runtype's WebSocket voice service with barge-in interruption and voice activity detection. Text-to-speech playback for assistant responses. Enable via the voice config.\n\n### Reasoning \u0026 Extended Thinking\nCollapsible reasoning bubbles that display model chain-of-thought with duration tracking and streaming. Controlled by `features.showReasoning` — on by default, or override the renderer with a plugin hook.\n\n### Tool Calls \u0026 Approvals\nExpandable tool call bubbles showing name, status, arguments, and results. Optional human-in-the-loop approval system with configurable timeout. Controlled by `features.showToolCalls` with a plugin hook for custom rendering.\n\n### Artifacts\nOptional side-panel for rendering markdown and component content. Desktop split layout (resizable) or mobile drawer. Enable via `features.artifacts`, configure toolbar presets, copy behavior, and appearance.\n\n### Event Stream Inspector\nOptional real-time event capture with search/filter, badge coloring, timestamps, and expandable payloads. Enable via `features.showEventStreamToggle`. Customize rows, toolbar, and payload rendering through plugin hooks.\n\n### Composer Keyboard Shortcuts\n`Enter` sends a message (`Shift+Enter` for a newline) and is inert while a response is streaming — it never interrupts generation. Press `Esc` within the widget to stop an in-flight response (the visible Stop button does the same). `Up`/`Down` navigate previously sent messages for quick re-entry or editing — entered only when the caret is at the start of the input, so multi-line editing is preserved, and your in-progress draft is restored when you page back to the present. History navigation is on by default; disable via `features.composerHistory: false`.\n\n### Themes \u0026 Styling\nLight and dark themes included. Full design token system (palette, semantic, component-level) with CSS variable support. Extend with built-in plugins for accessibility, reduced motion, high contrast, and branding — or create your own.\n\n### Layout \u0026 Presets\nStart from a built-in preset (shop, minimal, fullscreen) or configure from scratch. Header layouts, message layouts, avatars, timestamps, and slot-based rendering are all customizable. Dock as a floating widget or embed inline.\n\n### Plugin System\n14 render hooks covering the launcher, header, composer, messages, reasoning, tool calls, approvals, loading/idle indicators, and the event stream. Priority-based ordering with automatic fallback to defaults. Replace any piece of the UI without forking.\n\n### Feedback \u0026 Analytics\nOptional message-level upvote/downvote/copy with automatic backend submission. CSAT and NPS survey components. Wire up custom callbacks for your own analytics.\n\n### Agent Execution\nRenders multi-turn agent loops as they stream from the backend — displaying iteration progress, reflections, and stop reasons. Agent metadata is attached to every message. Customize how execution events appear through plugin hooks.\n\n### Component System\nRegister custom components and render them inline via directives. Stream-aware parser and middleware for dynamic UI insertion during streaming.\n\n### Message Injection\nProgrammatically insert messages (`injectMessage`, `injectAssistantMessage`, `injectUserMessage`, `injectSystemMessage`) with dual-content support — display one thing to the user while sending different content to the LLM.\n\n## Proxy Deployment\n\nBoth proxy examples handle secure API key management, CORS, and multiple flow configurations.\n\n- **vercel-edge** — best for quick deployment to Vercel or any Node.js host\n- **cloudflare-workers** — best for global edge deployment with low latency\n\n## Publishing\n\nThis monorepo uses [Changesets](https://github.com/changesets/changesets) for version management.\n\n```bash\npnpm changeset            # create a changeset after making changes\npnpm changeset version    # bump versions and generate changelogs\npnpm release              # build and publish to npm\n```\n\nSee [`packages/widget/README.md`](./packages/widget/README.md) for the full configuration reference.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruntypelabs%2Fpersona","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruntypelabs%2Fpersona","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruntypelabs%2Fpersona/lists"}