# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：CopilotKit🪁 (@CopilotKit) · 平台：X (Twitter) · 日期：2026-06-03

> 原始來源：https://x.com/CopilotKit/status/2061821533090410860

## 中文摘要

CopilotKit 推出 A2UI v0.9 協議，讓 AI Agent 能根據使用者需求即時生成並渲染客製化 UI 介面。

CopilotKit 透過 A2UI（Agent-to-UI）協議，實現了將 Agent 的結構化操作直接轉換為前端元件的功能。該系統支援兩種渲染策略：一種是針對已知格式的「固定模式（Fixed Schema）」，由 Agent 填入預設儀表板；另一種則是「動態模式（Dynamic Schema）」，Agent 會根據使用者的 PDF 提問，從 21 個 React 元件庫中即時挑選並組合出最合適的視覺呈現。

**核心技術架構**
- **前端渲染**：採用 Next.js 16、React 19 與 Tailwind v4，並透過 `pdfjs-dist` 在客戶端進行 PDF 文字提取，將內容內嵌至對話中。
- **後端排程**：使用 Python 3.12、FastAPI 與 LangChain/LangGraph，並透過 `multimodal_middleware.py` 確保 PDF 文字資訊能完整傳遞給 OpenAI 模型。
- **A2UI 運作機制**：系統將 UI 描述為結構化的元件操作，透過 `surface-bus.ts` 進行串流傳輸，確保前端能即時訂閱並渲染 Agent 的輸出。

**動態模式執行流程**
當使用者上傳 PDF 並提問時，系統會執行以下步驟：
1. 前端將 PDF 文字內嵌至使用者訊息。
2. Agent 呼叫 `query_pdf` 工具，由子 LLM 讀取文件並回傳結構化 JSON 資料。
3. Agent 呼叫 `generate_a2ui` 工具，觸發第二個子 LLM 決定 UI 元件配置。
4. 系統將元件定義與資料轉化為 `create_surface` 與 `update_components` 等 A2UI 操作。
5. 前端中介軟體接收操作並渲染畫面，同時 Agent 隱藏冗餘的文字回覆。

**本地部署指引**
若要於本地環境執行此專案，請確保已安裝 Node.js 20+、pnpm 與 Python 3.12，並依照下列步驟操作：

1. 複製專案並進入目錄：
   ```bash
   git clone https://github.com/CopilotKit/CopilotKit.git
   cd CopilotKit/examples/showcases/a2ui-pdf-analyst
   ```
2. 設定環境變數：
   ```bash
   cp agent/.env.example agent/.env
   ```
   編輯 `agent/.env` 並填入您的 `OPENAI_API_KEY`。
3. 安裝依賴並啟動服務：
   ```bash
   pnpm install
   pnpm dev
   ```
   完成後，網頁端將於 `http://localhost:3000` 啟動，Agent 服務則運行於 `http://localhost:8123`。

**開發者資源**
- **元件目錄**：可透過 `/catalog` 路由檢視所有 21 個可用元件及其渲染效果。
- **主題設定**：所有介面共用 `src/a2ui/theme.css` 中的品牌樣式，修改此檔案即可全域更新視覺風格。
- **範例測試**：專案內建多種 PDF 測試情境，開發者可嘗試針對財務報表進行「繪製圓餅圖」、「比較產量與交付量」或「總結研究論文重點」等指令，驗證動態 UI 生成的準確性。

## 標籤

Agent, 新產品, Web, React, CopilotKit