polpo-react

Polpo React

ランタイムの状態管理とフックには@polpo-ai/reactを使用します。組み合わせ可能なUIには@polpo-ai/chatを使用します。 アプリケーションのルーティングと、ビジネス側でのクライアントツール実行は、利用するアプリ側で管理します。

インストール

npm install @polpo-ai/chat @polpo-ai/sdk @polpo-ai/react \
  react-virtuoso lucide-react streamdown

または、npx @polpo-ai/ui addでソースコンポーネントを追加します。新しいアプリケーションには npx create-polpo-appを使用します。

プロバイダー

import { PolpoProvider } from "@polpo-ai/react";

<PolpoProvider baseUrl={process.env.NEXT_PUBLIC_POLPO_URL!} autoConnect={false}>
  {children}
</PolpoProvider>

baseUrlはプロジェクトのルートです。末尾に/v1や/api/v1を追加しないでください。権限のある サーバーAPIキーをブラウザーのバンドルに含めないでください。認証情報をサーバー側に保持する必要がある場合は、 アプリケーションの認証済みバックエンドまたはプロキシを使用してください。

チャットの選択

一般的なチャットには、高レベルコンポーネントを使用します。

<Chat agent="support" sessionId={sessionId} />

永続的な配信、カスタムインタラクション、明示的なクライアントツール、Loopの継続、または独自のメッセージ構成が必要な場合は、 useChatを直接使用します。

UIの不変条件

• Polpoから取得したSessionの履歴を正とし、再接続後やクライアントツールの継続時に楽観的メッセージを重複させないでください。
• reconnectingはstreamingと分けて表示し、切り離された永続実行を失敗としてマークしないでください。
• クライアントツールを表示する前に、その名前と引数をローカルハンドラーに照らして検証してください。
• 安定した冪等性キーと最新のSessionバージョンを使って、ツールの結果から処理を継続してください。
• 提案は、それを生成したアシスタントメッセージに属し、そのメッセージが最新である間のみ実行可能です。
• 添付ファイルには型付きコンテンツパーツと認証済みのファイルURL解決を使用してください。ローカルファイルシステムのパスをブラウザーに表示されるメッセージに含めないでください。

参考資料

• references/runtime-chat.md：最新のuseChat、永続性、インタラクション、スキル、継続について。
• references/components.md：コンポーネントのプロパティについて。
• references/patterns.md：現在の構成パターンについて。
• references/cli.md：UIのひな形を作成するコマンドについて。
• references/theming.md：トークン、ダークモード、フォント、Tailwindについて。
• references/contract-version.md：確認済みのパッケージバージョンについて。