複数のランチャーレイアウト
Persona を浮動ランチャー、ドッキングパネル、またはフルハイトのアシスタントとして配置できます。ホームページでは、アプリを作り直すのではなく、ランチャー設定を変更することでこれらのレイアウトを切り替えられることが示されています。
Persona
Personaは、WebサイトにストリーミングAIチャットを追加できるオープンソースのJavaScriptライブラリです。浮動・ドッキング・全画面レイアウトとWebMCP、SSEバックエンドに対応。
Persona とは
Persona は、Web サイトにストリーミング AI チャット体験を追加する、vanilla JavaScript 向けのオープンソースエージェント UI ライブラリです。軽量で拡張可能なウィジェットとして位置づけられており、SSE バックエンド、またはサイトのインストーラーワークフロー経由で任意のスタック上で動作できます。
この製品は、浮動ランチャー、ドッキングされたコパイロットパネル、全画面アシスタントなど、複数の表示モードをサポートしています。また、WebMCP サポートも備えており、エージェントはサイト側で既に公開されているページツールを見つけ、承認を求めたうえで、検索やカート操作などのアクションをブラウザ内で直接実行できます。
主な機能
npm と script タグによるインストール
パッケージのインポートまたは script タグでインストールできます。ホームページには npm セットアップと CDN インストーラーの両方があり、フレームワークあり／なしのページで使いやすくなっています。
差し替え可能な SSE トランスポート
SSE に対応したストリーミングバックエンドへウィジェットを接続できます。ドキュメントでは、この transport は差し替え可能で、customFetch と parseSSEEvent によるカスタムリクエストおよびイベント解析をサポートすると説明されています。
承認付きの WebMCP ツール実行
ページのアクションを WebMCP ツールとして公開し、エージェントが検索、カート、予約、フォームなど既存のサイト機能を利用できるようにします。エージェントはツール呼び出し前に確認を求め、結果はチャットにストリーミングされます。
スタイルの分離
Shadow DOM レンダリングとプレフィックス付き CSS を使って、ウィジェットのスタイルをホストページのスタイルから分離します。サイトでは、これにより双方向のスタイル漏れを防げると明記されています。
テーマエディターとデザイン トークン
階層化されたトークンシステム、ダークモード、ライブテーマエディターを使って、チャット体験をカスタマイズできます。ホームページでは、ウィジェットをフォークせずにホストブランドに合わせる手段としてテーマ設定が位置づけられています。
Persona が適する場面
Web サイトのサポートとオンボーディング
ゼロから独自のチャットシェルを作らなくても、サポート、ドキュメント、営業、オンボーディングのページにストリーミングチャットランチャーを追加できます。
ドッキングされた製品アシスタント
アシスタントをページの代わりにするのではなく、ユーザーの主な作業の横に常駐させたい場合に、ワークスペースやダッシュボードの横へコパイロットを埋め込めます。
スタンドアロンのアシスタント体験
チャット UI がページ全体を占有し、必要に応じてアーティファクトペインを表示する、アプリのようなワークフロー向けに全画面アシスタント画面を構築できます。
エージェント主導のページ操作
ユーザーの承認付きで、検索、カート操作、予約、フォームなど既存のサイト機能を WebMCP ツール経由でエージェントに公開できます。
プロトタイピングと実装の参考
独自のバックエンドを接続する前に、承認フロー、音声入力と出力、アーティファクトのサイドバー、ストリーミング UI の動作の参考として、デモパターンや高度な例を利用できます。
Pros and Cons
Pros
- vanilla JavaScript で動作し、フロントエンドフレームワークを必要としません。
- 同じランチャー設定から複数の UI レイアウトをサポートします。
- SSE バックエンドに接続でき、customFetch と parseSSEEvent を使って異なるイベント形式に適応できます。
- チャット UI 内ですべてのアクションを再実装するのではなく、WebMCP を通じてページツールをエージェントに使わせることができます。
- Shadow DOM とプレフィックス付き CSS により、ホスト側のスタイルを分離して保てます。
Cons
- 価格ページが現在 404 を返すため、価格やプランの詳細がそこで明確に公開されていません。
- 最も充実した例はデモページと高度なページにあるため、読者はパターンの全体像を把握するために例を確認する必要があるかもしれません。
- 一部の統合は単一の統合バックエンドパッケージではなくサンプルレシピとして示されているため、実装の詳細はスタックによって異なります。
FAQ
Persona をサイトに追加するにはどうすればよいですか?
Persona は、バックエンドからの応答をストリーミング表示するチャットウィジェットをサイトに組み込みます。サイトでは、ターゲット要素と API URL を指定して初期化する方法、またはより سريعいセットアップ手順として script タグのインストーラーを使う方法が示されています。
どのようなバックエンドに接続できますか?
製品ページによると、Persona は任意の SSE バックエンドで動作し、Hono、Express、SvelteKit、LangGraph.js、OpenAI Agents SDK、Vercel AI SDK などのスタック向けのサンプル統合を提供しています。また、customFetch と parseSSEEvent を使ったカスタムアダプターにも対応しています。
Persona はどのような UI レイアウトをサポートしていますか?
サイトでは、floating、docked、fullscreen の 3 つのランチャーモードが紹介されています。デフォルトの浮動ランチャー、ドッキングされたサイドパネル、全高のアシスタントレイアウトにも言及されています。
Persona はページ上のアクションを実行できますか?
Persona は WebMCP のページツールをサポートしています。ドキュメントでは、ページ上にツールを登録し、エージェントが document.modelContext を通じてそれらを検出し、ツール実行前にユーザーの承認を必須にできると説明されています。
価格情報はサイトに記載されていますか?
pricing ページは現在 /pricing で利用できないため、そのページでは価格体系は公開されていません。ホームページとドキュメントでは、オープンソースとしての利用と、npm または CDN script によるインストールが強調されています。
Quick Facts
- カテゴリ
- 開発者向けツール / AI チャット UI
- 主要スタック
- VanillaJS、SSE、WebMCP
- インストール方法
- npm パッケージまたは script タグ
- ブランド
- Persona
- ソースドメイン
- persona-chat.dev
- オープンソース
- はい、ホームページでオープンソースとして説明されています
Personaの代替品
CreateOS Sandbox
CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。
Ably Chat
Ably Chatは、カスタムのリアルタイムチャットアプリを構築できるチャットAPIプラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。
AakarDev AI
AakarDev AIは、AIプロバイダーのアクセス管理、プロジェクト別設定、ログ、分析を1つのダッシュボードで管理できるチーム向けツールです。BYOKに対応し、OpenAI、Google Gemini、Anthropic、Groq、Mistral AI、Perplexity AIをサポートします。
Arduino VENTUNO Q
Arduino VENTUNO Qは、AI・ロボティクス向けのエッジAIコンピューターです。AI推論と決定論的制御を1枚に集約し、Arduino App Labに対応します。
ByteAsk
ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。
Codex Plugins
Codex Plugins は、再利用可能なスキル、アプリ連携、MCPサーバーを Codex app や Codex CLI で使えるワークフローにまとめます。接続サービスの作業や共有チームワークフローを拡張できます。