Google A2UIをMaterial 3 Expressiveで描画します。

開発を始める

ReactアプリにA2UIを追加する

React 18または19のアプリにレンダラーとpeer依存パッケージをインストールします。

2つのスタイルシートをこの順番で読み込みます。次にuseA2uiでプロセッサーを管理し、各サーフェスをMaterial3Provider内で描画します。

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

import { Material3Provider } from '@language-lit/material3-expressive'
import { A2uiSurface, useA2ui } from '@language-lit/material3-expressive-a2ui'

export function AgentPanel({ send }) {
  const { surfaces, processMessages } = useA2ui({
    onAction: (action) => send(action),
  })
  // Call processMessages(messages) with each batch your agent delivers.
  return (
    <Material3Provider>
      {surfaces.map((surface) => (
        <A2uiSurface key={surface.id} surface={surface} />
      ))}
    </Material3Provider>
  )
}