GPT-5.4 Computer Use 实战指南:手把手教你构建实时新闻看板 的文章头图

GPT-5.4 Computer Use 实战指南:手把手教你构建实时新闻看板

探索 GPT-5.4 的原生计算机使用(Computer Use)能力,通过 OpenAI CUA 示例应用,演示如何让 AI 像人类一样操作 UI 界面,并最终构建一个自动化新闻摘要看板。

阅读时长: 4 分钟
共 1811字
作者: eimoon.com

GPT-5.4 引入了原生“计算机使用”(Computer Use)能力。这项功能的核心在于:模型不再仅仅依赖特定应用的 API,而是可以直接与软件界面交互。通过解析屏幕截图并发出点击、打字和导航等指令,模型能像人类用户一样操作浏览器和桌面应用。

本文将基于 OpenAI 提供的 Computer-Using Agent (CUA) 示例项目,深入探讨 GPT-5.4 如何在真实界面中执行任务。我们将从基础的自动化场景入手,最终通过一个实战案例——构建一个能够自动搜集、总结并呈现特定主题资讯的“实时新闻看板”,来展示这项技术的潜力。

什么是 GPT-5.4 Computer Use?

传统的 AI 自动化往往依赖于预定义的 API 接口,这限制了模型在没有 API 的老旧系统或复杂网页上的发挥。GPT-5.4 的 Computer Use 则采用了完全不同的逻辑:它直接基于界面的视觉状态进行推理。

简单来说,该系统运行在一个闭环的智能体循环(Agent Loop)中:

  1. 发送请求:开发者提供任务目标和初始屏幕截图。
  2. 推理与行动建议:模型分析截图,建议下一步 UI 操作(如点击、滚动、输入)。
  3. 执行:运行环境(通常是基于 Playwright 的浏览器)执行这些动作。
  4. 状态反馈:执行后截取新屏幕并返回给模型。
  5. 循环往复:模型观察更新后的界面,直到任务完成。

这种“观察 -> 决策 -> 行动 -> 观察”的模式,使 AI 能够跨工具完成多步骤的工作流,而无需任何定制化的集成。

第一步:环境搭建

首先,我们需要克隆 OpenAI 的 CUA 示例应用并配置本地环境。

git clone https://github.com/openai/openai-cua-sample-app.git
cd openai-cua-sample-app
corepack enable
pnpm install
cp .env.example .env

.env 文件中填入你的 OpenAI API Key。接着,安装 Playwright 浏览器运行环境:

pnpm playwright:install

如果是 Linux 系统,可能还需要安装相关的系统依赖:

pnpm playwright:install:with-deps

启动开发服务器:

pnpm dev

现在你可以访问 http://127.0.0.1:3000 启动 CUA 控制台,在这里可以发起任务、查看日志并观察 AI 的实时截图。

第二步:探索典型场景

CUA 示例应用内置了三个沙盒环境,非常适合理解 Computer Use 的运作方式。

1. Kanban 看板自动化

在这个场景中,模型需要整理任务卡片。它并不调用后台数据库接口,而是通过 Playwright 的指针事件,模拟人类“看”到卡片位置、点击并拖拽到目标列的操作。模型完全基于视觉布局来识别卡片之间的逻辑关系。

2. 画布交互(Paint)

这个场景考验的是模型的空间推理能力。给定一个绘图指令,GPT-5.4 需要识别色板位置、选择颜色、在像素格中定位并填充。通过观察反馈截图,模型能感知画布的演变,从而修正后续的落笔位置。

3. 预订流程(Booking)

这是一个多页面跳转的复杂流程。模型需要处理表单填充、日期选择和点击确认。在这种场景下,模型必须具备状态追踪能力,明确哪些字段已填写,哪些步骤尚未完成。

第三步:实战——构建实时新闻看板

理解了基础原理后,我们尝试利用 GPT-5.4 自动生成一个新功能:实时新闻看板。用户只需输入一个主题(如“AI”或“气候变化”),系统就会自动执行以下操作:

  1. 在浏览器中搜索权威新闻源。
  2. 提取相关文章的关键信息。
  3. 生成三条精炼的摘要。
  4. 在 UI 界面中结构化展示。

我们不需要手写代码,而是利用环境中的 Codex 能力,直接通过 Prompt 驱动模型在代码仓库中实现该功能。

Prompt 策略

你可以向智能体发送如下指令:

在当前仓库中构建一个实时新闻看板。

目标:用户输入主题,系统实时抓取权威来源的新闻,并渲染 3 条结构化结果。 要求

  • 允许输入 AI、科技、科学等主题。
  • 必须是实时抓取,不能硬编码。
  • 结果包含:标题(HEADLINE)、来源(SOURCE)、摘要(SUMMARY)。
  • UI 风格与现有仓库保持一致。
  • 在现有应用结构中添加路由,不要破坏原有控制台。

GPT-5.4 的执行逻辑

在接收到这个高层级的指令后,GPT-5.4 表现得像一个真正的软件工程师:

  • 仓库检查:它首先“观察”项目目录结构,决定在何处添加路由和逻辑组件。
  • UI 开发:自动生成搜索框、加载状态和卡片布局。
  • 逻辑实现:编写新闻抓取脚本,并利用自身的推理能力过滤低质量链接(如广告或聚合页)。
  • 结果渲染:将抓取到的内容通过结构化模块展示在页面上。

通过这种方式,开发过程从“写代码”变成了“评审 AI 的实现”。虽然可能需要几轮 Prompt 微调来优化输出格式,但效率远高于传统的纯手动开发。

总结与展望

GPT-5.4 的计算机使用功能标志着 AI Agent 从“对话框”走向了“操作桌面”。它的意义在于:

  1. 打破 API 壁垒:即使目标软件没有开放接口,AI 也能通过视觉界面进行操作。
  2. 通用自动化:一个模型就能胜任从看板管理到复杂网页操作的各类任务。
  3. 开发范式转移:通过像 Codex 这样的工具,模型可以一边“观察”代码运行结果,一边进行增量式的功能开发。

随着这类模型在精准度和速度上的持续提升,未来的自动化智能体将能够胜任更复杂的行业调研、财务审计或日常办公流自动化。

关于

关注我获取更多资讯

月球基地博客公众号二维码,扫码关注获取更多 AI 与编程资讯
📢 公众号
月球基地博客作者个人微信二维码,扫码交流 AI 与编程话题
💬 个人号
使用 Hugo 构建
主题 StackJimmy 设计