Persona.js

Persona：WebMCPネイティブなVanillaJSエージェントUIライブラリで実現する次世代のウェブ体験

現代のウェブ開発において、AIエージェントをシームレスにインターフェースへ統合することは重要な課題です。Persona（ペルソナ）は、ピュアなJavaScript（VanillaJS）で構築された、エージェント向けフロントエンド体験を創出するための革新的なライブラリです。Personaを利用することで、軽量で拡張性が高く、かつWebMCPに完全対応したエージェントUIを、既存のウェブサイトやアプリケーションに迅速に組み込むことが可能になります。

What's Persona?（Personaとは）

Personaは、Runtype Labsによって開発された、ウェブサイト上でAIエージェントとの対話型インターフェースを構築するためのAgent UI Libraryです。フレームワークに依存しないVanillaJS（バニラJS）ベースであるため、どのようなテックスタックでも動作し、非常に軽量であるという特徴があります。

Personaの核となるコンセプトは「WebMCP（Model Context Protocol）ネイティブ」であることです。これにより、ページ上のアクション、検索、カート、予約、フォームなどをWebMCPツールとして公開し、エージェントがユーザーの承認を得た上でそれらを直接操作できるようになります。バックエンドの複雑な統合を必要とせず、フロントエンドの既存のロジックをAIの能力と直結させることができます。

Personaの主な特徴（Features）

Personaが提供する主要な機能は、開発者がエージェント体験を構築する際の柔軟性と安定性を最大化するように設計されています。

1. WebMCPによる強力な操作性

PersonaはWebMCP標準を採用しており、ブラウザ内のツールをエージェントが発見・利用するための標準的な場所（document.modelContext）を提供します。これにより、検索やフォーム入力といったページ上の既存機能を、チャットUIを通じてエージェントが直接実行できるようになります。

2. 完璧なアイソレーション（分離）

Shadow DOMレンダリングとプレフィックス付きのCSSを採用しているため、Personaのウィジェットはホストページのスタイルと完全に分離されます。既存のサイトのスタイルを崩すことなく、またサイト側のスタイルがウィジェットに干渉することもなく、安心してドロップインでの導入が可能です。

3. 多彩なトランスポートとストリーミング

SSE (Server-Sent Events) ストリーミングに対応しており、プラグイン可能なパーサーを備えています。あらゆるリクエストやイベント形状に適応するためのcustomFetchやparseSSEEventを利用でき、Vercel AI SDK、OpenAI Agents、LangGraph.jsといった様々なバックエンドとの接続が容易です。

4. 高度なテーマカスタマイズ（Theming）

3レイヤーのトークンツリー（Palette, Semantic, Component）によるテーマ設定が可能です。ダークモードへの対応はもちろん、ライブテーマエディターを使用してブランドイメージに完全に一致するデザインに変更できます。ウィジェットをフォークすることなく、ブランド独自のルック＆フィールを実現します。

5. 柔軟なレイアウトオプション

Personaは、ユーザー体験に合わせて以下の3つのレイアウトを簡単に切り替えることができます。

• FLOATING（フローティング）: 画面の隅に配置されるランチャーで、サポートやオンボーディングに最適です。
• DOCKED（ドック型）: アプリケーションの横に固定されるコパイロット形式のUIです。
• FULLSCREEN（フルスクリーン）: 画面全体を使用する集中型のアシスタント体験を提供します。

How to Use（導入方法）

Personaは、NPM経由、またはスクリプトタグを使用して簡単にプロジェクトへ追加できます。

パッケージのインストール

npm install @runtypelabs/persona

基本的な初期化（Floating Widget）

数行のコードで、フローティングランチャーを配置できます。これがサポートやセールス、オンボーディング向けのデフォルト設定です。

import "@runtypelabs/persona/widget.css";
import { initAgentWidget } from "@runtypelabs/persona";

initAgentWidget({
  target: "#chat",
  config: {
    apiUrl: "https://your-api.com/chat",
    // デフォルトはフローティングランチャーです
  },
});

WebMCPツールの登録

ページ上の機能をエージェントが操作できるようにツールとして登録する例です。Personaはこれを発見し、ユーザーの承認を得てから実行します。

// ページ側でツールを登録
document.modelContext.registerTool({
  name: "search_products",
  description: "カタログを検索します。",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string" },
    },
    required: ["query"],
  },
  async execute({ query }) {
    return searchCatalog(query);
  },
});

ユースケース（Use Case）

Personaは、その柔軟性により多様なシナリオで活用されています。

• Eコマース（Storefront）: 商品検索、カートへの追加、在庫確認をエージェントが対話形式でサポートします。
• 予約・スケジュール管理（Calendar）: ユーザーの代わりに空き時間を検索し、予約フォームを入力します。
• 業務アプリケーション（Slides/Artifacts）: プレゼンテーション資料の操作や、サイドバーでの動的なアーティファクトの表示が可能です。
• カスタマーサポート（Bakery Assistant）: 複雑な設定なしで、サイトに訪問したユーザーをガイドするアシスタントを配置できます。

よくある質問（FAQ）

Q: Personaはどのような仕組みで動作しますか？

A: PersonaはVanillaJSで書かれた軽量なUIライブラリです。WebMCP標準を利用してブラウザ内のツールと対話し、SSE（Server-Sent Events）を通じてバックエンドのAIエージェントと通信することで、リアルタイムな対話とアクションを実現します。

Q: ストリーミングはどのように機能しますか？

A: SSEストリーミングを採用しており、AIからのレスポンスをリアルタイムに表示します。独自のパーサーを設定できるため、既存のあらゆるバックエンド仕様に合わせてストリームを処理することが可能です。

Q: 既存のサイトのCSSと競合しませんか？

A: はい、競合しません。Shadow DOMとCSSプレフィックスを使用しているため、Personaのスタイルがホストページに漏れることも、その逆が起こることもありません。

Q: カスタマイズはどこまで可能ですか？

A: テーマエディターを使用して、配色、セマンティックトークン、コンポーネント単位のスタイルまで詳細にカスタマイズできます。また、レイアウト（フローティング、ドック、フルスクリーン）も設定一つで変更可能です。

Q: どのようなバックエンドが使えますか？

A: SSEをサポートしていれば、どのようなバックエンドでも動作します。Vercel AI SDK、OpenAI Agents、LangGraph.js、Hono、Express、SvelteKitなど、多様なフレームワークやSDKとの統合例が用意されています。

---

Personaは、ウェブサイトにインテリジェントなエージェント体験を統合するための最速かつ最も堅牢な道を提供します。WebMCPの力を活用し、ユーザーにとって真に価値のある対話型インターフェースを今すぐ構築しましょう。