Material 3 Expressivev1.3.0-rc.1
AG-UIのガイド

AG-UIを使い始める

連携パッケージをインストールしてエージェントに接続し、アプリに会話機能を追加します。

@language-lit/material3-expressive-ag-uiは、Material 3 Expressiveを使ってエージェントとの会話を表示します。AG-UIはエージェントとインターフェースの間で、メッセージ、ツール呼び出し、実行イベントを受け渡します。このライブラリはReact UIを提供します。

このガイドはReact 18または19と@language-lit/material3-expressive 1.2.xを対象とします。WebサイトのデモではAG-UI clientとcore 0.0.59を使います。パッケージが宣言するAG-UIのpeer依存関係は、どちらも>=0.0.50です。

エージェントに接続する前に試す

インタラクティブデモはすべてブラウザー内で動作します。返信、天気予報、プロジェクト計画はスクリプトで用意されています。APIキーなしで予報の単位を変更したり、プロジェクトのタスクを完了したり、招待を承認したりできます。招待は送信されず、LLMも呼び出されません。

インストール

既存のReactアプリに連携パッケージと必須peer依存関係をインストールします。

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

ネイティブのAG-UI構成にCopilotKitは不要です。アプリですでにCopilotKit 1.71.xを使っている場合は、アダプターガイドをご覧ください。

スタイルを読み込む

アプリケーションのルートで、次の順に両方のスタイルシートを一度だけ読み込みます。

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

両パッケージは同じMaterialテーマを使います。既存のMaterial3Providerで、アプリの残りの部分とエージェントインターフェースをまとめて囲めます。カスタムカラーとネストしたスコープについてはテーマガイドをご覧ください。

エージェントに接続する

AG-UIエンドポイント用のHttpAgentを作成し、AgentProviderに紐付けてAgentChatをレンダリングします。レンダリング間でエージェントのインスタンスを維持してください。

'use client'

import { useMemo } from 'react'
import { HttpAgent } from '@ag-ui/client'
import { Material3Provider } from '@language-lit/material3-expressive'
import {
  AgentChat,
  AgentProvider,
} from '@language-lit/material3-expressive-ag-ui'

export function AgentPanel() {
  const agent = useMemo(() => new HttpAgent({ url: '/api/agent' }), [])

  return (
    <Material3Provider>
      <AgentProvider agent={agent}>
        <AgentChat
          emptyState={<p>What would you like to work on?</p>}
          composer={{ label: 'Message your agent' }}
        />
      </AgentProvider>
    </Material3Provider>
  )
}

/api/agentはURLの例です。アプリケーション側でそのURLにAG-UIエンドポイントを用意するか、エージェントのアドレスに置き換えてください。このライブラリはバックエンド、モデル、認証サービスを提供しません。モデルの認証情報はサーバー側で管理してください。公開デモではHttpAgentの代わりにローカルのAbstractAgentを使います。

チャットパネルを高さいっぱいに表示するには、親要素にheight: 40remなどの明示的な高さを設定します。AgentChatはその高さを使い、会話スレッドをスクロールします。

レイアウトを選ぶ

AgentChatはMessageThread、RunStatus、Composerを組み合わせます。別のレイアウトが必要な場合は、これらのコンポーネントを自分で配置できます。

import {
  Composer,
  MessageThread,
  RunStatus,
} from '@language-lit/material3-expressive-ag-ui'

// Render inside the AgentProvider from the previous example.
export function Conversation() {
  return (
    <section aria-label="Agent conversation">
      <MessageThread emptyState={<p>Start a conversation.</p>} />
      <RunStatus />
      <Composer label="Message your agent" />
    </section>
  )
}

各エージェントは一度だけ紐付けます。AgentProviderの子コンポーネントでは、useAgentContext()を使って状態を読み取ったりメッセージを送信したりします。AgentProviderを使わずに紐付けを管理する場合に限り、useAgent(agent)を直接使います。

次のステップ