自由すぎるAIを飼い慣らす。Reactエンジニア視点のgoogle/A2UI徹底解説


自由すぎるAIを飼い慣らす。Reactエンジニア視点のgoogle/A2UI徹底解説

google/A2UI

2025-12-30

今回は Google が公開している google/A2UI というライブラリについて解説しますね。これ、一言で言うと「生成 AI が作っためちゃくちゃな UI コードを、エンジニアが泣かずに済むように整えてくれる魔法の杖」なんです。

まずは、これがなぜ必要なのか、ある開発現場の「コント」から見ていきましょう。

PM（佐藤）
「エンジニアさん！生成 AI を使って、一瞬で『タスク管理画面』を作るプロンプトを書いたよ！これで開発工数 0 だ！」 エンジニア
「（嫌な予感）ほう…どんなコードが出力されたんですか？」 PM
「見てよ、この AI の回答！『ここに React のコードを書きますね』とか余計な解説が入ってるけど、コード自体は完璧だ（ドヤァ）」 エンジニア
「……佐藤さん、これ。コードの途中に自然言語が混ざってるし、ボタンの Component 名が勝手に SuperMegaButton になってます。今のプロジェクトにそんな部品ありません。そのままじゃエラーで真っ白ですよ。」 PM
「えっ、そんな……！手動で直すの？」 エンジニア
「はい、結局僕が全部書き直します。工数 0 どころか、ゴミ掃除で 2 倍かかりますね（胃薬を飲む）」 PM
「うわあああ！AI が便利になっても、エンジニアに渡すまでの『型』がバラバラすぎて管理しきれないよ〜！！」

そんな佐藤 PM のような悲鳴を救うのが A2UI (Agent to UI) です。

生成 AI（LLM）は便利な反面、出力が「おしゃべり」だったり、既存の UI ライブラリを無視したりします。A2UI は、AI の出力を既存の UI コンポーネント（Material UI や自社ライブラリなど）に強制的にマッピングし、Web アプリとして正しく動く形式に変換するための仲介役を果たします。

Schema 駆動
AI に「この JSON 形式で答えて」と強制し、既存の React/Vue コンポーネントに自動で流し込めます。

型安全性
TypeScript と相性が良く、AI が生成した「謎のプロパティ」を排除できます。

ストリーミング対応
AI が回答を生成している最中から、画面を少しずつ組み立てて表示できます。

実際にどう使うのか、React を例に超シンプルに解説します。

まずは npm でパッケージを入れます。

npm install @google/a2ui

AI に「ボタン」と言われたら、自社の MyCustomButton を使うように設定します。

import { A2UIProvider } from '@google/a2ui';
import { MyCustomButton, MyCard } from './components';

// AIの言葉と、実際のコンポーネントを紐付ける「辞書」を作る
const componentMap = {
  'button': MyCustomButton,
  'card': MyCard,
};

function App() {
  return (
    <A2UIProvider components={componentMap}>
      <ChatInterface />
    </A2UIProvider>
  );
}

AI から返ってきた JSON データ（UI の構造が書かれたもの）を A2UI コンポーネントに渡すだけです。

import { A2UI } from '@google/a2ui';

const ChatInterface = () => {
  // 本来は AI (LLM) から送られてくるデータ
  const aiGeneratedPayload = {
    type: 'card',
    props: { title: 'PMのタスク' },
    children: [
      { type: 'button', props: { label: '胃薬を飲む', color: 'red' } }
    ]
  };

  return (
    <div>
      <h2>AI生成画面</h2>
      {/* これだけで、AIの指示が正しいReactコンポーネントとして描画される！ */}
      <A2UI payload={aiGeneratedPayload} />
    </div>
  );
};

A2UI を導入すると、PM の佐藤さんはこう変わります。

Before
「AI が変なコードを出した！エンジニアに怒られる！」

After
「AI に『A2UI 用の形式で出して』と言うだけで、エンジニアが用意した本物のコンポーネントが勝手に並ぶぞ！」

エンジニア側も、AI が勝手に作った野良コードをメンテナンスする必要がなくなり、「あらかじめ定義した安全なコンポーネント」だけを AI に使わせることができるので、安心感が違います。

まさに、AI 時代の「デザインシステムと LLM の接着剤」ですね。

いかがでしたでしょうか？「自社の UI コンポーネントを使って AI に画面を作らせたい」という具体的なユースケースがあれば、もっと詳細な実装パターンも提案できますよ。


google/A2UI