Personaとは？軽量・拡張可能なエージェントUIライブラリ

Personaは、オープンソースのバニラJS製エージェントUIライブラリです。あらゆるWebサイトにエージェント型のフロントエンド体験を追加できます。どんなスタックやSSEバックエンドとも連携し、軽量で拡張性が高く、WebMCPネイティブなチャットウィジェットを提供します。SSEストリーミング、エージェントループ、ツール使用、スタイルの分離をゼロフレームワーク依存で実現。フローティングランチャー、ドッキングコパイロット、フルスクリーンアシスタントとして、設定を変えるだけでページに埋め込めます。

Application scenarios

カスタマーサポート
レイアウト設定不要で、サポート、ドキュメント、営業、オンボーディングに対応するフローティングチャットランチャーを追加。
コパイロットインターフェース
アプリ横にサイドパネルをドッキング。リアルタイムアシスタンスのためにレイアウトをリサイズ、プッシュ、オーバーレイ可能。
フルスクリーンアシスタント
コンテナをアプリ画面として埋め尽くし、オプションでアーティファクト分割を追加して没入型のエージェント対話を実現。
Eコマースストアフロント
WebMCPツールを使って、商品検索、カート、予約をエージェント経由で直接公開。
カレンダー予約
カレンダーアクションをWebMCPツールとして統合し、チャットから予約を実行。
プレゼンテーションスライド
エージェント駆動のWebMCPツールでスライドを制御。ユーザー承認機能も内蔵。
ベーカリーアシスタントデモ
注文、在庫、カスタムリクエストなどのエージェントワークフローをテーマ別デモで紹介。

Core Features

3つのUXモード
ランチャー設定を変更するだけで、フローティング、ドッキング、フルスクリーンのレイアウトを選択可能。エージェントやアプリの変更は不要。
WebMCPネイティブなツール使用
検索、カート、予約、フォームなどのページアクションをWebMCPツールとして公開。エージェントが直接操作し、ユーザー承認機能も内蔵。
Shadow DOMによるスタイル分離
Shadow DOMレンダリングとプリフィックスCSSにより、ウィジェットとホストのスタイルは完全に分離。スタイルの漏れや干渉は一切なし。
SSEストリーミング対応
任意のSSEバックエンドと連携し、エージェントからのリアルタイムストリーミング応答を実現。
エージェントループとツール使用
バックエンド統合不要で、公開されたWebMCPツールを通じてアプリを操作するエージェントループをサポート。
軽量バニラJS
フレームワーク依存なし。どんなスタックでも動作する純粋なJavaScript。
簡単インストール
npm（`@runtypelabs/persona`）またはCDNのスクリプトタグから最小限の設定でインストール可能。
テーマエディタ
ウィジェットのルック＆フィールをカスタマイズするテーマエディタを搭載。
フルハイトモード
ランチャーをオフにしてフルハイトモードにすることで、ページ全体をアプリ画面として占有可能。

ターゲットユーザー

Personaは、フロントエンド開発者、Web開発者、プロダクトチーム向けに設計されています。スタックを書き換えることなく、インテリジェントなエージェント型チャットインターフェースをWebサイトに追加したい方に最適です。カスタマーサポートウィジェット、コパイロット体験、またはWebMCPツールを通じてページアクションを操作するフルスクリーンAIアシスタントを構築するチームにぴったりです。

Personaの使い方

npm（npm install @runtypelabs/persona）またはCDNのスクリプトタグをHTMLに追加してインストール。CSSとinit関数をインポートし、SSEバックエンドのAPI URLを指定してウィジェットを設定。ランチャー設定でUXモード（フローティング、ドッキング、フルスクリーン）を選択します。フローティングはデフォルトのランチャー、ドッキングはmountMode: "docked"にサイドと幅を指定、フルスクリーンはランチャーを無効にしてfullHeight: trueを設定。ターゲットをDOM要素（例：#chatや#workspace）に指定してウィジェットをマウントします。

効果レビュー

Personaは、柔軟性と分離性に優れた、洗練された開発者フレンドリーなエージェントチャットウィジェット埋め込みアプローチを提供します。3つのUXモード（フローティング、ドッキング、フルスクリーン）は、バックエンド変更不要で一般的なデプロイパターンをカバー。既存サイトでのCSS競合を懸念するチームにとって、Shadow DOMによるスタイル分離は特筆すべき機能です。デモ（WebMCP Storefront、Calendar、Slides）は実用的な可能性を示していますが、このライブラリの真の強みは、ゼロフレームワークのバニラJS設計とWebMCPネイティブなツール使用にあります。軽量で拡張可能なエージェントUIを求める開発者にとって、Personaは堅実で無駄のない選択肢です。

Frequently Asked Questions

Personaとは何ですか？

Personaは、オープンソースでテーマ対応のAIチャットウィジェットです。SSEストリーミング、エージェントループ、ツール使用、スタイル分離に対応しており、あらゆるウェブサイトに追加できます。

Personaは無料で使えますか？

はい、Personaはオープンソースで無料で利用できます。

Personaはストリーミング応答に対応していますか？

はい、PersonaはSSEストリーミングをサポートしており、リアルタイムでチャット応答を表示できます。

Personaのデザインを自分のウェブサイトに合わせてカスタマイズできますか？

はい、Personaはテーマ対応でスタイル分離機能を備えています。サイトのスタイルに影響を与えずに外観を自由にカスタマイズできます。

Personaのエージェントループとは何ですか？

エージェントループにより、AIがツールやAPIを呼び出すなど、複数ステップの推論やアクションを実行してタスクを完了できます。

Personaを使うには特定のフレームワークが必要ですか？

いいえ、Personaはフレームワークに依存せず、どんなウェブサイトにも統合できます。

Persona