logo

2026年1月29日

CopilotKitで爆速チャットUI構築

ChatGPT や Gemini のようなチャット形式の UI を実現したくても、自分でイチから作るのは構成要素や検討事項が多くなかなか大変です。ストリーミングでレスポンスを返すにはサーバとクライアントでどういう形式で返す約束事にすれば良いのかとか、Markdown のレンダリングとか、いいねボタンとかとか…。

CopilotKit と AG-UI の組み合わせが、とてもイケていたので紹介します。

CopilotKit とは

LLM や AI Agent アプリの UI を実現するためのオープンソースのライブラリ。

ビルド済みの React コンポーネント（CopilotChat, CopilotSidebar, CopilotPopup）を提供しているので、ベーシックなチャット UI をすぐに実現できます。CSS によるスタイリングや、メッセージや Agent の進捗状況といった細かいパーツごと（サブ React コンポーネントごと）の制御もサポートされています。

柔軟にカスタマイズすることも可能なので、単純なチャット UI に留まらず、アプリケーションに AI が深く組み込まれたユーザ体験を作れそうです。通常 LLM によるツール呼び出しといえばバックエンド側のツール（関数）の実行をイメージしますが、フロントエンド側に定義されたツールの実行もできる（後述の AG-UI がこれを可能にしています）ので、Humain-in-the-loop を始め、UI を制御するための実装がとても容易です。

AG-UI とは

Agent–User Interaction Protocol の略。AI Agent と UI を結ぶためのプロトコル。

Agentic protocols

ある AI Agent が使うツールを呼び出すためのプロトコルが MCP、ある AI Agent が別の Agent と対話するためのプロトコルが A2A だとしたら、ユーザが触れるフロントエンドアプリケーションとその AI Agent の間のプロトコルが AG-UI です。
ストリーミング出力や、ファイル添付、思考過程、フロントエンド側のツール呼び出し・バックエンド側ツールの描画、Human-in-the-loop 等、AI Agent が求めるであろう要件が規格化されています。

AG-UI は元々、CopilotKit の LangGraph と CrewAI とのパートナーシップから生まれたもののようです。今では様々なフレームワークに統合されており、Microsoft Agent Framework や Google ADK、Pydantic AI、AG2 等、様々なベンダー・コミュニティが AG-UI をサポートしています。

試してみよう

今回は色々なパターンがありうる組み合わせの中で、次の構成で試してみます。

  • CopilotKit
  • Microsoft Agent Framework

ソースコードは以下に置いてあります。
SogoKato/msagent-agui-copilotkit: Microsoft Agent Framework - AG-UI - CopilotKit

環境

  • フロントエンド
    • Node.js 25.3.0
    • React 19.2.3
    • Next.js 16.1.2
    • CopilotKit 1.51.1
    • AG-UI 0.0.42
  • バックエンド
    • Python 3.12.0
    • Microsoft Agent Framework 1.0.0b260123
    • AG-UI 0.1.10

バックエンド

最低限 LLM だけ設定します。Microsoft Agent Framework に FastAPI 用の AG-UI の統合があるので、それを使えば簡単です。フロントエンドからアクセスするエンドポイントは、ここでは /agent にしています。

main.py

from __future__ import annotations

import os

from agent_framework import ChatAgent
from agent_framework.ag_ui import add_agent_framework_fastapi_endpoint
from agent_framework.openai import OpenAIChatClient
from dotenv import load_dotenv
from fastapi import FastAPI

load_dotenv()

chat_client = OpenAIChatClient(
    model_id=os.getenv("OPENAI_CHAT_MODEL_ID", "gpt-5-mini"),
    api_key=os.getenv("OPENAI_API_KEY"),
)

agent = ChatAgent(
    name="MyAgent",
    instructions="You are a helpful assistant.",
    chat_client=chat_client,
)

app = FastAPI(title="Agent API")
add_agent_framework_fastapi_endpoint(app=app, agent=agent, path="/agent")
uv run -- uvicorn main:app --port 8888 --reload

フロントエンド

Next.js の basePath を指定しているアプリを想定します。

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  basePath: '/myprefix',
};

export default nextConfig;

まずはフロントエンドの API です。 CopilotRuntime のインスタンス化時にバックエンドのエンドポイントを指定します。
copilotRuntimeNextJSAppRouterEndpoint() に上記の runtime を渡し、クライアントに公開するエンドポイントも指定します（ここでは /api/copilotkit ）。

app/api/copilotkit/route.ts

import {
  CopilotRuntime,
  ExperimentalEmptyAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";
import { NextRequest } from "next/server";

// 1. You can use any service adapter here for multi-agent support. We use
//    the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();

// 2. Create the CopilotRuntime instance and utilize the Microsoft Agent Framework
//    AG-UI integration to setup the connection.
const runtime = new CopilotRuntime({
  agents: {
    my_agent: new HttpAgent({ url: "http://localhost:8888/agent" }),
  },
});

// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });

  return handleRequest(req);
};

次にページです。
上で決めた runtime のパスを指定します。Next.js の bastPath を設定している場合はパスに含めるのを忘れないようにしましょう。

app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body>
        <CopilotKit runtimeUrl="/myprefix/api/copilotkit" agent="my_agent">
          {children}
        </CopilotKit>
      </body>
    </html>
  );
}

app/page.tsx

import { CopilotChat } from "@copilotkit/react-ui";

export default function Home() {
  return (
    <div>
      <CopilotChat
        labels={{
          title: "Your Assistant",
          initial: "なんでもきいてね！",
        }}
      />
    </div>
  );
}
pnpm dev

http://localhost:3000/myprefix にアクセスすればチャット画面が現れます。

質問してみるとちゃんと回答が返ってきました。品質の良い基本的なチャット UI が簡単に手に入るなんて夢のような話ですね。そのままでも十分使えますし、ここからカスタマイズしていくのも楽しそうです。

copilotkit

余談

というか、今時の Chat Completions API って今の日付わかるんですね。curl で https://api.openai.com/v1/chat/completions 叩いてみてもそうだったので、CopilotKit や Microsoft Agent Framework で情報が差し込まれていないことを念のため確認。

参考文献

Kanikoの代わりにGitLab CIでBuildKitを使う

2026年1月13日