AG-UI プロトコル解説 ─ エージェントとユーザーをつなぐ標準プロトコルを Microsoft Agent Framework で実装する

// AG-UI の核心的な抽象化
type RunAgent = () => Observable<BaseEvent>
 
class MyAgent extends AbstractAgent {
  run(input: RunAgentInput): RunAgent {
    const { threadId, runId } = input
    return () =>
      from([
        { type: EventType.RUN_STARTED, threadId, runId },
        {
          type: EventType.MESSAGES_SNAPSHOT,
          messages: [
            { id: "msg_1", role: "assistant", content: "Hello!" }
          ],
        },
        { type: EventType.RUN_FINISHED, threadId, runId },
      ])
  }
}

import { HttpAgent, type AgentSubscriber } from "@ag-ui/client"
import { EventType } from "@ag-ui/core"
 
const agent = new HttpAgent({
  url: "https://your-agent-endpoint.com/agent",
  agentId: "my-agent",
  threadId: "conversation-123",
})
 
const subscriber: AgentSubscriber = {
  onEvent: ({ event }) => {
    switch(event.type) {
      case EventType.TEXT_MESSAGE_CONTENT:
        // テキストを UI に表示
        break
      case EventType.TOOL_CALL_START:
        // ツール呼び出しの開始を表示
        break
    }
  },
  onRunFailed: ({ error }) => console.error("Agent error:", error),
  onRunFinalized: () => console.log("Run complete")
}
 
await agent.runAgent({
  tools: [...],
  context: [...]
}, subscriber)

interface BaseEvent {
  type: EventType       // イベントタイプの識別子
  timestamp?: number    // イベント生成時刻（オプション）
  rawEvent?: any        // 変換元の生イベントデータ（オプション）
  metadata?: Record<string, any> // 追加イベントメタデータ（オプション）
}

→ middleware1
  → middleware2
    → middleware3
      → agent.run()
    ← events flow back through middleware3
  ← events flow back through middleware2
← events flow back through middleware1

import { MiddlewareFunction } from "@ag-ui/client"
import { EventType } from "@ag-ui/core"
 
// テキストメッセージにプレフィックスを付加するミドルウェア
const prefixMiddleware: MiddlewareFunction = (input, next) => {
  return next.run(input).pipe(
    map(event => {
      if (
        event.type === EventType.TEXT_MESSAGE_CHUNK ||
        event.type === EventType.TEXT_MESSAGE_CONTENT
      ) {
        return { ...event, delta: `[AI]: ${event.delta}` }
      }
      return event
    })
  )
}
 
agent.use(prefixMiddleware)

import { Middleware } from "@ag-ui/client"
 
class MetricsMiddleware extends Middleware {
  private eventCount = 0
 
  run(input: RunAgentInput, next: AbstractAgent): Observable<BaseEvent> {
    const startTime = Date.now()
    return this.runNext(input, next).pipe(
      tap(event => {
        this.eventCount++
        this.metricsService.recordEvent(event.type)
      }),
      finalize(() => {
        this.metricsService.recordDuration(Date.now() - startTime)
      })
    )
  }
}

import { FilterToolCallsMiddleware } from "@ag-ui/client"
 
// 許可リスト
const filter = new FilterToolCallsMiddleware({
  allowedToolCalls: ["search", "calculate"]
})
 
// ブロックリスト
const blocker = new FilterToolCallsMiddleware({
  disallowedToolCalls: ["delete", "modify"]
})
 
agent.use(filter)

pip install agent-framework-ag-ui

# simple_agent.py
from typing import Any
from agent_framework import Agent, SupportsChatGetResponse
 
 
def simple_agent(client: SupportsChatGetResponse[Any]) -> Agent[Any]:
    """シンプルなチャットエージェントを作成する。"""
    return Agent[Any](
        name="simple_chat_agent",
        instructions="You are a helpful assistant. Be concise and friendly.",
        client=client,
    )

# server.py
from fastapi import FastAPI
from agent_framework.openai import OpenAIChatCompletionClient
from agent_framework.ag_ui import add_agent_framework_fastapi_endpoint
from agents.simple_agent import simple_agent
 
app = FastAPI(title="AG-UI Demo Server")
 
# チャットクライアントを作成
chat_client = OpenAIChatCompletionClient(model="gpt-4o")
 
# AG-UI エンドポイントとして登録（ローカル・単一ユーザー用）
add_agent_framework_fastapi_endpoint(
    app, simple_agent(chat_client), "/agentic_chat", single_user=True
)

→ RUN_STARTED(threadId, runId)
  → TEXT_MESSAGE_START(messageId, role="assistant")
    → TEXT_MESSAGE_CONTENT(messageId, delta="こん")
    → TEXT_MESSAGE_CONTENT(messageId, delta="にちは")
    → TEXT_MESSAGE_CONTENT(messageId, delta="！")
  → TEXT_MESSAGE_END(messageId)
→ RUN_FINISHED(threadId, runId)

# weather_agent.py
from typing import Any
from agent_framework import Agent, SupportsChatGetResponse, tool
 
 
@tool
def get_weather(location: str) -> dict[str, Any]:
    """指定された場所の現在の天気を取得する。
 
    Args:
        location: 天気を取得する都市名
 
    Returns:
        温度、天候、湿度などを含む辞書
    """
    weather_data = {
        "tokyo": {
            "temperature": 22,
            "conditions": "sunny",
            "humidity": 55,
            "wind_speed": 8,
        },
        "osaka": {
            "temperature": 24,
            "conditions": "partly cloudy",
            "humidity": 60,
            "wind_speed": 6,
        },
    }
    location_lower = location.lower()
    if location_lower in weather_data:
        return weather_data[location_lower]
    return {"temperature": 21, "conditions": "unknown", "humidity": 50, "wind_speed": 10}
 
 
@tool
def get_forecast(location: str, days: int = 3) -> str:
    """指定された場所の天気予報を取得する。
 
    Args:
        location: 天気予報を取得する都市名
        days: 予報日数（デフォルト: 3）
 
    Returns:
        天気予報の文字列
    """
    forecast: list[str] = []
    for day in range(1, min(days, 7) + 1):
        forecast.append(f"Day {day}: Partly cloudy, {20 + day}°C")
    return f"{days}-day forecast for {location}:\n" + "\n".join(forecast)
 
 
def weather_agent(client: SupportsChatGetResponse[Any]) -> Agent[Any]:
    """天気エージェントを作成する。"""
    return Agent[Any](
        name="weather_agent",
        instructions=(
            "You are a helpful weather assistant. "
            "Use the get_weather and get_forecast functions to help users. "
            "Always provide friendly and informative responses."
        ),
        client=client,
        tools=[get_weather, get_forecast],
    )

→ RUN_STARTED
  → TOOL_CALL_START(toolCallId, toolCallName="get_weather")
    → TOOL_CALL_ARGS(toolCallId, delta='{"location":')
    → TOOL_CALL_ARGS(toolCallId, delta=' "Tokyo"}')
  → TOOL_CALL_END(toolCallId)
  → TOOL_CALL_RESULT(toolCallId, content='{"temperature": 22, ...}')
  → TEXT_MESSAGE_START(messageId, role="assistant")
    → TEXT_MESSAGE_CONTENT(messageId, delta="東京の現在の天気は...")
  → TEXT_MESSAGE_END(messageId)
→ RUN_FINISHED

# human_in_the_loop_agent.py
from typing import Any
from agent_framework import Agent, SupportsChatGetResponse, tool
 
 
@tool(approval_mode="always_require")
def delete_file(filename: str) -> str:
    """ファイルを削除する（承認が必要）。
 
    Args:
        filename: 削除するファイル名
 
    Returns:
        削除結果のメッセージ
    """
    return f"File '{filename}' has been deleted."
 
 
@tool(approval_mode="always_require")
def send_email(to: str, subject: str, body: str) -> str:
    """メールを送信する（承認が必要）。
 
    Args:
        to: 宛先
        subject: 件名
        body: 本文
 
    Returns:
        送信結果のメッセージ
    """
    return f"Email sent to {to} with subject '{subject}'."
 
 
def human_in_the_loop_agent(
    client: SupportsChatGetResponse[Any],
) -> Agent[Any]:
    """Human-in-the-Loop エージェントを作成する。"""
    return Agent[Any](
        name="hitl_agent",
        instructions=(
            "You are a helpful assistant that can delete files and send emails. "
            "Always confirm with the user before performing these actions."
        ),
        client=client,
        tools=[delete_file, send_email],
    )

# recipe_agent.py
from typing import Any
from agent_framework import Agent, SupportsChatGetResponse, tool
from agent_framework.ag_ui import AgentFrameworkAgent
 
 
@tool
def update_recipe(recipe_data: dict[str, Any]) -> str:
    """レシピ情報を更新する。
 
    Args:
        recipe_data: レシピの情報（name, ingredients など）
 
    Returns:
        更新結果のメッセージ
    """
    return f"Recipe '{recipe_data.get('name', 'Unknown')}' has been updated."
 
 
def recipe_agent(client: SupportsChatGetResponse[Any]) -> AgentFrameworkAgent:
    """レシピ管理エージェントを作成する。"""
    agent = Agent[Any](
        name="recipe_agent",
        instructions=(
            "You are a recipe assistant. Help users create and modify recipes. "
            "Use the update_recipe tool to save changes."
        ),
        client=client,
        tools=[update_recipe],
    )
 
    # 状態スキーマを定義
    state_schema = {
        "recipe": {
            "type": "object",
            "properties": {
                "name": {"type": "string"},
                "ingredients": {"type": "array"},
                "instructions": {"type": "array"},
            },
        }
    }
 
    return AgentFrameworkAgent(
        agent=agent,
        state_schema=state_schema,
        name="RecipeAgent",
        description="A recipe management agent with shared state",
    )

# document_writer_agent.py
from typing import Any
from agent_framework import Agent, SupportsChatGetResponse, tool
from agent_framework.ag_ui import AgentFrameworkAgent
 
 
@tool
def write_document(title: str, content: str) -> str:
    """ドキュメントを作成する。
 
    Args:
        title: ドキュメントのタイトル
        content: ドキュメントの内容
 
    Returns:
        作成結果のメッセージ
    """
    return f"Document '{title}' has been created."
 
 
def document_writer_agent(
    client: SupportsChatGetResponse[Any],
) -> AgentFrameworkAgent:
    """ドキュメント作成エージェントを作成する。"""
    agent = Agent[Any](
        name="document_writer",
        instructions="You are a document writer. Create documents based on user requests.",
        client=client,
        tools=[write_document],
    )
 
    # Predictive State の設定
    predict_state_config = {
        "current_title": {"tool": "write_document", "tool_argument": "title"},
        "current_content": {"tool": "write_document", "tool_argument": "content"},
    }
 
    return AgentFrameworkAgent(
        agent=agent,
        state_schema={
            "current_title": {"type": "string"},
            "current_content": {"type": "string"},
        },
        predict_state_config=predict_state_config,
        require_confirmation=True,
    )

→ RUN_STARTED
  → TOOL_CALL_START(write_document)
    → TOOL_CALL_ARGS(delta='{"title": "AG-')
      → STATE_DELTA(op: replace, path: /current_title, value: "AG-")
    → TOOL_CALL_ARGS(delta='UI Guide"')
      → STATE_DELTA(op: replace, path: /current_title, value: "AG-UI Guide")
    → TOOL_CALL_ARGS(delta=', "content": "AG-UI is...')
      → STATE_DELTA(op: replace, path: /current_content, value: "AG-UI is...")
  → TOOL_CALL_END
→ RUN_FINISHED

from fastapi import FastAPI
from agent_framework import WorkflowBuilder, WorkflowContext, executor
from agent_framework.ag_ui import add_agent_framework_fastapi_endpoint
 
 
@executor(id="start")
async def start(message: str, ctx: WorkflowContext) -> None:
    """ワークフローの開始ステップ。"""
    await ctx.yield_output(f"Workflow received: {message}")
 
 
@executor(id="analyze")
async def analyze(data: str, ctx: WorkflowContext) -> None:
    """分析ステップ。"""
    result = f"Analysis of '{data}': positive sentiment detected."
    await ctx.yield_output(result)
 
 
workflow = (
    WorkflowBuilder(start_executor=start)
    .add_executor(analyze)
    .add_edge("start", "analyze")
    .build()
)
 
app = FastAPI()
add_agent_framework_fastapi_endpoint(app, workflow, "/workflow", single_user=True)

"""AG-UI Demo Server — 全機能統合"""
import os
from fastapi import FastAPI
from agent_framework.openai import OpenAIChatCompletionClient
from agent_framework.ag_ui import add_agent_framework_fastapi_endpoint
 
# エージェントのインポート
from agents.simple_agent import simple_agent
from agents.weather_agent import weather_agent
from agents.human_in_the_loop_agent import human_in_the_loop_agent
from agents.recipe_agent import recipe_agent
from agents.document_writer_agent import document_writer_agent
 
app = FastAPI(title="AG-UI Demo Server")
 
# 共有チャットクライアント
chat_client = OpenAIChatCompletionClient(
    model=os.getenv("OPENAI_CHAT_MODEL", "gpt-4o"),
    api_key=os.getenv("OPENAI_API_KEY"),
)
 
# 各機能のエンドポイントを登録
add_agent_framework_fastapi_endpoint(
    app, simple_agent(chat_client), "/agentic_chat",
    single_user=True,
)
add_agent_framework_fastapi_endpoint(
    app, weather_agent(chat_client), "/backend_tool_rendering",
    single_user=True,
)
add_agent_framework_fastapi_endpoint(
    app, human_in_the_loop_agent(chat_client), "/human_in_the_loop",
    single_user=True,
)
add_agent_framework_fastapi_endpoint(
    app, recipe_agent(chat_client), "/shared_state",
    single_user=True,
)
add_agent_framework_fastapi_endpoint(
    app, document_writer_agent(chat_client), "/predictive_state_updates",
    single_user=True,
)
 
if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8888)

import asyncio
from agent_framework.ag_ui import AGUIChatClient
 
 
async def main():
    async with AGUIChatClient(endpoint="http://localhost:8888/agentic_chat") as client:
        # ストリーミングレスポンス
        async for update in client.get_response("Hello!", stream=True):
            for content in update.contents:
                if content.type == "text" and content.text:
                    print(content.text, end="", flush=True)
        print()
 
 
asyncio.run(main())

import os
from fastapi import Depends, FastAPI, HTTPException, Security
from fastapi.security import APIKeyHeader
from agent_framework import Agent
from agent_framework.ag_ui import add_agent_framework_fastapi_endpoint
 
# API キー認証の設定
API_KEY_HEADER = APIKeyHeader(name="X-API-Key", auto_error=False)
EXPECTED_API_KEY = os.environ.get("AG_UI_API_KEY")
 
 
async def verify_api_key(
    api_key: str | None = Security(API_KEY_HEADER),
) -> None:
    """リクエストヘッダの API キーを検証する。"""
    if not api_key or api_key != EXPECTED_API_KEY:
        raise HTTPException(status_code=401, detail="Invalid or missing API key")
 
 
app = FastAPI()
 
# エージェントは前のセクションで作成済みと仮定
# agent = simple_agent(chat_client)
 
# 認証付きでエンドポイントを登録
# 1 つの API キーを共有する呼び出し元を 1 人の利用者として扱う
add_agent_framework_fastapi_endpoint(
    app,
    agent,
    "/",
    dependencies=[Depends(verify_api_key)],
    single_user=True,
)

import { useCopilotAction } from "@copilotkit/react-core"
 
// フロントエンドでツールを定義
useCopilotAction({
  name: "confirmAction",
  description: "ユーザーにアクションの確認を求める",
  parameters: [
    { name: "action", type: "string", description: "確認するアクション" },
    { name: "importance", type: "string", enum: ["low", "medium", "high"] },
  ],
  handler: async ({ action, importance }) => {
    // ユーザーに確認ダイアログを表示
    const confirmed = await showConfirmDialog(action, importance)
    return confirmed ? "approved" : "rejected"
  },
})