CopilotKitでAG-UIを使う

MaterialアダプターがサポートするのはCopilotKit 1.71.x v1のみです。1.71.0でテストされています。CopilotKitのv2 スロット APIは@language-lit/material3-expressive-ag-uiではサポートされていません。

CopilotKitがすでに会話を管理している場合にこのアダプターを使います。ネイティブのAG-UIエージェントにははじめ方ガイドを使ってください。

任意のpeer依存関係をインストールする

ネイティブセットアップのパッケージをインストールし、サポート対象のCopilotKit peer依存関係を追加します。

npm install @copilotkit/react-core@~1.71.0 @copilotkit/react-ui@~1.71.0

アプリケーションのルートで、両方のMaterialスタイルシートを読み込んでください。

import '@language-lit/material3-expressive/styles.css'
import '@language-lit/material3-expressive-ag-ui/styles.css'

プリセットを適用する

既存のCopilotKitとMaterial3Providerプロバイダーの内側で、copilotKitComponentsをチャットに展開します。

'use client'

import { CopilotChat } from '@copilotkit/react-ui'
import { copilotKitComponents } from
  '@language-lit/material3-expressive-ag-ui/copilotkit'

export function MaterialChat() {
  return <CopilotChat {...copilotKitComponents} />
}

同じプリセットはCopilotPopupとCopilotSidebarでも使えます。Materialのメッセージ表示、入力コントロール、およびこれらのコンテナーで使われるヘッダー、ランチャー、ダイアログが含まれています。classNameを追加する場合は、プリセットのクラスも残してください。

<CopilotChat
  {...copilotKitComponents}
  className={`${copilotKitComponents.className} support-chat`}
/>

候補や添付ファイルなど、他の機能には引き続きCopilotKitのスタイルが必要な場合があります。アダプターのコントロールにはMaterialスタイルが使われます。

会話の管理はCopilotKitに任せる

このパッケージのAgentProviderでアダプターを囲まないでください。エージェント接続、メッセージ、ツールアクション、interruptはCopilotKitが管理します。既存のCopilotKit設定で構成してください。

ツールと承認のレンダラーは、通常どおりCopilotKitを通じて登録します。アダプターはそのUIと応答コールバックを維持します。ネイティブのAgentProvider.toolRenderersレジストリはネイティブAG-UI構成用であり、アダプターの設定には使いません。

登録されていないツールに対して、CopilotKitが空のgenerative UIラッパーを提供することがあります。その場合、ツールの表示フォールバックがないことがあります。すべての呼び出しを表示するには、CopilotKitのuseDefaultToolでcatch-allを登録してください。アダプターの例では、ToolCallCardとの連携を示しています。

エクスポートされるスロット

プリセットにはAssistantMessage、UserMessage、Messages、Input、RenderMessage、Window、Button、Headerが含まれています。/copilotkitエントリから個別に読み込むこともできます。それぞれprops型がエクスポートされています。

このエントリは、従来のRenderTextMessage、RenderActionExecutionMessage、RenderAgentStateMessage、RenderResultMessage スロットもエクスポートします。それらのpropsはAG-UI形式のCopilotKit 1.71.xメッセージpropsであり、旧式のGraphQLメッセージインスタンスではありません。

テキストは引き続きプレーンテキストです。アダプターはMarkdown表示を追加しません。連携先をアップグレードする前にリリースノートを確認してください。