8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 6

博報堂テクノロジーズ Advent Calendar 2025

@devhishiki(Yosuke Hishiki)in株式会社博報堂テクノロジーズ

CopilotKitを使ってAIエージェントネイティブなアプリケーションを考えてみた

8
Last updated at Posted at 2025-12-05

この記事はアドベントカレンダー6日目の記事です。

こんにちは。博報堂テクノロジーズの飛鋪です。
博報堂DYグループ内の横断的なクラウドインフラ組織に所属しており、主に広告効果を最大化するためのサービスやグループ内のCCoE活動等を担当しています。

はじめに

昨年より「2025年はAIエージェント元年になる」と言われていましたが、振り返ってみると、まさにその通りの1年でした。
我々エンジニアにとってのバズワードは、何といっても「Vibe Coding」だったのではないでしょうか。あと、何と言っても「チャッピー」です（笑）。ChatGPTをそのような愛嬌のある名称で呼んでいるのは衝撃的でした。

今回はアドベントカレンダーということで、この激動のAIエージェント元年を振り返りつつ、AIネイティブなアプリについて考えてみました。

2025年振り返り

世の中のトレンド

2025年を振り返ると非常に様々なAIエージェントが流行っては、また新しいものがリリースされるというキャッチアップが大変というエンジニア泣かせではありつつ、非常にエキサイティングな1年でした。

  • Devin
    • Devinによる開発が巷を賑わし、高価だがエンジニア一人雇うのと比べれば安価で少し優秀なジュニアエンジニアという評価で、AIエージェント元年の幕開けでした。（Devin自体は昨年リリース）
  • MCPサーバ
    • MCPサーバ自体は昨年Anthropic社が提唱していましたが、本格的に広まり出したのは今年の春先だった気がします。
  • Claude Code
    • ターミナルから自然言語で品質の高いコード修正やドキュメントを生成してしまうのは想像を超えておりました。
  • GitHub AcionsでのCLIエージェントの実行
    • CI/CDパイプラインの中でのコードレビューは昨年からありましたが、CLIと同等の質の高いPR等を作成するというのは革命的でした。

他にもモデルの進化はもちろんのこと、ノーコード・ローコードやAIエージェントのフレームワーク等、エンジニアにとってAI関連のニュースがない日はなかったのではないかと思えるほどでした。

チーム内での取り組み

世の中の流れもあり、今年私の所属チームで活用したAIエージェントは以下のような感じでした。

  • 冬〜春：GitHub Actions等との連携によるチーム内のワークフローで活躍するAIエージェント（第1期）
    • GitHub Actionsにpr-agentを導入
  • 春〜秋：個人のPC内で活躍するAIエージェント
    • GitHub Copilotエージェントモード、Gemini CLI、Claude Codeの利用
  • 秋〜冬：GitHub Actions等との連携によるチーム内のワークフローで活躍するAIエージェント（第2期）
    • GitHub ActionsにGemini CLI等を導入（対応中）

これからのAIエージェント

AIエージェントの活用の流れとしては、個人での活用からチームでの活用に広まっていっていきました。
また、AIエージェントのフレームワークも多数あることからAIエージェント自体の開発は進化しており、チャットを搭載したアプリは増えていると感じます。
一方で、AIネイティブなアプリケーションとはどのようにものだろうと、この機会に以前から気になっていたCopilotKitというSDKを利用して、サンプルアプリを作ってみました。

CopilotKitとAG-UIとは

CopilotKitとは

CopilotKitとは、容易に『AIアシスタント機能』を組み込めるオープンソースのSDK です。
内部ではCopilotKitが提唱するAG-UIというプロトコルを実装しており、AI側がLangGraphなどの多数のフレームワークをサポートし、フロントエンドのReactとスムーズに連携できるSDKとなります。

AG-UIとは

AG-UI（Agent-User Interaction）とは、端的に言うと 「AIエージェントとユーザー画面を簡単につなぐためのプロトコル」 です
これまでバラバラだった「AIの裏側の処理」と「画面の表示」の連携方法を統一し、開発者が簡単にAIアプリを作れるようにするための仕組みです

CopilotKitを利用したコストダッシュボード

概要

サンプルアプリは対話型インターフェースを通じてクラウド利用データを分析できる、生成AIを活用したダッシュボードです。Next.jsのフロントエンドとPythonのバックエンドエージェントで構成されています。
我々はFinOpsにも取り組んでいる最中で、様々なロールの方に合わせたコストの可視化をどう実装していくかという課題を抱えており、ユーザが見たい切り口でAIと対話しながらユーザ自身が求めているダッシュボードが作れないかなと考えていました。

今回のアプリはGoogleの以下のブログにて、CopilotKitがADK(Agent Development Kit)に対応したと言うことでこの機会に試してみました。

なお、検証に使用したコストデータは、Kaggleにあった以下のデータセットを利用させていただきました。

主な機能

  • ダッシュボード管理: エージェントは、add_pinned_metrics および update_pinned_metrics を使用して、ダッシュボード上のチャート（「メトリクス」）を追加または更新する
  • データ分析: エージェントは、様々な分析ツール（analyze_cost_by_service など）を使用してCSVデータを読み込み、分析する。
  • コンテキスト認識: エージェントは、現在のダッシュボード構成を理解するために状態（例：ピン留めされたメトリクス）を保持する。

blog.gif

アーキテクチャ

技術スタックとしては、フロントエンドに @copilotkit/react-ui が採用され、Next.js (App Router) と Tailwind CSS の構成となります。 バックエンドは Google Agent Development Kit (ADK) を利用する場合、 ag-ui-adk が採用され、エンドポイントはFastAPI での実装、エージェントロジックには ADK の構成となります。モデルには、Gemini 2.5 flash を使用しています。

  1. フロントエンド (Next.js)

    • フレームワーク: Next.js (App Router), React, TypeScript.
    • UIライブラリ: Tailwind CSS, Shadcn UI.
    • AI統合: チャットインターフェース用の @copilotkit/react-ui。
    • 責務: ダッシュボードとチャットインターフェースのレンダリング、ユーザーインタラクションの処理。

  2. APIゲートウェイ (Next.js APIルート)

    • パス: src/app/api/copilotkit/route.ts
    • ライブラリ: @copilotkit/runtime, @ag-ui/client。
    • 責務: フロントエンドのCopilotKitクライアントとバックエンドのPythonエージェント間のブリッジとして機能します。リクエストをPythonサーバーにプロキシします。

  3. バックエンドエージェントサーバー (Python)

    • フレームワーク: FastAPI.
    • エントリーポイント: agent/server.py.
    • ポート: 8000 (デフォルト).
    • 責務: ADKミドルウェアと互換性のあるHTTPエンドポイントを介してエージェントロジックを公開します。

  4. エージェントロジック

    • フレームワーク: Google Agent Development Kit (ADK).
    • 定義: agent/agent.py.
    • モデル: gemini-2.5-flash.
    • 責務: ユーザークエリの処理、ツールの実行、レスポンスの生成。

エージェントの設計とデータフロー

このアプリの肝となるエージェントは、ユーザーの「コストが高いリソースは？」といった問いかけに対し、CSVデータを分析して回答したり、ダッシュボード上のグラフ（メトリクス）を動的に書き換えたりする役割を担います。

具体的には、エージェントが State（現在のダッシュボードの状態）を保持しており、会話の内容に応じて add_pinned_metrics などのツールを実行し、フロントエンドの状態を更新するというフローになっています。

おわりに

今回検証してみて、これからのAIネイティブなアプリケーション開発はユーザーとAIエージェントがある程度自由に伴走して進む道を、どう舗装していくかが求められるのかもしれないと感じました。
今後どのようなプロトコルやSDKがスタンダードとなるかはまだわかりませんが、思ったより容易にAIエージェントネイティブなアプリケーションを開発できることがわかりました。

一方でGoogleのようなモデル開発から様々なアプリケーションを保有するプラットフォーマーは、その機能をあっという間に取り込む、もしくはそれ以上のものを生み出す強大さがあり、今回のサンプルケース程度では Gemini in Looker で賄えてしまうなと感じました。

そんなプラットフォーマーも含め、来年はどのようなAIの進化を体験できるのか今から楽しみで、個人的にはオープンモデルにも注目したいと思ってます。

このアドベントカレンダーは、まだまだ続きます。 明日以降もさまざまな記事が毎日公開されていくので、ぜひこの後もチェックしてもらえると嬉しいです。

8
0
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
Sign upLogin
8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?