React向けAG-UI

エージェントにMaterial 3 Expressiveのインターフェースを。

AG-UIを使ってAIエージェント向けのインターフェースを構築できます。返信を届いた順に表示し、ツール呼び出しを便利なUIに変換し、エージェントが操作できるタイミングをユーザーが決められるようにします。

AG-UIライブラリを使うと、このサイト全体で使われているReactコンポーネント、カラー、モーションで会話を表示できます。

ここで試す

エージェントとの会話を試す

スクリプトによるデモです。LLMやAPIキーは必要ありません。

シナリオを選択

すべての応答はスクリプトです。再生はいつでも停止できます。

返信が少しずつ届く様子を確認できます。推論を開くと、その背景にあるスクリプトのメモを読めます。

Material 3 Expressiveの特徴は何ですか？

シナリオを再生すると会話が表示されます。

ひとつのデザインシステム

アプリのコントロールにはMaterial 3 Expressiveを、会話にはAG-UI連携パッケージを使います。どちらもライトモードとダークモードを含む同じテーマに従います。このページ上部のテーマコントロールを切り替えて、両方の変化を確認してください。

AgentChatから始めるか、メッセージ、推論、ツール呼び出し、アクティビティ、実行状態を独自のレイアウトに配置できます。テキストよりカードやコントロールが適している場合は、ツールレンダラーを登録します。

このパッケージはAG-UIストリームを描画します。LLMは含まず、呼び出しもしません。必要になったら独自のエージェントを接続してください。

開発を始める

React 18または19のアプリに、ネイティブAG-UIパッケージとそのpeer依存関係をインストールします。

npm install @language-lit/material3-expressive-ag-ui @language-lit/material3-expressive @ag-ui/client @ag-ui/core

次の順番で両方のスタイルシートを読み込み、Material3Provider内でAgentProviderを使ってエージェントを接続します。

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

このアダプターが対応するのはCopilotKit 1.71.x v1のみです。既存のCopilotKitセットアップ内で@language-lit/material3-expressive-ag-ui/copilotkitから読み込みます。v2 APIには対応していません。

チャットから始めて、アプリに必要なコンポーネントを追加できます。これらのガイドではネイティブAPIとCopilotKitアダプターを説明します。