# 策展 · X (Twitter) 🔥🔥

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

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

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

## 中文摘要

CopilotKit 發布 @ag-ui/claude-agent-sdk 整合前端介面。

這項整合透過 AG-UI 協定，解決了 Agent 在執行任務時缺乏視覺化互動的問題，讓 Claude Agent SDK 能夠在 React、Angular、Vue 或 React-Native 等前端框架中，實現即時組件渲染、共享狀態管理以及關鍵操作的審核機制。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1783395145081-32a2clvf.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/8f2dbfa073d54863.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Claude Agent SDK 結合 AG-UI，為任何應用程式提供生成式使用者介面。

**核心功能與技術優勢**
@ag-ui/claude-agent-sdk 透過內部管理 SDK 生命週期，簡化了開發流程，並提供多項關鍵能力：
- 完整的生命週期管理：自動處理訊息提取、選項建構及 SDK 查詢。
- 互動中斷機制：透過 `adapter.interrupt()` 可隨時停止正在進行的查詢。
- 動態前端工具：客戶端提供的工具會自動以 MCP 伺服器形式加入。
- 人機協作（Human-in-the-loop）：支援前端工具執行暫停，等待使用者確認後再繼續。
- 即時串流：支援 `TOOL_CALL_ARGS` 的 JSON 參數串流，並透過 RxJS Observable 進行事件串流。
- 雙向狀態同步：利用 `ag_ui_update_state` 工具實現狀態管理，並將上下文與狀態注入至 prompt 中，提升 Agent 的感知能力。

**快速部署與開發流程**
開發者可透過 npm 安裝相關套件並進行整合：
1. 安裝必要套件：
   ```bash
   npm install @ag-ui/claude-agent-sdk @anthropic-ai/claude-agent-sdk zod
   ```
2. 實作範例程式碼：
   ```typescript
   import { ClaudeAgentAdapter } from "@ag-ui/claude-agent-sdk";

   const adapter = new ClaudeAgentAdapter({
     agentId: "my_agent",
     model: "claude-haiku-4-5",
     systemPrompt: "You are helpful",
   });

   const events$ = adapter.run(input);
   events$.subscribe({
     next: (event) => sendEvent(event),
     complete: () => res.end(),
   });
   ```

**範例應用與實作指引**
該專案在 `integrations/claude-agent-sdk/typescript` 目錄下提供了 5 個範例，涵蓋了從基礎對話到複雜的生成式 UI 應用。若要執行範例，請依照以下步驟操作：
1. 安裝依賴：
   ```bash
   cd integrations/claude-agent-sdk/typescript
   pnpm install
   ```
2. 啟動伺服器（連接埠 8889）：
   ```bash
   ANTHROPIC_API_KEY=sk-ant-xxx npx tsx examples/server.ts
   ```
3. 啟動 Dojo 前端（於另一個終端機執行）：
   ```bash
   cd apps/dojo
   pnpm dev
   ```
完成後，使用者可造訪 [http://localhost:3000](http://localhost:3000) 並選擇「Claude Agent SDK (Typescript)」進行測試。

**實際應用場景**
根據展示，此技術能將 Agent 的運算結果直接轉化為互動式 UI。例如在「Revenue Dashboard FY 2026」儀表板中，Agent 可根據對話需求生成圖表，並在使用者點擊「Add to app」後，將數據（如將總營收從 $2.4M 更新至 $5.7M）即時同步至前端介面，大幅提升了 Agent 在商業應用中的實用性與視覺化體驗。更多詳細資訊可參考 [GitHub 專案頁面](https://github.com/ag-ui-protocol/ag-ui/tree/main/integrations/claude-agent-sdk) 或 [AG-UI 官方文件](https://dojo.ag-ui.com/claude-agent-sdk-python/feature/agentic_chat)。

## 媒體內容

**Claude Agent SDK 結合 AG-UI，為任何應用程式提供生成式使用者介面。**

**影片中的 Prompt 與操作**

Prompt（00:06）：

```
幫我繪製過去 6 個月的營收圖表。
```

原文：Chart our revenue for the last 6 months.

操作步驟：

1. （00:06）輸入指令「Chart our revenue for the last 6 months.」
2. （00:10）點擊「Add to app」按鈕

## 標籤

Agent, SDK, 新產品, React, CopilotKit, Anthropic