# CopilotKit 將 OpenClaw 以 AG-UI 通道嵌入應用程式，整合開發者與使用者自帶的 Agent

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

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

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

## 證據與延伸閱讀

- [CopilotKit 將 OpenClaw 以 AG-UI 通道嵌入應用程式，整合開發者與使用者自帶的 Agent。](https://x.com/CopilotKit/status/2089397035032313987)
- [打包在OpenClaw內的AG-UI channel](https://github.com/openclaw/openclaw/pull/109203)
- [影片Demo流程操作與建立PDF](https://video.twimg.com/amplify_video/2089397015847608320/vid/avc1/1214x720/7c0P--nxxftAMHJI.mp4?tag=14)

## 中文摘要

CopilotKit 將 OpenClaw 以 AG-UI 通道嵌入應用程式，整合開發者與使用者自帶的 Agent。

這項整合已展示 Slack、Microsoft Teams、React、React Native、Angular 與 Vue.js 等使用情境。

**核心發布**  
CopilotKit 進一步說明，實際交付的內容不是一個獨立 plugin，而是直接打包在 OpenClaw 內的 AG-UI channel。OpenClaw 會提供一個 HTTP/SSE 伺服器，透過 AG-UI 協定暴露 OpenClaw Agent，讓 CopilotKit 等 AG-UI client 可以驅動它。相關變更可查看 GitHub 上的 [OpenClaw pull request #109203](https://github.com/openclaw/openclaw/pull/109203)。

**可整合能力**  
這套架構由 AG-UI 提供多種互動能力，重點包括：

- generative UI：讓介面依 Agent 回應動態產生內容。
- frontend tools：讓 Agent 呼叫前端工具，直接操作應用程式功能。
- human-in-the-loop：在關鍵步驟保留人工確認。
- self-modification：支援 Agent 修改應用程式的部分行為或介面。

CopilotKit 表示，OpenClaw 可嵌入任何應用程式，開發者可以在產品內部署自己的 Agent，也能讓使用者 bring their own agent，而不必把互動限制在獨立聊天介面。

**Demo 流程**  
影片畫面展示 CopilotKit 與 OpenClaw 在 Financial Ledger 應用程式中的整合。右側對話側欄顯示 OpenClaw 正在 CopilotKit app 內執行，使用者可要求它改變 Financial Ledger 的外觀或功能。示範流程如下：

1. 點擊「+ Create a one page」，送出「Create a one page pdf summary of our financials and save it on desktop」。
2. OpenClaw 經過數個 Thinking 步驟後，確認檔案已存在、PDF 為 1 頁，標題是 `July 2026 Financial Ledger One-Pager`，資料來源為 `lib/expenses.ts` 中截至 `2026-07-08` 的 ledger data。
3. 再輸入「open it in a new tab」，系統在新分頁開啟桌面上的 PDF；Google Chrome 顯示存取 Desktop 資料夾的權限提示，使用者點擊「Allow」後完成載入。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1787077475527-xbu96myl.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/473462ae046fab9c.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 使用 CopilotKit 與 OpenClaw 在 Financial Ledger 側欄對話框輸入指令建立 PDF 財務摘要並在新分頁開啟的完整操作流程

**畫面顯示結果**  
Demo 中產生的摘要標示截至 2026 年 7 月 8 日，月預算為 $3,200，已支出 $2,890.87（90.3%），剩餘 $309.13；最大支出類別為 Housing，金額 $2,100.00。分類明細另列出 Health $234.00、Utilities $211.83、Food $124.27 等項目。這些數字屬於影片中 Financial Ledger 的示範資料，不是 CopilotKit 或 OpenClaw 宣布的通用規格。

## 媒體內容

**使用 CopilotKit 與 OpenClaw 在 Financial Ledger 側欄對話框輸入指令建立 PDF 財務摘要並在新分頁開啟的完整操作流程**

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

Prompt（00:02）：

```
建立一份我們財務狀況的單頁 PDF 摘要並將其儲存在桌面上
```

原文：Create a one page pdf summary of our financials and save it on desktop

Prompt（00:13）：

```
在新分頁中開啟它
```

原文：open it in a new tab

操作步驟：

1. （00:02）輸入指令建立 PDF 摘要並儲存到桌面
2. （00:13）輸入指令要求在新分頁開啟該 PDF

## 標籤

OpenClaw, Agent, 功能更新, React, Microsoft, GitHub, CopilotKit