最近、AIエージェントを使った開発が増えてきました。

ただ実際に作ってみると、あるポイントで手が止まります。
「これ、どうやって画面とつなぐの？」

何が課題だった？

AIエージェントは、裏側の処理（バックエンド）は作れても、

• 途中の生成結果を表示する
• ツール実行の結果を見せる
• 承認ボタンを出す（Human-in-the-Loop）

といった画面側の実装は、毎回個別に作る必要があります。

つまり、エージェントとUIのつなぎ込みがバラバラになりがちです。

AG-UIという考え方

そこで登場するのがAG-UI（Agent–User Interaction）です。

これは、AIエージェントとUIのやり取りを共通ルールで扱う仕組みです。

AG-UIとは？

従来は、

• テキスト表示
• ボタン表示
• ローディング表示

などをそれぞれ個別に実装していました。

AG-UIでは、「イベント」としてまとめて扱うようになります。

例えば、

• テキスト生成開始
• 途中経過
• 完了
• ツール実行結果
• ユーザーの承認操作

などを、同じフォーマットでやり取りできるようになります。

今回やったこと

今回のブログでは、

• AG-UIを使わない場合
• AG-UIを使う場合

を比較しながら、実装がどう変わるかを検証しました。

AG-UIがない場合の構成

AG-UIがある場合の構成

さらに、CopilotKitというフレームワークを使って、

• チャットUI
• 承認フロー（Human-in-the-Loop）

を実際に構築しています。

CopilotKit概要図（https://www.copilotkit.ai/ から引用）

何がうれしいの？

今回の取り組みで感じた価値は3つです。

① UI実装がシンプルになる

イベントを受け取って表示するだけでよく、フロントエンドの実装が楽になる

② フレームワークに依存しない

どのエージェントを使っていても、同じやり方でUIと接続できる

③ 再利用できる

一度作ったUIを、別のエージェントでも使い回せる

まとめ

AIエージェント開発は今、

• モデルを使う
• ツールとつなぐ

だけでなく、UIまで含めて設計する時代になっています。

その中で、エージェントとUIの接続をどうするかが重要なポイントになってきました。

AG-UIはその課題を解決する、UI連携の標準化の仕組みです。

Acroquestでは、

• MCP（ツール連携）
• A2A（エージェント連携）
• AG-UI（UI連携）

といったように、AIを“実際に使える形”にする技術検証を行っています。

もし

• AIに興味がある
• まだ詳しくないけど触ってみたい
• 実務で使える開発をやってみたい

そんな方がいれば、ぜひ一度お話しましょう。

具体的な実装コードなど詳しくは当社技術ブログに記載しておりますので、詳細を知りたい場合はこちらをご覧ください。

ぜひ、当社で一緒に働いてみませんか？

チャレンジングな案件が多く、成長の機会が多く得られる環境です

当社では、機械学習／AIや生成AIに加えて、AWSやAzureを活用したITサービス開発事業を推進しています。そこで、最先端技術を駆使しながら、社会を進化させたい情熱とスキルのある機械学習・AIエンジニア、クラウドエンジニアを募集しています！

私たちが取り組む案件は、最先端技術を用いる内容や高難易度の内容が多く、チャレンジングな環境なので、成長の機会が多く得られることをお約束します。