Persona

Personaは、WebサイトにストリーミングAIチャットを追加できるオープンソースのVanillaJSエージェントUIライブラリです。浮動型・ドック型・全画面表示に対応し、SSEバックエンド連携とWebMCPによるページツール公開が可能です。

AIエージェント開発 AI開発者ツール AIチャットボット

ウェブサイトを訪問

Personaとは何か

Persona は、素の JavaScript でウェブサイトにストリーミング AI チャット体験を追加するためのオープンソースのエージェント UI ライブラリです。ホームページでは、軽量、拡張可能、WebMCP ネイティブと説明されており、npm または script タグ経由で使えるインストール方法が用意されています。

その主な目的は、UI を特定のフレームワークに縛らずに、エージェント体験向けの再利用可能なフロントエンド層を開発者に提供することです。設定を変更するだけで、同じウィジェットを浮動パネルとして起動したり、アプリの横にドック表示したり、全画面アシスタントとして展開したりできます。

機能

複数のランチャーモード

Persona は、浮動型ランチャー、ドック型コパイロット、全画面アシスタントとしてマウントできます。レイアウトはランチャー設定で制御されるため、同じエージェントを異なる UI 形状に埋め込めます。

柔軟な導入方法

この製品は npm インストールとスクリプトタグのインストーラーの両方に対応しています。ホームページでは、パッケージのインポートフロー、グローバルインストール用スクリプト、クライアントトークンとインストーラースニペットを生成する CLI フローが示されています。

バックエンド非依存のストリーミング

Persona は任意の SSE バックエンドからストリーミングするよう設計されており、リクエスト形式やイベント形式に適応するための customFetch や parseSSEEvent などのフックを提供します。サイトには、複数のバックエンドスタック向けのスターター例も掲載されています。

承認付きの WebMCP ツール利用

WebMCP を使うと、アシスタントはページ上にすでに存在するツールを利用できます。デモでは document.modelContext に登録されたページツールが示され、実行前にユーザー承認が行われ、ストリーミング結果がチャットに返されます。

テーマ対応UIシステム

テーマ設定は、palette、semantic、component のレイヤーを持つトークンツリーを中心に構築されています。サイトでは、ウィジェットをフォークせずにホストアプリに合わせられるダークモードとライブテーマエディタについても言及されています。

高度なエージェントUIパターン

高度な例には、ツール承認カード、音声入出力、アーティファクト用サイドバー、動的コンポーネント、ストリーミング Markdown テーブル、テキスト表示エフェクトが含まれます。これらは抽象的な主張ではなく、動作するパターンとして提示されています。

主な用途

Webサイトのサポートとオンボーディング
最小限のレイアウト作業で、既存サイトにサポート用またはオンボーディング用アシスタントを追加します。浮動型ランチャーは、サポート、ドキュメント、営業、オンボーディングの各フロー向けの標準的なドロップイン विकल्पとして提示されています。
ワークスペース横のアプリ内コパイロット
ワークスペースやダッシュボードの横にアシスタントを埋め込み、ページ全体を占有せずに支援できるようにします。Persona のドック型モードは領域を囲み、アシスタントがレイアウトを押し出したり、サイズ変更したり、オーバーレイ表示したりできます。
全画面アシスタント体験
アーティファクト中心や会話中心のワークフローなど、より広い画面領域が必要なタスク向けに、フルページのアシスタント体験を構築します。全画面モードはコンテナを専有でき、必要に応じて分割アーティファクト領域を表示できます。
ページツールを使うエージェント的なWebワークフロー
検索、カート、予約、フォームなどのページレベルのアクションを、アシスタントが呼び出せるツールとして公開します。Persona の WebMCP アプローチは、それらのツールをページコード内に保持し、実行前にユーザー承認を求めます。
高度なエージェントUIのプロトタイプ
音声 I/O、動的コンポーネント、ストリーミングコンテンツペインなど、よりリッチな会話インターフェースを試作します。高度な例では、音声、アーティファクト用サイドバー、回答シート、クイック返信、ストリーミングカードのパターンが示されています。

Pros and Cons

Pros

SSE 応答をストリーミングできるあらゆるスタックで動作します。
浮動型、ドック型、全画面レイアウトを含む複数の埋め込みパターンに対応します。
WebMCP を通じて、ページ内で既に公開されているツールを使うための手段を提供します。
テーマ制御、テーマエディタ、ダークモード対応を備えています。
承認、音声、アーティファクト、動的コンポーネント向けの実用例が示されています。

Cons

提示された証拠には価格ページがないため、商用パッケージやコストは不明です。
一部の高度な機能は単一の製品参照ではなく例やデモページで示されているため、実装詳細を理解するにはドキュメントを確認する必要があるかもしれません。

FAQ

Personaはどのようにインストールしますか？

Personaはウィジェットパッケージとして、またはスクリプトタグ経由で導入します。ホームページでは npm ベースのセットアップと CDN インストーラーの両方が示されており、単体サンプルにはさまざまなレイアウトやフロー向けのコピペ例が含まれています。

PersonaはどのようなUIレイアウトに対応していますか？

例では、浮動型ランチャー、ドック型サイドパネル、全画面アシスタントへの対応が示されています。エージェントやアプリ全体を作り直すのではなく、ランチャー設定を変更します。

Personaはどのバックエンドに接続できますか？

PersonaはSSEバックエンドからストリーミングし、customFetch と parseSSEEvent を使ってさまざまなリクエスト形式やイベント形式に適応できます。サイトには、Hono、Express、SvelteKit、LangGraph.js、OpenAI Agents SDK、Vercel AI SDK、Runtype プロキシ向けの連携例も掲載されています。

Personaは高度なエージェントUIパターンに対応していますか？

はい。ドキュメントと例では、テーマトークン、ダークモード、ライブテーマエディタ、承認処理、音声入力と出力、アーティファクト用サイドバー、動的コンポーネントが対応パターンとして示されています。

Personaの料金はいくらですか？

サイト上に価格ページの内容はなく、/pricing は 404 を返します。ホームページでは Persona をオープンソースライブラリとして位置付けていますが、提供された証拠には商用プランの詳細は示されていません。

Quick Facts

カテゴリ: 開発者ツール / AIチャット
プラットフォーム: Vanilla JavaScript / Web
導入方法: npm パッケージまたは script タグ
バックエンドモデル: SSE ストリーミングバックエンド
注目の連携: WebMCP ページツールと承認フロー
料金: 提示された証拠では価格ページは利用不可