使用 A2UI 构建航班预订 Agent

目标：打造一个不仅能说 “这是您的航班”，还能直接 递给您 一张可点击机票的 Agent。

在本教程中，我们将构建一个简化的 机票预订 Agent。当用户问“帮我找去东京的航班”时，Agent 将回应一个交互式的机票组件，而不仅仅是文字列表。

为什么选择 A2UI？

在开始写代码之前，看看替代方案。你可以让 Agent 输出 Markdown 表格。但 Markdown 表格里不能有一个能调用你后端 API 的“立即预订”按钮。 A2UI 允许你将 UI 组件视为词汇。

1. 项目设置

首先，初始化一个新项目。我们使用 Vite 以获得最快的开发体验。

npm create vite@latest flight-agent -- --template react-ts
cd flight-agent
npm install @a2ui/react @a2ui/core ai

2. 定义“词汇”：创建组件

把你的 React 组件想象成 Agent 可以说出的单词。让我们教会它“机票 (FlightTicket)”这个词。

// src/components/FlightTicket.tsx
export const FlightTicket = ({ airline, price, depTime, arrTime }) => (
  <div className="border rounded-xl p-4 shadow-sm hover:shadow-md transition-all">
    <div className="flex justify-between items-center">
      <h3 className="font-bold text-lg">{airline}</h3>
      <span className="text-green-600 font-bold">¥{price}</span>
    </div>
    <div className="flex gap-4 mt-2 text-gray-600">
      <span>{depTime}</span>
      <span>→</span>
      <span>{arrTime}</span>
    </div>
    <button className="w-full mt-4 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">
      立即预订
    </button>
  </div>
);

3. 编纂“字典”：注册组件

现在，我们需要告诉 Agent 这个组件的存在。我们通过 注册表 (Registry) 来实现。这相当于一个白名单——Agent 只能使用这里列出的组件。

// src/registry.ts
import { createRegistry } from '@a2ui/react';
import { FlightTicket } from './components/FlightTicket';

export const flightRegistry = createRegistry({
  components: {
    // 'flight-ticket' 这个键就是 LLM 输出时会使用的 type
    'flight-ticket': FlightTicket,
  },
});

4. 开启“对话”：Agent 循环

使用 <AIOutput /> 组件来渲染数据流。这个组件监听 ag-ui 协议流，并动态挂载你的 React 组件。

// src/App.tsx
import { AIOutput } from '@a2ui/react';
import { flightRegistry } from './registry';

// 模拟演示用的 LLM 响应
// 在真实应用中，这也数据通常来自 useChat() 或 WebSocket
const mockStream = {
  type: 'flight-ticket',
  props: {
    airline: '日本航空 (JAL)',
    price: 4500,
    depTime: '10:00',
    arrTime: '14:00 (+1)'
  }
};

function App() {
  return (
    <div className="max-w-md mx-auto py-10 px-4">
      <h1 className="text-2xl font-bold mb-6">Agent 旅行助手</h1>
      <div className="bg-gray-50 p-6 rounded-xl border border-gray-200">
         <p className="mb-4 text-gray-700">这是为您找到的最佳方案：</p>

         {/* 魔法发生的地方 */}
         <AIOutput
            registry={flightRegistry}
            data={mockStream}
         />
      </div>
    </div>
  );
}

5. 注入“大脑”：System Prompt

最后，在你的后端 (Python/Node) 中，指示 LLM 如何使用这门新语言。

System Prompt: 你是一个旅行助手。当查找航班时，请输出 JSON，type 为 'flight-ticket'，属性包含：airline, price, depTime, arrTime。不要仅仅用文本列出航班。

总结

你刚刚构建了一个 生成式 UI (Generative UI)。Agent “决定”展示一张机票，但你控制了这张机票具体长什么样以及如何交互（比如点击预订）。

下一步是什么？

标准组件：看看有哪些开箱即用的内置组件。

A2UI Composer：在写代码之前，可视化地设计你的组件。

客户端集成：学习如何将其连接到真正的后端。