多くの AI チャットでは、対話は次のように 文字列だけ で進みます。
「〇〇を予約したいです」
「2人です」
「プランAでお願いします」
A2UI は、このようなやり取りを 単なるテキストではなく、あらかじめ用意されたUI から最適なもの選択し 画面上に出す
ブラウザ側は、そのイベントを受け取って UI を更新する、という仕組み
A2UI は 2024年12月頃に公開された比較的新しいプロジェクトで、
Quick Start の手順が Linux / macOS 前提 になっています。
そこで今回は、
-
Windows 環境
-
公式サンプルをできるだけそのまま使う
という条件で動かしてみました。
公式手順そのままではエラーが出るため、以下の構成で動作しました。
-
Node.js: v22.16.0
-
npm: 10.9.2
-
Python: 3.10.0
-
OS: Windows 10 / 11
まず
git clone https://github.com/google/a2ui.git
を実行
そしてa2ui\renderers\lit\に移動し
scriptsフォルダを作成
copy-spec.jsファイルを作り中身に
// scripts/copy-spec.js
import fs from "fs";
import path from "path";
const src = path.resolve("../../specification/v0_8/json");
const dst = path.resolve("src/0.8/schemas");
fs.mkdirSync(dst, { recursive: true });
for (const f of fs.readdirSync(src)) {
if (f.endsWith(".json")) {
fs.copyFileSync(path.join(src, f), path.join(dst, f));
}
}
を入れて
次にa2ui\renderers\lit\package.jsonを編集
"wireit": {
"copy-spec": {
"command": "node scripts/copy-spec.js",
"files": [
"../../specification/v0_8/json/*.json"
],
"output": [
"src/0.8/schemas/*.json"
]
},
}
commandの部分を書き換える。
つぎにpip install uv
一度 npm run demo:all
[REST] INFO: Uvicorn running on http://localhost:10002 (Press CTRL+C to quit)
と一度出たらおｋ
そのあと起動するが、このままでは動かないので
a2ui\samples\agent\adk\restaurant_finder\tools.pyの 37行目
with open(file_path) as f: の部分をwith open(file_path, encoding=”utf-8″) as f:に変更
そしてもう一度
npm run demo:all
で起動できるはず
そしてブラウザでhttp://localhost:5173を開くと開始できる