基于 UI-TARS 的 Computer Use 實現
UI-TARS 工程詳見 http://github.com/bytedance/UI-TARS-desktop
術語表
名詞 | 解釋 |
UI-TARS | UI-TARS 是字節跳動開源一種能夠自我學習的 GUI Agent ，下一代原生 GUI 代理模型，旨在使用類似人類的感知、推理和操作功能與圖形用戶界面（GUI）無縫交互。與傳統的模塊化框架不同，UI-TARS 將所有關鍵組件——感知、推理、反思和記憶——集成在一個視覺語言模型（VLM）中，實現端到端任務自動化，無需預定義的工作流或手動規則。詳見 字節版Operator搶跑OpenAI? 直接免費開源， 網友：怒省200美元！ |
Computer Use | Computer Use 最早由 Anthropic 提出的一種基于 Claude 3.5 Sonnet 模型的新功能，允許 AI 與虛擬機桌面環境交互，執行操作系統級別的任務。 |
MCP | Model Context Protocol（模型上下文協議） 是一個開放協議，它規范了應用程序如何為LLMs提供上下文?？梢詫CP想象為AI應用的USB-C端口。就像USB-C提供了一種標準方式，讓你的設備連接到各種外設和配件，MCP也提供了一種標準方式，讓你的AI模型連接到不同的數據源和工具。詳見 基于 MCP 的 AI Agent 應用開發實踐 |
GUI Agents | GUI Agents 技術是利用大模型技術（VLM / LLM）實現智能體對手機或電腦的自動操作，模擬人類行為完成指定任務 |
VLM | Vision Language Models（視覺語言模型），是指可同時處理視覺和語言兩種模態的模型。 |
MLLM | MLLM,Multimodal Large Language Model（多模態大型語言模型），它利用強大的大型語言模型（LLMs）作為"大腦"來執行多模態任務。MLLM 的驚人涌現能力，如基于圖像編寫故事和無需 OCR 的數學推理。 |
SSE | Server-sent Event（SSE，服務器發送事件）是一種基于 HTTP 連接的技術，允許服務器實時地、單向地向客戶端推送數據。對于服務器只需要向客戶端推送數據，而不需要從客戶端接收數據的場景，它是 WebSockets 的一個簡單且高效的替代方案。 |
VNC | VNC（虛擬網絡計算）是一種圖形桌面共享系統，它使用遠程幀緩沖區協議（RFB）遠程控制另一臺計算機。它通過網絡將鍵盤和鼠標輸入從一臺計算機傳輸到另一臺計算機，中繼圖形屏幕更新。 |
SoM | Set-of-Mark，來源于 [2310.11441] Set-of-Mark Prompting Unleashes Extraordinary Visual Grounding in GPT-4V，用來給原圖標記 Computer Use 將進行的事件和坐標。 |
RPA | Robotic Process Automation（機器人流程自動化）是一類流程自動化軟件工具，通過用戶界面使用和理解企業已有的應用，將基于規則的常規操作自動化。 |
SoM 標記的截圖
原截圖背景
為什么需要 Computer Use？
人類使用電子設備的本質方式是什么？
- 視覺感知：通過眼睛觀察和理解屏幕上的內容
- 手指操作：通過點擊、滑動等手勢與界面交互
- 目標導向：基于任務目標規劃一系列操作步驟
Computer Use 正是基于第一性原理，模擬人類使用電子設備的方式，實現真正的原生端到端的通用自動化。
Demo 演示
本地電腦（Computer Use）
指令
Please help me open the autosave feature of VS Code and delay AutoSave operations for 500 milliseconds in the VSCode setting
請幫我開啟 VSCode 的自動保存功能，并在設置中將自動保存操作延遲500 毫秒
本地瀏覽器（Browser Use）
指令
Could you help me check the latest open issue of the UI-TARS-Desktop project on Github?
你能幫我查看 Github 上 UI-TARS-Desktop 項目的最新未解決 issues 嗎？
遠程虛擬機（Remote Computer）
指令
識別小票內容并整理到Execl
- 新建一個excel文件，命名為"消費記錄"
- 打開桌面的旅行記錄文件夾
- 點擊其中一個圖片查看詳情，如果是小票照片，識別小票內容，確定是在什么地方消費的，按當前匯率花了多少人民幣，按照國家，時間，消費類型，金額記錄在Excel里
遠程瀏覽器（Remote Browser）
多輪交互，Human-in-the-loop
指令
麥當勞點一個巨無霸套餐送到鼎好
電視（TV Use）
指令
播放某電視劇的第 5 集
更多 showcases 見：https://seed-tars.com/showcase
詳細設計
整體概覽
系統組件
要完成 Computer Use 系統，需要用到三個核心構件：
- VLM（視覺模型）: 負責理解屏幕內容和用戶指令，根據用戶指令+截圖，生成自然語言指令（NL Command）。
- Agent Server（代理服務端）：根據用戶指令，調用模型、并通過 MCP Client 來調用設備能力。本質是個流程 workflow，通過 MCP 架構解耦了 LLM 在獲取不同上下文的邏輯。
- Devices（外部設備）：以 MCP Services 包提供出來，可以是 PC、Mobile、虛擬機、樹莓派等，只要是電子設備都是外設，都可以接入 GUI Agent系統中。
流程鏈路
Computer Use 核心流程大致分為：
- 任務感知：系統接收用戶通過自然語言或截圖輸入的指令，利用多模態模型解析并輸出 NLCommand（例如：Action: click(start_box='(529,46)')）。
- 坐標映射：將模型感知的像素坐標轉成屏幕坐標
- 指令轉換：將解析后的 NLCommand 轉換為可執行的 Command，中間涉及到一個坐標系的轉換，將圖像坐標系轉成屏幕坐標系，為后續的執行做準備。
- 命令執行：調用 MCP Services，將轉換后的命令進行執行
前置準備
MCP 集成
詳細設計與實現：基于 MCP 的 AI Agent 應用開發實踐 相關代碼已開源到 Github：mcp-client、mcp-servers
Agent 邏輯
Computer Use 在 Agent 層主要是一個 Loop 循環邏輯，根據任務執行情況向客戶端推送截圖、模型輸出、Action 等，所以只需要實現以下邏輯：
JavaScript
import { GUIAgent } from '@ui-tars/sdk';import { NutJSOperator } from '@ui-tars/operator-nut-js';const guiAgent = new GUIAgent({ model: { baseURL: config.baseURL, apiKey: config.apiKey, model: config.model, }, operator: new NutJSOperator(), onData: ({ data }) => { console.log(data) }, onError: ({ data, error }) => { console.error(error, data); },});await guiAgent.run('send "hello world" to x.com');Operator 可任意替換成對應操作工具 / 框架，例如：瀏覽器控制（operator-browser）、Android 設備控制（operator-adb） 等
Responses API 增量推理
為了避免在一次請求中向模型 API 發送過多截圖，我們在工程上引入了 Responses API（即支持上下文狀態管理的模型請求方式）。整體耗時降低了 ~35%，具體實現（https://github.com/bytedance/UI-TARS-desktop/pull/714）。
該 API 可以在每一輪推理中增量發送一張截圖，實現高效且穩定的多模態交互。
- 增量推理能力：借助 KV-Cache 機制，模型僅需處理當前輪的注意力計算，哪怕是 100+ 輪對話，也能保持秒級響應。
- 對話狀態托管：API 自動維護多輪上下文，無需在單次請求中重復傳入大量圖像，有效規避網關限制問題（如一次傳入 10+ 張圖像導致的請求體過大）。
圖示：
- 『淡紫』表示使用 Chat Completions，在達到滑動窗口里最大圖數（5 張）前，請求量依次增多。
- 『灰色』表示使用 Responses API 模式，每輪都是增量請求和推理。
任務感知（多模態模型）
由 UI-TARS 模型提供，定義 System Prompt，通過傳入『截圖』和『任務指令』，返回用于自然語言的操作二元組（NLCommand），這樣的好處在于和不同設備操作指令進行解耦。
以 PC MCP Server 提供的 System Prompt 為例：
You are a GUI agent. You are given a task and your action history, with screenshots. You need to perform the next action to complete the task.## Output Format` ` ` Action_Summary: ...Action: ...` ` `## Action Spaceclick(start_box='[x1, y1, x2, y2]')left_double(start_box='[x1, y1, x2, y2]')right_single(start_box='[x1, y1, x2, y2]')drag(start_box='[x1, y1, x2, y2]', end_box='[x3, y3, x4, y4]')hotkey(key='')type(cnotallow='') #If you want to submit your input, use "\n" at the end of `content`.scroll(start_box='[x1, y1, x2, y2]', directinotallow='down or up or right or left')wait() #Sleep for 5s and take a screenshot to check for any changes.finished()## Note- Use Chinese in `Action_Summary` part.## User Instruction{instruction}模型輸出的字段說明：
- Action_Summary ：操作的自然語言描述，帶進多輪步驟
- Action：操作名(參數)的元組
我們以 PC 端上『打開 Chrome 瀏覽器』任務為例，截圖尺寸是 1920 x 1080，模型輸出的是 Action:
left_double(start_box='(130,226)')
模型輸出 Action 對應的點擊位置
為什么 System Prompt click 是 [x1, y1, x2, y2] 兩個坐標，而不直接返回一個坐標？
早期 UI-TARS 多模態模型并不只針對 Computer Use 場景進行訓練，而是在物體檢測（Object Detection）、識別理解等，生成對應框 Box（x1, y1, x2, y2）。
面向 Computer Use 場景時，x1=x2 時直接復用當成同一點位，不相等時取中心點 (x1+x2)/2
坐標映射
還是以上面的『打開 Chrome』為例：圖像相對坐標(130,226)是怎么算出最終的屏幕絕對坐標為：(332,325)。
坐標轉換示意圖
參數說明：
- NLCommand（操作指令）：模型輸出的操作和坐標，模型在訓練和推理時輸出的是 0~1000 之間的坐標
- factor（縮放因子）：目前值為 1000（因為 UI-TARS 模型訓練的坐標系是 1000x1000），對應 UI-TARS 模型輸出的坐標值范圍
- width（屏幕寬度）: 2560px
- height（屏幕高度）: 1440px
相對坐標和絕對坐標
屏幕上的位置由 X 和 Y 笛卡爾坐標表示。X 坐標從左邊的 0 開始，向右增加。與數學不同的是，Y 坐標從頂部的 0 開始，向下增加。
UI-TARS 模型的坐標系：0,0 X increases -->+---------------------------+| | Y increases|*(130, 226) | || 1000 x 1000 screen | || | V| || |+---------------------------+ 999, 999
相對坐標：(0.02, 0.247)
映射到實際屏幕的坐標系上：0,0 X increases -->+---------------------------+| | Y increases|*(332, 325) | || 2560 x 1440 screen | || | V| || |+---------------------------+ 1919, 1079
UI-TARS 模型的坐標系：
0,0 X increases -->
+---------------------------+
| | Y increases
|*(130, 226) | |
| 1000 x 1000 screen | |
| | V
| |
| |
+---------------------------+ 999, 999
相對坐標：(0.02, 0.247)
映射到實際屏幕的坐標系上：
0,0 X increases -->
+---------------------------+
| | Y increases
|*(332, 325) | |
| 2560 x 1440 screen | |
| | V
| |
| |
+---------------------------+ 1919, 1079指令轉換
不同設備都有特定的操作指令(又可以稱為動作空間)，通過不同設備 operator 對應 NLCommand 轉成對應設備的操作指令。
指令轉換流程圖
目前支持的動作空間如下：
# PC
PC = Enums[ "hotkey", # 鍵盤按鍵 "type", # 鍵盤輸入文本 "scroll", # 鼠標滾動 "drag", # 拖拽 "click", # 左鍵點擊 "left_double", # 左鍵雙擊 "right_single", # 右鍵點擊]# Android 手機Mobile = Enums[ "click", # 單擊 "scroll", # 上下左右滑動 "type", # 輸入 "long_press", # 長按 "KEY_HOME", # 返回 Home "KEY_APPSELECT", # APP 切換 "KEY_BACK", # 返回]不同的設備操作需要模型增加對應的訓練數據，才能更好地完成對應的任務。
這一步現在有 SDK 可直接使用 @ui-tars/action-parser，調用方式見用例 (https://github.com/bytedance/UI-TARS-desktop/blob/main/packages/action-parser/test/index.test.ts )
命令執行
拿到具體執行命令后，直接調用對應設備 MCP 的 execCommand 內部的方法，PC 和手機在執行遠程命令執行時的流程圖如下：
SDK（開發者工具）
如果對以上流程實現感到繁瑣，可以使用 SDK 快速實現：
??UI-TARS Agent SDK 開發指南
(https://github.com/bytedance/UI-TARS-desktop/blob/main/docs/sdk.md）
MCP Servers
UI-TARS 相關的 Operator 工具也支持以 MCP Server 方式提供使用：
- Browser Operator：@agent-infra/mcp-server-browser
--vision開啟
思考
當前基于視覺模型的 GUI Agent 方案，第一反應想到的是 Tesla FSD 自動駕駛的技術架構演進。
第一版：規劃系統是由深度學習模型 + 傳統樹搜索 改成：感知和規劃均由兩個深度學習模型
第二版：感知和規劃的兩個深度學習模型 改成：合并成一個深度學習模型
前提假設：人是通過眼睛（視覺）看到系統 UI 就可以操作，那 AI 也可以通過視覺達成。
達成條件：無限數據 + 大規模算力，直到解決所有邊界 case。
基于視覺的 Computer Use，在技術演進上的好處在于：
- 訓練數據易準備：只需要『指令』和『視覺圖像』，大幅度減輕了模型訓練數據處理和清洗的流程。
如果輸入再加上一個『DOM 結構』就會讓模型訓練陷入沒有數據的困境中。
- 跨端設備易集成：設備只需要提供截圖和操作兩個接口，不需要獲取內部 DOM 結構，方便了不同設備進行集成。
不好的點在于：
- 精準度不夠：僅通過視覺就丟失了 UI 界面的層次結構（例如疊在后面的窗口、不在當前視窗的頁面內容等），會造成對應的操作失準。
- 延遲高：對指令+截圖的推理和識別，需要模型有更強大的推理能力，同時在執行命令時，視覺方案會轉換成指令系統（pyautogui 等）進行操作，中間鏈路過長。
應用場景
Agentic User Testing
像人操作一樣去測試應用和產品。例如 TestDriver 是一個為 GitHub 設計的異步自動化測試，可以智能生成測試用例，通過模擬真實用戶行為，提供比傳統基于選擇器的框架更廣泛的測試覆蓋，支持桌面應用程序、Chrome 擴展程序、拼寫和語法、OAuth 登錄、PDF 生成等多種功能測試。
由此可利用 Computer Use 進行端到端的功能驗證，包括檢查布局完整性、元素響應情況及視覺一致性。模型能快速指出界面問題，減少人工檢查工作量，檢查項包括：
- 功能可用性（Availability）：通過自然語言（例如：『PRD 文檔』+『前端系分文檔』），
- 視覺一致性（Consistency）：和『設計稿』是否一致，通過 CV 圖像識別 + 模型操作后的日志，得到結論
- 可訪問性（Accessibility）：無障礙檢查
Schedule Tasks 定時任務
ChatGPT Tasks 功能可以實現『每天早上 9 點半自動打卡』的需求
C 端消費級
Computer Use 在 C 端消費級還不具備上線條件，要使用起來要解決幾個問題：
- 整體響應耗時：全鏈路端到端做不到秒級，C 端商業化落地就非常困難。這點深有體會，UI-TARS 最早一版模型比較慢（推理大概 5s+），整體使用體驗會非常割裂。
- 設備權限：截圖和執行命令都是非常高的權限，除非一開始系統層內置 Computer Use。所以在 Demo 時采用了設備虛擬機，這樣就有了最高權限。
- 生態集成：目前生態怎么接入 Agent 中，似乎還有共識，不過從 MCP 中看到可以標準化接入的趨勢。
例如：讓 AI 給我發個紅包、買杯咖啡等，和直接使用 UI 操作并沒有多大優勢。
暫時沒想到好的落地場景，更多是以『iOS 捷徑』RPA 方式。未來 Computer Use 如果以 Agent 作為流量入口，通過 MCP 來集成生態（例如吃喝玩樂 APP、README 應用說明書等），倒是很有想象力。
未來
愿景
從 2013 年上映的《Her》電影來看，AI 幫人類操作計算機完成任務的科幻場景，在一步步成為現實。
新一代人機交互范式愿景
Human-in-the-loop
當 Computer Use 無法處理需要人幫助時，將控制權交換給人類。 這就有點像『完全自動駕駛』里的『安全員』，當 AI 能力無法處理時，人進行參與，收集邊界 case 數據，不斷迭代 AI。
Bot-to-Bot 交互
- 與 AI 系統進行協同和交互
- 跨平臺、跨系統任務傳遞
Computer Use 與 內部 Agent 協同，生成應用
Q & A
為什么需要 AI 幫我操作設備？
起初我也有這個問題，AI 點咖啡不如我手動點幾下，又快又不會出錯。
長期來看：
- 基于『人會越來越來懶』和『AI 越來越強』這兩個認知前提下，模型能力發展到達臨界點，Computer/Phone Use 會極大提升用戶體驗。
- 那時候『人操作設備』就像『蒸汽機時代下使用馬車』、『完全自動駕駛下人工』，那一天，我們會問『為什么需要人自己操作設備？而不是用 AI』
按自動駕駛行業的標準，Computer Use 分級為：
分級 | 名稱 | 定義 | 任務參與度 | 任務場景 |
L0 | 無自動化操作 | 任務完全由人類控制，自動系統不執行任何操作。 | 人 | 所有 |
L1 | 基本計算機輔助 | 計算機提供某些輔助功能，如自動化工具或建議，但最終決策仍由用戶做出。 | 人 | 有限例如：自動拼寫檢查、簡單的數據輸入自動填充 |
L2 （當前） | 計算機輔助執行（Copilot 階段） | 計算機可以在特定任務中執行某些操作，但用戶仍需干預或監督。 | 人（80%） + AI（20%） | 有限 例如：需要用戶調整 |
L3 | 部分自動化（Agent 階段） | 計算機可以在更多情況下獨立執行任務，但仍需要用戶在特定情況下介入。 | AI（50%） + 人（50%） | 有限 |
L4 | 高度自動化 | 計算機在大多數任務場景中能夠自動處理，用戶僅在特定情況下進行監督。 | AI（80%） + 人（20%） | 有限 |
L5 | 完全自動化 | 計算機完全自主完成任務，用戶無需干預或操作。 | AI（100%） | 所有 |
和 RPA 的區別？
Computer Use 是在接受『任務指令』后列出行動計劃，并根據『實時的屏幕變化』進行下一步的思考、計劃和操作。可以對未知的界面進行主動探索和試錯；而 RPA 更多的是流程固定化操作，這是巨大的差異。
例如：界面突然彈窗，Computer Use 是可以處理點『同意』或『不同意』
參考
Computer Use 相關：
- Computer use (beta)
https://docs.anthropic.com/en/docs/build-with-claude/computer-use - Introducing computer use, a new Claude 3.5 Sonnet, and Claude 3.5 Haiku https://www.anthropic.com/news/3-5-models-and-computer-use
- CogAgent-9B-20241220 技術報告 https://cogagent.aminer.cn/blog#/articles/cogagent-9b-20241220-technical-report
- GLM-PC：電腦智能體大模型 LLM for Computer Use https://cogagent.aminer.cn/home
- Anthropic最新：AI Agents 2024年度總結！https://mp.weixin.qq.com/s/onLByvapFe-rzaeryf5vUw
- browser-use/browser-use
https://github.com/browser-use/browser-use - anthropics/anthropic-quickstarts#computer-use-demo
https://github.com/anthropics/anthropic-quickstarts/blob/main/computer-use-demo/README.md - Developing a computer use model
https://www.anthropic.com/news/developing-computer-use - UI Agents（智能體）技術綜述
https://mp.weixin.qq.com/s/9qjr7iR785QtZOjdpBmLUA - Claude | Computer use for automating operations
https://www.youtube.com/watch?v=ODaHJzOyVCQ - GitHub - showlab/computer_use_ootb: An out-of-the-box (OOTB) version of Anthropic Claude Computer Us
https://github.com/showlab/computer_use_ootb - e2b-dev/secure-computer-use
https://github.com/e2b-dev/secure-computer-use/tree/os-computer-use - Upsonic/gpt-computer-assistant
https://github.com/Upsonic/gpt-computer-assistant - 智譜清言 - AI現場發了2萬紅包，打開了大模型Act時代
https://mp.weixin.qq.com/s/DFeaZUAi1sXKiHHshY-HSw - 【萬字長文】國內外RPA產品升級AI Agent，RPA Agent持續演變未來機會在哪里?_艾瑞專欄_艾瑞網
https://mp.weixin.qq.com/s/DFeaZUAi1sXKiHHshY-HSw - 自主 agent 的「一小步」：今天，把電腦交給大模型
https://mp.weixin.qq.com/s/8sDDAyRyG6rxOq-Rww0bmg - 從人工智能電影《her》看未來的交互場景
https://www.zhihu.com/column/p/26293394
MCP 相關：
- Model Context Protocol（模型上下文協議）介紹（上篇）
https://bytedance.larkoffice.com/docx/O7qEduJVfomr8fxrBkcck3pYn1c - appcypher/awesome-mcp-servers
https://github.com/appcypher/awesome-mcp-servers - Claude MCP協議詳解：AI與應用系統互操作的新標準
https://www.axtonliu.ai/newsletters/ai-2/posts/claude-mcp-protocol-guide - MLP 版的 Claude 控制瀏覽器
https://x.com/leeoxiang/status/1861445839279051092
相關論文：
- [2501.12326] UI-TARS: Pioneering Automated GUI Interaction with Native Agents
https://arxiv.org/abs/2501.12326 - [2411.17465] ShowUI: One Vision-Language-Action Model for GUI Visual Agent
https://arxiv.org/abs/2411.17465 - [2410.08164] Agent S: An Open Agentic Framework that Uses Computers Like a Human
https://arxiv.org/abs/2410.08164 - [2408.00203] OmniParser for Pure Vision Based GUI Agent
https://arxiv.org/abs/2408.00203 - [2407.13032] Agent-E: From Autonomous Web Navigation to Foundational Design Principles in Agentic Systems
https://arxiv.org/abs/2407.13032 - [2404.05719] Ferret-UI: Grounded Mobile UI Understanding with Multimodal LLMs
https://arxiv.org/abs/2404.05719 - [2404.03648] AutoWebGLM: A Large Language Model-based Web Navigating Agent
https://arxiv.org/abs/2404.03648 - [2312.08914] CogAgent: A Visual Language Model for GUI Agents
https://arxiv.org/abs/2312.08914 - [2310.11441] Set-of-Mark Prompting Unleashes Extraordinary Visual Grounding in GPT-4V
https://arxiv.org/abs/2310.11441
