Persona.js

Persona.jsとは？

Personaは、軽量でオープンソースのAIチャットUIライブラリであり、純粋なJavaScriptを使用してあらゆるウェブサイトに埋め込むことができます。Reactベースのチャットフレームワークとは異なり、Personaはフレームワークに依存せず、バックエンドに依存せず、WebMCPネイティブであるため、アシスタントは親ページが公開するツールを発見して実行できます。ストリーミングチャット、音声、テーマ設定、インタラクティブなコパイロット体験を、フロントエンドを再構築したり専用APIを作成したりすることなく追加できます。

対象者

• フロントエンド開発者：スタックを書き換えたり新しいフレームワークを学ぶことなく、あらゆるウェブサイトにAIアシスタントを導入したい方
• プロダクトチーム：検索、カート、予約、フォームなどのページツールを直接操作するエージェント体験を提供したい方
• スタートアップや個人開発者：あらゆるバックエンドやホスティング環境で動作する、高速で埋め込み可能なチャットUIを求める方

主な機能

3つのレイアウトモード

Personaは、フローティング、ドッキング、フルスクリーンのUXを提供します。サポート用のコーナーランチャー、レイアウトをリサイズするサイドコパイロット、ページ全体を占有するフルハイトアシスタントを、launcher設定値を1つ変更するだけで切り替えられます。

WebMCPネイティブなツール実行

ページアクション、検索、カート、予約、フォームをWebMCPツールとして公開します。エージェントは組み込みのユーザー承認機能によりこれらを直接操作し、ツールの発見と実行にバックエンドの統合は不要です。

Shadow DOMによる分離

Shadow DOMレンダリングとプレフィックス付きCSSにより、ウィジェットとホストのスタイルを完全に分離します。Personaをどのページにドロップしても、スタイルの漏洩や侵入は発生せず、既存のデザインシステムを維持します。

プラグイン可能なストリーミング転送

プラグイン可能なパーサーを備えたSSEストリーミングは、customFetchとparseSSEEventを使用して任意のリクエストやイベント形状に適応します。これはサーバー送信イベントをサポートするあらゆるバックエンドで動作します。

特筆すべき点

Personaは、ブラウザを単なる表示面ではなく、第一級のランタイムとして扱う初のエージェントUIライブラリです。

ほとんどのチャットUIは受動的であり、テキストを表示してAPI応答を待つだけです。Personaは、エージェントをページの能動的な参加者とすることで、これを覆します。親ページが公開するツールを発見し、ユーザーの承認を得て実行し、リアルタイムで応答をストリーミングします。つまり、アシスタントはドキュメントを検索したり、カートにアイテムを追加したり、予約フォームを入力したりすることができ、これらのアクションのためにバックエンドエンドポイントを1つも作成する必要はありません。

こんな方におすすめ

静的HTMLページからモダンなSPAまで、新しいフレームワークを採用したりフロントエンドを再構築することなく、あらゆるウェブサイトにAIアシスタントを追加したい方。ストリーミングチャット、音声、テーマ設定、そしてあらゆるバックエンドで動作するエージェントツールの利用が必要な場合、Personaは数行のコードで本番環境対応のソリューションを提供します。