Agent前端交互协议三极格局：AG-UI、A2UI与Vercel AI SDK深度拆解

运行时生命周期事件:
├── RunStarted / RunFinished / RunError
├── TextMessageStart / TextMessageContent / TextMessageEnd
├── ToolCallStart / ToolCallArgs / ToolCallEnd
├── StateSnapshot / StateDelta
├── StepStarted / StepFinished
├── Custom event (扩展点)
└── Raw (透传原始数据)

# Python SDK: 定义一个AG-UI兼容的Agent
from ag_ui.core import Agent, RunAgentParams
from ag_ui.events import (
    RunStartedEvent, TextMessageStartEvent,
    TextMessageContentEvent, TextMessageEndEvent,
    ToolCallStartEvent, ToolCallArgsEvent, ToolCallEndEvent,
    RunFinishedEvent
)

async def research_agent(params: RunAgentParams):
    # 发送运行开始事件
    yield RunStartedEvent(thread_id=params.thread_id, run_id=params.run_id)

    # 文本消息流式输出
    yield TextMessageStartEvent(role="assistant", message_id="msg_001")
    yield TextMessageContentEvent(content="正在分析您的问题...")
    yield TextMessageEndEvent()

    # 工具调用事件
    yield ToolCallStartEvent(tool_call_id="tc_001", tool_name="web_search")
    yield ToolCallArgsEvent(delta='{"query": "AI agent trends 2026"}')
    yield ToolCallEndEvent()

    # 状态快照 - 前端可据此更新UI
    yield StateSnapshotEvent(state={"step": "searching", "progress": 0.6})

    yield RunFinishedEvent(thread_id=params.thread_id, run_id=params.run_id)

// 前端: 使用CopilotKit消费AG-UI事件
import { useCoAgent, useCopilotChat } from "@copilotkit/react-core";

function AgentUI() {
  const { agentState, setAgentState } = useCoAgent({
    name: "research-agent",
    initialState: { step: "idle", progress: 0 },
  });

  return (
    <div>
      <CopilotChat
        instructions="You are a research assistant."
        labels={{ title: "Research Agent" }}
      />
      <ProgressBar value={agentState.progress} />
      <StatusBadge>{agentState.step}</StatusBadge>
    </div>
  );
}

Agent (后端)
  │
  │ 发送A2UI声明式描述 (JSON)
  │ {"type": "card", "title": "...", "actions": [...]}
  ▼
A2UI Runtime (中间层)
  │
  │ 安全沙箱验证 + 组件解析
  │
  ▼
Platform Renderer (前端)
  │
  │ 平台原生渲染 (Web/iOS/Android)
  │
  ▼
User sees: 卡片、表单、图表...

# A2UI: Agent声明UI
from a2ui import AgentUI, Card, Action, Form, TextInput

agent_ui = AgentUI()

@agent_ui.on_message
async def handle_query(query: str):
    # Agent不需要自己画UI，而是声明"我需要一个确认表单"
    yield Card(
        title="数据分析结果",
        subtitle=f"针对 '{query}' 的分析",
        content=[
            Form(
                id="refine_form",
                fields=[
                    TextInput(name="depth", label="分析深度",
                              input_type="number", default=3),
                    TextInput(name="focus", label="重点领域",
                              input_type="text"),
                ],
                actions=[
                    Action(label="深化分析", id="deep_dive",
                           style="primary"),
                    Action(label="导出报告", id="export",
                           style="secondary"),
                ]
            )
        ]
    )

// 前端渲染A2UI声明
import { A2UIProvider, A2UIRenderer } from "@a2ui/react";

function AgentApp() {
  return (
    <A2UIProvider
      agentEndpoint="/api/agent"
      sandbox={{ maxComponents: 50, allowedActions: ["form", "navigate"] }}
    >
      <A2UIRenderer
        onAction={(actionId, formData) => {
          // 处理用户在Agent生成UI上的操作
          console.log(`Action: ${actionId}`, formData);
        }}
      />
    </A2UIProvider>
  );
}

┌──────────────────────────────────────┐
│          AI Elements (UI层)           │
│  ChatBubble, ToolCall, FileUpload,   │
│  ReasoningBlock, AgentStatus...      │
├──────────────────────────────────────┤
│          AI SDK 6 (逻辑层)            │
│  Agent interface, ToolLoopAgent,     │
│  Streaming, Tool Approval...         │
├──────────────────────────────────────┤
│          Provider Layer              │
│  OpenAI, Anthropic, Google, Mistral  │
└──────────────────────────────────────┘

// AI SDK 6: 定义Agent
import { agent, tool } from "ai";
import { z } from "zod";

export const researchAgent = agent({
  name: "research-agent",
  model: "anthropic/claude-sonnet-4-6",
  instructions: "You are a research assistant...",
  tools: {
    search: tool({
      description: "Search the web",
      parameters: z.object({
        query: z.string(),
      }),
      execute: async ({ query }) => {
        return { results: await searchWeb(query) };
      },
      // 工具审批机制 - 敏感操作需用户确认
      requiresApproval: true,
    }),
  },
});

// AI Elements: 使用预构建组件
import {
  ChatBubble,
  ToolCall,
  ReasoningBlock,
  AgentStatus,
} from "ai-elements";

function AgentChat() {
  return (
    <AgentStatus agent={researchAgent}>
      <ChatBubble
        variants={["incoming", "outgoing"]}
        avatar={{ src: "/agent-avatar.png" }}
      />
      <ReasoningBlock collapsible defaultOpen={false} />
      <ToolCall
        showArgs
        showResult
        approvalUI={<ApprovalDialog />}
      />
    </AgentStatus>
  );
}

import {
  Thread,
  AssistantRuntimeProvider,
  useExternalStoreRuntime,
} from "@assistant-ui/react";

function AIChat() {
  const runtime = useExternalStoreRuntime({
    adapters: { chat: myChatAdapter },
    initialState: { messages: [] },
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread.Root>
        <Thread.Empty />
        <Thread.Messages
          components={{
            UserMessage: MyUserMessage,
            AssistantMessage: MyAssistantMessage,
          }}
        />
        <Thread.Compose />
      </Thread.Root>
    </AssistantRuntimeProvider>
  );
}

import chainlit as cl

@cl.on_chat_start
async def start():
    await cl.Message(content="你好！我是研究助手。").send()

@cl.on_message
async def main(message: cl.Message):
    # 创建步骤可视化
    async with cl.Step(name="搜索", type="tool") as step:
        step.input = message.content
        results = await search(message.content)
        step.output = f"找到{len(results)}个结果"

    await cl.Message(
        content=results,
        actions=[
            cl.Action(name="export", value="csv",
                      label="导出CSV"),
        ]
    ).send()

import streamlit as st

st.title("数据分析Agent")

if "messages" not in st.session_state:
    st.session_state.messages = []

for msg in st.session_state.messages:
    with st.chat_message(msg["role"]):
        st.markdown(msg["content"])

if prompt := st.chat_input("输入你的分析需求"):
    st.session_state.messages.append({"role": "user", "content": prompt})
    with st.chat_message("assistant"):
        with st.status("正在分析...", expanded=True):
            result = agent.run(prompt)
            st.write(result)

graph TB
    subgraph "范式一：事件流 (AG-UI)"
        A1[Agent Backend] -->|17种标准事件| A2[AG-UI Runtime]
        A2 -->|事件分发| A3[Frontend Components]
        A3 -->|用户操作| A2
        A2 -->|状态同步| A1
        style A1 fill:#4F46E5,color:#fff
        style A2 fill:#6366F1,color:#fff
        style A3 fill:#818CF8,color:#fff
    end

    subgraph "范式二：声明式 (A2UI)"
        B1[Agent Backend] -->|UI描述JSON| B2[A2UI Security Sandbox]
        B2 -->|验证通过| B3[Platform Renderer]
        B3 -->|用户交互| B2
        B2 -->|回调事件| B1
        style B1 fill:#059669,color:#fff
        style B2 fill:#10B981,color:#fff
        style B3 fill:#34D399,color:#fff
    end

    subgraph "范式三：组件化 (Vercel AI SDK)"
        C1[AI SDK Agent] -->|Streaming| C2[AI SDK Core]
        C2 -->|React Hooks| C3[AI Elements Components]
        C3 -->|用户操作| C2
        C2 -->|Tool Approval| C1
        style C1 fill:#DC2626,color:#fff
        style C2 fill:#EF4444,color:#fff
        style C3 fill:#F87171,color:#fff
    end

graph LR
    subgraph "2026 Agent协议栈完整视图"
        direction TB
        U[用户] --> UI["前端交互层<br/>AG-UI / A2UI / AI Elements"]
        UI --> AGENT["Agent编排层<br/>LangGraph / CrewAI / AutoGen"]
        AGENT --> TOOL["工具调用层<br/>MCP / Function Calling"]
        AGENT --> AGENT2["Agent间通信<br/>A2A Protocol"]
        TOOL --> EXT["外部服务<br/>API / 数据库 / 文件"]
    end

    style UI fill:#F59E0B,color:#000
    style AGENT fill:#3B82F6,color:#fff
    style TOOL fill:#8B5CF6,color:#fff
    style AGENT2 fill:#06B6D4,color:#fff
    style EXT fill:#6B7280,color:#fff

Agent后端
  │ 
  │ 生成A2UI声明式UI描述
  ▼
AG-UI事件流封装
  │ RunStarted → StateSnapshot → 
  │ A2UIContent(json) → ToolCall → 
  │ RunFinished
  ▼
前端AG-UI Runtime
  │
  │ 解析A2UI事件中的UI声明
  ▼
A2UI Renderer渲染