实战教程：构建航班预订 Agent

目标：在本指南中，由于 A2UI 的存在，我们将不再局限于简单的文本回复。您将学会如何构建一个生产级可用的 航班搜索 Agent，它能直接在聊天窗口中渲染出可点击的购票卡片。

场景还原

想象用户提出这样一个需求：

“我要一张明天早上从北京 (PEK) 飞往上海 (SHA) 的机票。”

传统方式 (Chatbot)：返回一大段枯燥的文本：“为您查到国航 CA123 08:00 起飞，价格 800元；东航 MU555 10:00 起飞，价格 900元…” 😴

A2UI 方式 (Agentic UI)： Agent 瞬间渲染出一个交互式航班列表。用户可以一眼看到航司 LOGO、起降时间，并直接点击卡片完成预订。

1. 定义数据模型 (Schema)

首先，Agent 需要知道生成什么。与简单的单卡片不同，航班搜索结果通常是一个对象的数组 (List)。

这是您的 Agent 将要生成的 JSON 结构：

{
  "type": "flight-list",
  "data": {
    "trips": [
      {
        "id": "f1",
        "airline": "中国国际航空",
        "departure": "08:00",
        "arrival": "10:15",
        "price": 850,
        "currency": "CNY"
      },
      // ... 更多航班
    ]
  }
}

2. 组件开发

我们将采用 “容器 + 子项” (Container + Items) 的组合模式：父组件 (FlightList) 负责布局，子组件 (FlightTicket) 负责展示单条数据。

FlightList.tsx (容器组件)

这个组件处理整体布局逻辑。请注意我们使用的是标准的 React + Tailwind CSS。

import React from 'react';
import { FlightTicket } from './FlightTicket';

export const FlightList = ({ trips }) => {
  // 没有任何航班时的空状态处理
  if (!trips?.length) return <div className="p-4 text-gray-500">未找到相关航班。</div>;

  return (
    <div className="flex flex-col gap-4 w-full max-w-lg">
      {trips.map(trip => (
        <FlightTicket key={trip.id} {...trip} />
      ))}
    </div>
  );
};

专家提示 (Pro Tip)：我们使用 flex-col (垂直堆叠) 布局，能在狭窄的聊天窗口（Mobile）和桌面侧边栏（Coplilot Sidebar）中都保持完美展示。

FlightTicket.tsx (列表项组件)

这个组件决定了单张票据的颜值。

export const FlightTicket = ({ airline, departure, arrival, price }) => (
  <div className="flex justify-between items-center p-4 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-200 transition-colors cursor-pointer bg-white shadow-sm">
    <div className="flex flex-col">
        <span className="font-bold text-gray-900">{airline}</span>
        <span className="text-sm text-gray-500">{departure} ➝ {arrival}</span>
    </div>
    <div className="text-xl font-bold text-blue-600">
        ¥{price}
    </div>
  </div>
);

3. 核心魔法：流式渲染 (Streaming) & 骨架屏

A2UI 最大的优势在于**流式与即时反馈**。 LLM 是逐个 Token 生成内容的。如果等到 JSON 全部生成完再渲染，用户可能要盯着空白屏幕看 3-5 秒。

使用 A2UI，我们可以渐进式地呈现内容。

用户眼中的体验：

0.1秒：Agent 开始 “思考”。
0.5秒：A2UI 检测到 type: "flight-list"。它立即渲染一个骨架屏 (Skeleton Loader)（灰色占位符），让用户感觉到“马上就好”。
1.5秒：第一个航班对象 (国航 CA123) 生成完毕。第一个骨架条瞬间变为真实的机票卡片。
2.5秒：第二个航班 (东航 MU555) 蹦了出来。

Agent → JSON 流: { "type": ...
渲染器 → UI: <SkeletonList />  (即时响应)

Agent → 数据流: ... "airline": "中国国航" ...
渲染器 → UI: <FlightTicket id="1" /> (渐进式揭示)

举一反三

恭喜！您刚刚构建了一个复杂的生成式 UI。这种模式（容器 + 列表项）是绝大多数 AI Agent 应用场景的基石：

电商 (E-commerce)：商品搜索网格
酒店 (Hotels)：房型预订列表
金融 (Finance)：股票行情看板

这似乎有点太超前了？先回顾 5分钟快速入门。