GPT-3.5+などの言語モデルを使用した関数呼び出しの導入は、言語モデルがレンダリングすることを決定するカスタマイズされたインタラクティブユーザーインターフェースの道を開いた。
React Server ComponentsとServer Actionsを活用することで、AI SDKはai/rscパッケージを介してインターフェースのレンダリング機能をシームレスに統合します。ai/rscを使用することで、関数呼び出しをサポートしていないモデルを、JSONのような構造化された出力をエミュレートするか、その出力を直接ストリーミングすることができます。
検索エクスペリエンス内でコンポーネントを直接レンダリングすることで、ユーザーに言葉以上のものを見せてください。
エージェントの実行を解釈しやすくして、ユーザーが裏側の魔法を把握できるようにしましょう。
AI SDKは、AIStateとUIStateという2つの新しい概念を導入しています。これらの状態は、サーバーサイドのAI操作とアプリケーションでレンダリングされるクライアントサイドのUIとの明確な関心の分離を導入します。この分離により、開発者はAIの状態を安全に維持できるようになります。これには、システムプロンプトなどのメタデータが含まれる場合があります。一方、UI状態は、React Server Componentsが効率的にクライアントにストリーミングされるよう設計されています。
AIStateは、LLMが読み取る必要があるすべてのコンテキストのJSON表現です。チャットアプリの場合、AIStateは一般的にユーザーとアシスタントの間のテキスト会話履歴を保存します。実際には、createdAtなどの他の値やメタ情報を保存するためにも使用できます。AIStateはデフォルトでサーバーとクライアントの両方でアクセス/変更が可能です。
UIStateは、アプリケーションがUIを表示するために使用するものです。これは完全にクライアント側の状態であり（useStateと非常に似ています）、LLMによって返されたデータやUI要素を保持できます。この状態は何でもできますが、サーバー上ではアクセスできません。
生成されたUIからサーバーからの更新をリクエストする
多くの場合、レンダリングするインターフェースはサーバーからの更新をリクエストする必要があります。たとえば、天気アプリは最新の天気データを5分ごとにリクエストする必要があるかもしれませんし、ボタンを押すと検索が実行されるべきです。これを実現するために、UIコンポーネントにサーバーアクションを渡し、必要に応じて呼び出すことができます。
たとえば、createAI で handleUserMessage アクションが登録されている場合、次のようにネストされたサーバーアクションを定義できます:
そして、WeatherCardコンポーネントは、最新の天気データを読み込んでクライアントUIを更新するために、refreshAction関数をonClickイベントハンドラ、エフェクト、またはポーリングのような方法で呼び出すことができます。
AIの状態は、言語モデルに提供される会話の文脈を表し、通常はチャットメッセージの配列です。ユーザーがフォームを記入したり、スライダーのようなUI要素とやり取りしたりする場合、新しい情報で言語モデルのコンテキストを更新する必要があります。useAIStateフックを使用して、クライアント上でAIの状態を変更することができます。
以下の例では、ユーザーが株を購入する数量をスライダーで選択できるようになっています。ユーザーがスライダーを変更すると、新しい情報でAIの状態を更新します。
AI SDKが提供する強力な機能の1つは、他のUIコンポーネントの中でUIコンポーネントをストリーミングできる能力です。これにより、小さな再利用可能なコンポーネントから構築された複雑なUIを作成できます。以下の例では、historyChartをストリーム可能なプロップとしてStockCardコンポーネントに渡します。StockCardはhistoryChartをストリーム可能な形でレンダリングし、サーバーから新しいデータが返されると自動的に更新されます。
Last updated on March 2, 2024