# Claude Managed Agents 整合 CopilotKit AG-UI，將對話串流至互動介面

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

> 原作者：ClaudeDevs (@ClaudeDevs) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥 · 日期：2026-08-20

> 原始來源：https://x.com/ClaudeDevs/status/2090511582531072265

## 證據與延伸閱讀

- [Claude Managed Agents 整合 CopilotKit AG-UI，將對話串流至互動介面。](https://github.com/anthropics/claude-quickstarts/tree/main/managed-agents/copilot-kit-ag-ui) — 官方 Repository

## 中文摘要

Claude Managed Agents 整合 CopilotKit AG-UI，將對話串流至互動介面。

**整合方式** Anthropic 發布的新 cookbook 示範 AG-UI adapter：Claude Managed Agents 負責執行 Agent loop 與容器，CopilotKit 則呈現聊天介面。每個對話執行緒都會連到一個 managed session，讓使用者自然延續對話；AG-UI 也能傳遞 token、工具活動、interrupts 與 turn time caps。完整範例位於 [GitHub 專案](https://github.com/anthropics/claude-quickstarts/tree/main/managed-agents/copilot-kit-ag-ui) 。

**展示案例** 外部 cookbook 建立個人財務助理，能在對話中回答投資試算，並以互動圖表呈現還款時間線、成長預測、預算拆解與情境比較，說明同一套 Managed Agents 能支援不同 UI。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1787256943609-xgyxjpn3.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/3f8fc8c886ad1877.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 支援動態生成介面與 AI 互動的 Finance assistant AG-UI 介面與其底層運作架構

**安全與部署提醒** 範例聊天端點沒有驗證機制；環境預設禁止容器對外連線，停用 `web_fetch` 以降低惡意指令注入風險，但保留 `web_search`。每則訊息都會消耗 API 額度，因此正式分享前需設定 `ALLOWED_ORIGINS`、限制網址或加上驗證；此外，執行緒與 session 對照表只存在記憶體，伺服器重啟後會重置，不適合直接用於正式環境。

## 媒體內容

**支援動態生成介面與 AI 互動的 Finance assistant AG-UI 介面與其底層運作架構**

**數據表**

| 項目 | 數值 |
| --- | --- |
| localhost:5973,Finance assistant: AG-UI,,If I invest $500/month at a 7% annual return, what will have in 20 years?,,- bash python3 -c "fv(500, 0.07, 20)",,At 7% compounded monthly, $500 a month grows to about $260,000 over 20 years.,You contribute $120,000 and compounding adds the rest. Drag the sliders to try other amounts.,,Growth projection,$50 start, $500/mo at 7% for 20 years,Projected value,$260,463,You put in,$120,000,Growth,$140,463,10% on top,,$300k,$150k,$0k,Yr 1,Yr 5,Yr 10,Yr 15,Yr 20,,Monthly contribution: $500,Annual return: 7%,,Ask a follow-up...,,Growth projection,$50 start, $1,000/mo at 7% for 20 years,Projected value,$520,927,You put in,$240,000,Growth,$280,927,10% on top,,$600k,$350k,$0k,Yr 1,Yr 5,Yr 10,Yr 15,Yr 20,,Monthly contribution: $1,000,Annual return: 7%,,Growth projection,$50 start, $1,000/mo at 9% for 20 years,Projected value,$667,887,You put in,$240,000,Growth,$427,887,19% on top,,$700k,$350k,$0k,Yr 1,Yr 5,Yr 10,Yr 15,Yr 20,,Monthly contribution: $1,000,Annual return: 9%,,Managed Agents session,financial-assistant - sess_dim_,,- Agent harness,- Session state,- Memory,- Environment - bash, files, search,,@ag-ui/claude-managed-agents |  |
| one AG-UI thread | one managed session,,session events stream out as AG-UI events,,agent_thinking,REASONING_MESSAGE,TEST_MESSAGE_CONTENT,TOOL_CALL_START,,AG-UI client,CopilotChat + useRenderTool components,,Claude Managed Agents brings,the harness, session management, memory, and the environment.,,AG-UI brings,streaming chat, generative UI, shared state, and human-in-the-loop interrupts.,,Point Claude at the quickstart to get jumpstarted,github.com/anthropics/claude-quickstarts -> managed-agents/copilot-kit-ag-ui |

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

Prompt（00:01）：

```
如果我每個月投資 500 美元，年報酬率為 7%，20 年後我會有多少錢？
```

原文：If I invest $500/month at a 7% annual return, what will have in 20 years?

操作步驟：

1. （00:00）於對話輸入框輸入 prompt
2. （00:07）拖動 Monthly contribution 滑桿將數值從 $500 調整為 $1,000
3. （00:10）拖動 Annual return 滑桿將數值從 7% 調整為 9%

## 標籤

Agent, 開源專案, SDK, LLM, Anthropic, GitHub, CopilotKit