複数のランチャーモード
Persona は、浮動型ランチャー、ドック型コパイロット、全画面アシスタントとしてマウントできます。レイアウトはランチャー設定で制御されるため、同じエージェントを異なる UI 形状に埋め込めます。
Personaとは？
Persona は、素の JavaScript でウェブサイトにストリーミング AI チャット体験を追加するためのオープンソースのエージェント UI ライブラリです。ホームページでは、軽量、拡張可能、WebMCP ネイティブと説明されており、npm または script タグ経由で使えるインストール方法が用意されています。
その主な目的は、UI を特定のフレームワークに縛らずに、エージェント体験向けの再利用可能なフロントエンド層を開発者に提供することです。設定を変更するだけで、同じウィジェットを浮動パネルとして起動したり、アプリの横にドック表示したり、全画面アシスタントとして展開したりできます。
Personaでできること
柔軟な導入方法
この製品は npm インストールとスクリプトタグのインストーラーの両方に対応しています。ホームページでは、パッケージのインポートフロー、グローバルインストール用スクリプト、クライアントトークンとインストーラースニペットを生成する CLI フローが示されています。
バックエンド非依存のストリーミング
Persona は任意の SSE バックエンドからストリーミングするよう設計されており、リクエスト形式やイベント形式に適応するための customFetch や parseSSEEvent などのフックを提供します。サイトには、複数のバックエンドスタック向けのスターター例も掲載されています。
承認付きの WebMCP ツール利用
WebMCP を使うと、アシスタントはページ上にすでに存在するツールを利用できます。デモでは document.modelContext に登録されたページツールが示され、実行前にユーザー承認が行われ、ストリーミング結果がチャットに返されます。
テーマ対応UIシステム
テーマ設定は、palette、semantic、component のレイヤーを持つトークンツリーを中心に構築されています。サイトでは、ウィジェットをフォークせずにホストアプリに合わせられるダークモードとライブテーマエディタについても言及されています。
高度なエージェントUIパターン
高度な例には、ツール承認カード、音声入出力、アーティファクト用サイドバー、動的コンポーネント、ストリーミング Markdown テーブル、テキスト表示エフェクトが含まれます。これらは抽象的な主張ではなく、動作するパターンとして提示されています。
利用シーン
“Webサイトのサポートとオンボーディング”
最小限のレイアウト作業で、既存サイトにサポート用またはオンボーディング用アシスタントを追加します。浮動型ランチャーは、サポート、ドキュメント、営業、オンボーディングの各フロー向けの標準的なドロップイン विकल्पとして提示されています。
“ワークスペース横のアプリ内コパイロット”
ワークスペースやダッシュボードの横にアシスタントを埋め込み、ページ全体を占有せずに支援できるようにします。Persona のドック型モードは領域を囲み、アシスタントがレイアウトを押し出したり、サイズ変更したり、オーバーレイ表示したりできます。
“全画面アシスタント体験”
アーティファクト中心や会話中心のワークフローなど、より広い画面領域が必要なタスク向けに、フルページのアシスタント体験を構築します。全画面モードはコンテナを専有でき、必要に応じて分割アーティファクト領域を表示できます。
“ページツールを使うエージェント的なWebワークフロー”
検索、カート、予約、フォームなどのページレベルのアクションを、アシスタントが呼び出せるツールとして公開します。Persona の WebMCP アプローチは、それらのツールをページコード内に保持し、実行前にユーザー承認を求めます。
“高度なエージェントUIのプロトタイプ”
音声 I/O、動的コンポーネント、ストリーミングコンテンツペインなど、よりリッチな会話インターフェースを試作します。高度な例では、音声、アーティファクト用サイドバー、回答シート、クイック返信、ストリーミングカードのパターンが示されています。
よくある質問
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 をオープンソースライブラリとして位置付けていますが、提供された証拠には商用プランの詳細は示されていません。
クイック情報
- カテゴリ
- 開発者ツール / AIチャット
- プラットフォーム
- Vanilla JavaScript / Web
- 導入方法
- npm パッケージまたは script タグ
- バックエンドモデル
- SSE ストリーミングバックエンド
- 注目の連携
- WebMCP ページツールと承認フロー
- 料金
- 提示された証拠では価格ページは利用不可
Persona のトラフィック分析
トラフィックデータは参考情報としてご利用ください。
- ドメイン評価
- 8
Personaの代替品
Langdock
langdock.com
共有チャット、エージェント、ワークフロー、連携、APIアクセスを備えたAI導入プラットフォーム
assistant-ui
assistant-ui.com
AIチャット、コパイロット、エージェント向けのオープンソースReactライブラリ
Orca
onorca.dev
Orcaはコーディングエージェントで開発を進めるためのエージェント開発環境です。分離されたworktreeで複数のCLIエージェントを並列実行し、デスクトップとモバイルの連携ワークフローに対応します。
blop
blopai.com
ブラウザテストを作成・実行・分類・修正するQAエージェント
RLAMA
rlama.dev
RAGシステムとAIエージェントを構築するローカルAIプラットフォーム
Kastra
kastra.ai
Kastraは、プロンプト、ツール呼び出し、シェルコマンド、APIリクエスト、ブラウザ操作を実行前に検査する、AIシステム向けの認可インフラです。ポリシー適用、署名付き監査証跡の保持、ローカルおよびエンタープライズAIワークフローのガバナンスを支援します。