7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

エンタープライズ向けAIエージェント開発テンプレートを作ってみた(Microsoft Agent Framework / CopilotKit / AG-UI)

7
Last updated at Posted at 2025-12-12

最近、空き時間でエンタープライズ向けの AI Agent のテンプレートプロジェクトを作って、GitHub に公開しました。⇩

このテンプレートを作った一番大きな理由は、将来エンタープライズ向けの AI Agent プロダクトを作るときに、そのまま土台として使える「良いお手本(ベース)」が欲しかったからです。
少し手を入れるだけで使える状態になっていると、毎回ゼロから組むよりもだいぶ楽になりますよね。

もう一つの理由は、ここ数ヶ月でいくつか面白そうな新しいAI 関連の技術やサービス(Microsoft Agent Framework、CopilotKit、AG-UI プロトコルなど)が出てきて、「せっかくだから一通りまとめて触ってみよう」と思ったからです。
どうせ作るなら遊びではなく、そのまま本番でも使えるレベルのテンプレートにしておこう、というコンセプトで作りました。

全体のアーキテクチャはこんな感じです。(NotebookLMに作ってもらいました)

architect.png

構成としては、大きく次の 4 つのパートに分かれています。
1. フロントエンド
2. バックエンド / Agent 実装
3. Azure 側の各種サービス
4. DevOps / インフラ(CI/CD, Terraform など)

それでは一通り紹介していきます。

1. フロントエンド

まずはフロントエンドからです。

image.png

フロントはオーソドックスに Next.js ベースで構成していますが、UI ライブラリとしては最近よく名前を聞く CopilotKit を採用しています。

CopilotKit は「AI プロダクト向け UI ライブラリ」で、チャット UI に必要な要素がかなり揃っています。
たとえば:

  • LLM とのストリーミング対話
  • Function Calling
  • メモリ(会話履歴)管理
  • System prompt / Tool 呼び出しの扱い

などがコンポーネントとして用意されていて、少ないコードで「それっぽい」チャット UI が組めます。
また、今回使っている AG-UI プロトコルにもネイティブ対応しているため、バックエンドとの接続もやりやすいです(AG-UI は後述します)。

UI はざっくりこんな雰囲気です。

image.png

CopilotKit はこちら:

2. バックエンド / Agent 実装

image.png

バックエンドは FastAPI で API サーバーを立てています。
Agent 部分は Microsoft Agent Framework を使って実装しました。

Microsoft Agent Framework は、ここ最近Microsoft が公開した Agent 開発向けのフレームワークです。
以前の Semantic Kernel や AutoGen の良い部分を取り込みつつ、コードベースはかなり分かりやすく整理されていて、さらに LangGraph に似た Workflow ベースの設計 になっています。

  • 1 つの Agent に複数の Tool をぶら下げる
  • 複数 Agent を Workflow として繋ぐ
  • 実行状況をトレースしてモニタリングする

といった構成がかなり素直に書けるので、複雑な Agent ネットワークをプロダクション運用したいというケースと相性が良いと感じました。

ドキュメントはこちら:

このテンプレートには、分かりやすさ重視の「チュートリアル用 Agent」を入れています。主な機能は次の 2 つです。

  • 疑似データを使った航空券の料金検索
  • 表・チャートの描画(MCP Tool 経由)

実装上は「航空券の料金を取得する Agent」と「取得したデータから表/チャートを生成する Agent」という 2 つの Agent に分け、それぞれに 1 つずつ Tool を持たせて、最後に Workflow として繋いでいます。(ただ、実務で同じ要件を扱う場合は、Agent を分割しすぎると設計・運用の複雑さが増えやすいので、1つの Agent に複数 Tool を持たせる構成の方がシンプルで扱いやすいことと思います。ここでは Workflow 機能を見せるためにあえて 2 Agent に分けています)

また、エンタープライズ利用を見据えて、禁止ワードチェックとPrompt Injection 対策の middleware も挟んでいます。Agent 自体を作るだけでなく、「どう守るか」という観点も最初からテンプレートに入れておきたかったので、最低限のガードレールを実装しています。

AG-UI プロトコルについて

今回、フロントとバックエンドの通信には一般的な REST API ではなく、AG-UI というプロトコルを試しています。
AG-UI は AI アプリケーション向けに設計された新しい通信プロトコルで、一番の特徴は「動的なストリーミング」の仕組みが標準化されている点です。

  • 従来の REST:1 リクエスト → 1 レスポンス
  • AG-UI:1 リクエストに対して複数のイベント(メッセージ・ツール実行・UI 更新など)が順次流れてくる

というイメージで、チャット UI や Agent のステップ実行をリアルタイムに反映させたいときにかなり扱いやすくなっています。

AG-UIの公式ドキュメント:

イメージ図:

image.png

3. Azure サービス構成

image.png

まず前提として、エンタープライズ向けに寄せるなら基盤をすべて Azure に揃えておくと運用・管理の設計がしやすいと思いましたので、主要機能は Azure で一通り揃えました。

主な構成は以下です。

  • フロント / バックエンドのデプロイ

    • Azure Static Web Apps(フロント)

    • Azure Container Apps(バックエンド)

  • LLM API

    • Azure OpenAI Service
  • DB

    • Azure Cosmos DB
  • モニタリング / トレーシング

    • OpenTelemetry + Application Insights

ここで個人的に便利だなと思ったのが、Application Insights の Dashboards with Grafana です。
Agent Framework で組んだ Agent / Tool / Workflow の呼び出しがかなり細かい粒度で可視化できて、監視・原因調査がやりやすくなります。

(例)

image.png

CI/CD 周りは Azure Container Registry を使っており、GitHub と繋ぐことで比較的シンプルにパイプラインを組めます。

また、認証についてはエンタープライズ前提なら Managed Identity を基本にするのが良いので、このテンプレートでもできるだけ Key ベースの運用にならないように意識しています。

4. DevOps / インフラ

image.png

このあたりはまだ自分も基礎的なところをちゃんと揃えたレベルですが、最低限の実運用を意識して入れています。

  • ローカル開発は Docker Compose で起動
  • デプロイは GitHub ↔ Azure を接続して ACR を中心に CI/CD
  • Azure リソースは Terraform で一括管理(環境のセットアップ、切り替えなど一発で作れるように構成)

ディレクトリ構成

最後に、コードはできるだけ整理された状態を保つことを意識しており、全体としては概ね次のようなディレクトリ構成になっています。

maf/
├── main.py                     # FastAPI entry point
├── src/
│   ├── services/               # 🧠 Core business logic
│   │   ├── agent.py            #    Agent definitions & CopilotKit integration
│   │   ├── tools.py            #    Tool implementations (flight query, chart)
│   │   └── workflow.py         #    Multi-agent workflow orchestration
│   ├── db/                     # 💾 Database layer
│   │   ├── cosmos.py           #    Cosmos DB connection (Azure Identity)
│   │   └── cosmos_chat_store.py#    Chat message persistence for Agent Framework
│   ├── schemas/                # 📋 Data models (Pydantic)
│   │   └── flight.py           #    Flight data schema
│   ├── middleware.py           # 🛡️ Security middleware (prompt injection detection)
│   └── exceptions.py           # ⚠️ Global exception handling
├── tests/                      # 🧪 Unit tests (pytest)
├── frontend/                   # 🎨 Next.js + CopilotKit
│   └── src/app/
│       ├── layout.tsx          #    App layout with CopilotKit provider
│       ├── page.tsx            #    Chat UI component
│       └── api/copilotkit/     #    API route (proxy to backend via AG-UI)
├── terraform/                  # 🏗️ Infrastructure as Code
│   ├── main.tf                 #    Azure resource definitions
│   ├── variables.tf            #    Configurable variables
│   ├── outputs.tf              #    Resource outputs (URLs, keys, etc.)
│   └── README.md               #    Terraform usage guide
├── docker-compose.yml          # 🐳 Local development (one command)
└── Dockerfile                  # 📦 Backend container

ご興味がありましたら、ぜひリポジトリをご覧ください。
参考になりましたら、⭐️ を付けていただけると嬉しいです。

また少し宣伝ですが、この前 RAG の精度改善について本を書きました。
Amazon の人工知能カテゴリ新着ランキングで 1 位も取れましたので、RAG に興味のある方はよければこちらもどうぞ。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?