Hướng dẫn sử dụng máy tính GPT-5.4: Xây dựng bảng điều khiển tin tức trực tiếp

Bên dưới, GPT-5.4 chạy qua vòng lặp tác nhân sử dụng máy tính:

• Tác nhân nhận ảnh chụp màn hình của bảng Kanban cùng URL hiện tại.
• Mô hình phân tích bố cục trực quan và xác định vị trí các thẻ tác vụ và cột.
• GPT-5.4 đề xuất các hành động UI như:
• di chuyển con trỏ tới một thẻ
• nhấp và giữ
• kéo thả thẻ sang cột khác
• Runner thực thi các hành động này thông qua các sự kiện con trỏ của Playwright.
• Một ảnh chụp màn hình mới được chụp và gửi lại cho mô hình để xác minh trạng thái bảng đã cập nhật.

Quy trình tiếp tục cho đến khi bảng phản ánh cấu hình mong muốn.

Điều khiến ví dụ này thú vị là mô hình không dựa vào bất kỳ hiểu biết nội bộ nào về ứng dụng Kanban.

Thay vào đó, nó suy luận hoàn toàn từ trạng thái trực quan của giao diện, xác định nơi cần nhấp, kéo và thả dựa trên ảnh chụp màn hình. Điều này minh họa một lợi thế chính của tính năng sử dụng máy tính GPT-5.4: nhà phát triển có thể tự động hóa quy trình làm việc mà không cần xây dựng tích hợp hay API tùy chỉnh cho từng công cụ.

Tương tác canvas vẽ

Kịch bản Paint xử lý các tác vụ phụ thuộc vào bố cục trực quan, suy luận không gian và kiểm soát con trỏ chính xác thay vì chỉ điền biểu mẫu đơn giản. Trong thiết lập này, tác nhân nhận một hướng dẫn vẽ và phải hoàn thành trực tiếp trong ứng dụng phác thảo trên trình duyệt.

Tôi đã gợi ý để tác nhân phác họa các cảnh khác nhau trên canvas, và GPT-5.4 xử lý nhiệm vụ bằng cách chọn màu, xác định đúng khu vực vẽ và tô lưới tương ứng.

Không giống ví dụ Kanban, nơi thách thức cốt lõi là di chuyển các thẻ có cấu trúc giữa các cột, kịch bản này phụ thuộc nhiều hơn vào việc diễn giải trạng thái trực quan của ứng dụng và đưa ra loạt quyết định tương tác mức thấp. Dưới đây là cách tính năng sử dụng máy tính đã thực hiện trong bản demo này:

• Di chuyển và nhắm mục tiêu con trỏ: GPT-5.4 trước tiên diễn giải bố cục giao diện phác thảo, gồm bảng màu ở bên trái và canvas dạng pixel trống ở giữa.
• Chọn công cụ và màu: Mô hình xác định các tùy chọn bảng màu sẵn có và nhấp chọn màu phù hợp trước khi vẽ. Trong lượt chạy đã ghi, mô hình chuyển đổi màu và sử dụng có chủ đích để tạo các vùng khác nhau trên canvas.
• Tương tác với canvas: Thay vì gọi bất kỳ API canvas nào, tác nhân tương tác với ứng dụng hoàn toàn qua các hành động UI bằng cách di chuyển con trỏ đến các ô cụ thể và tô theo mẫu lặp lại.
• Xác minh trạng thái: Sau mỗi đợt hành động, runner chụp ảnh màn hình mới và trả về cho mô hình để xác minh rằng mẫu kỳ vọng đang xuất hiện trên canvas.

Điểm thú vị là GPT-5.4 không chỉ nhấp ngẫu nhiên. Thay vào đó, nó sử dụng vòng lặp phản hồi ảnh chụp màn hình để suy luận nơi cần vẽ, màu nào đang được chọn và canvas thay đổi thế nào sau mỗi hành động.

Ở các khung sau, bạn có thể thấy rõ canvas phát triển từ một lưới trống thành một bố cục có cấu trúc với các vùng màu lớn, cho thấy mô hình duy trì nhận thức về cả tiến độ và bố cục qua nhiều lượt.

Quy trình đặt chỗ

Trong môi trường này, tác nhân tương tác với một trang web đặt chỗ mô phỏng và được yêu cầu hoàn tất luồng đặt chỗ. Điều đó có nghĩa là nó phải đi qua một chuỗi các trạng thái UI theo trình tự thay vì giải quyết một hành động đơn lẻ.

Đây là cách tính năng sử dụng máy tính được áp dụng trong bản demo này:

• Hiểu giao diện: GPT-5.4 bắt đầu bằng cách diễn giải bố cục màn hình hiện tại, xác định nút bấm, trường biểu mẫu, lịch, trình đơn thả xuống và các điều khiển xác nhận.
• Điều hướng từng bước: Tác nhân quyết định phần nào của quy trình cần hoàn tất trước, như chọn một tùy chọn, chuyển sang màn hình tiếp theo hoặc mở một thành phần biểu mẫu.
• Điền biểu mẫu: Mô hình nhập các giá trị cần thiết vào ô văn bản và tương tác với các điều khiển như trình đơn thả xuống hoặc trình chọn ngày.
• Theo dõi trạng thái qua nhiều lượt: Sau mỗi hành động, runner chụp ảnh màn hình mới và trả về cho mô hình, cho phép mô hình xác minh trường nào đã hoàn tất và còn việc gì cần làm.
• Xác nhận và hoàn tất: Khi đã điền xong các thông tin cần thiết, tác nhân chuyển đến bước xác nhận cuối cùng và kiểm tra rằng đặt chỗ đã hoàn tất thành công.

Trong khi các kịch bản Kanban, Paint và Đặt chỗ đều trình diễn khả năng điều khiển UI, chúng ta cần áp dụng chúng vào các ứng dụng thực tiễn hơn.

Ở phần tiếp theo, tôi sẽ dùng cùng ý tưởng đó để xây dựng một bảng điều khiển tin tức trực tiếp, thu thập các câu chuyện gần đây, cấu trúc kết quả và hiển thị chúng trong một giao diện có thể sử dụng bằng quy trình no-code bên trong ứng dụng Codex .

Bước 3: Tạo bảng điều khiển tin tức trực tiếp với GPT-5.4

Trong bước này, chúng ta sẽ áp dụng cùng khả năng sử dụng máy tính để xây dựng một bảng điều khiển tin tức trực tiếp. Mục tiêu là tạo một bảng điều khiển nhỏ nơi người dùng có thể chọn chủ đề quan tâm như AI, chính trị, khí hậu, công nghệ, khoa học, v.v. và hệ thống sẽ:

• Thu thập các câu chuyện tin tức gần đây từ nguồn đáng tin cậy
• Trích xuất thông tin chính từ các bài viết đó
• Tạo ba bản tóm tắt ngắn gọn
• Hiển thị kết quả theo định dạng bảng điều khiển có cấu trúc

Thay vì viết ứng dụng thủ công, chúng ta sẽ dùng Codex trong môi trường sử dụng máy tính GPT-5.4 và truyền cho nó lời nhắc sau để tạo tính năng trực tiếp trong kho CUA hiện có.

Vì Codex được kết nối với cùng môi trường được ứng dụng mẫu CUA sử dụng, tác nhân có thể phân tích kho mã, quyết định nơi bảng điều khiển sẽ đặt và tự động triển khai UI và logic.

Lời nhắc: 

Build a live News Dashboard in this repo.
Goal:
Create a dashboard where a user can enter a topic of interest, fetch the latest important news in real time from trusted sources, and render exactly 3 structured results that are meaningful and topic-relevant.
Requirements:
- The dashboard must allow the user to type a topic such as AI, politics, climate, health, science, or tech.
- Fetch live results at request time. Do not hardcode stories.
- Use trusted sources appropriate to the topic. Prefer official or well-known outlets.
- Return exactly 3 items.
- Each item must include:
  - HEADLINE
  - SOURCE
  - SUMMARY
- Summaries must be in your own words, concise, and clearly related to the article and topic.
- Avoid low-quality results such as homepages, category pages, generic aggregator wrappers, or meaningless titles.
- Prefer direct article URLs over search/aggregator wrapper links.
- Keep the UI minimal and consistent with the repo’s existing design language.
- Reuse the existing framework/tooling. Do not add new dependencies unless truly necessary.
Implementation plan:
1. Inspect the repo and place the dashboard in the existing app structure without breaking the current console.
2. Add a topic input UI with a search action and a loading/error state.
3. Add a server-side news fetch path that:
   - maps topics to trusted source sets
   - fetches recent results in real time
   - filters out irrelevant or low-quality matches
   - resolves direct article URLs where possible
   - extracts useful metadata for headline/source/summary
4. Render the dashboard with:
   - page title
   - topic
   - date
   - intro
   - exactly 3 cards/items
   - a structured export block that can be copied into another dashboard
5. Keep the export block in this exact format:
---BEGIN DASHBOARD CONTENT---
TITLE: News Brief — [TOPIC]
DATE: [today's date]
INTRO: Top 3 [TOPIC] updates from trusted sources.
ITEM 1:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
ITEM 2:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
ITEM 3:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
SOURCES_USED: [comma-separated list of sites used]
---END DASHBOARD CONTENT---
Deliverables:
- A working live dashboard route in the app
- Real-time topic search
- Exactly 3 relevant results per search
- Structured export block visible in the UI
- Short run instructions
- Basic tests for parsing/formatting logic if the repo already has a test runner

Lời nhắc hướng dẫn Codex xây dựng một bảng điều khiển tin tức trực tiếp trong kho hiện có bằng cách đóng vai trò như một đặc tả cấp cao thay vì mã triển khai chi tiết.

Codex trước tiên kiểm tra cấu trúc dự án để xác định nơi cần thêm UI bảng điều khiển và logic backend. Sau đó, nó tạo trường nhập chủ đề, truy xuất bài viết gần đây từ nguồn tin cậy theo thời gian thực, trích xuất siêu dữ liệu chính như tiêu đề, nguồn và tóm tắt, đồng thời lọc kết quả để đảm bảo độ liên quan.

Cuối cùng, nó hiển thị chính xác ba mục tin trong một bố cục sạch, có cấu trúc để dễ xem hoặc xuất trong bảng điều khiển.

Tính năng sử dụng máy tính GPT-5.4 cho phép quy trình này bằng cách cho phép mô hình quan sát và tương tác với môi trường phát triển trong khi tạo tính năng.

Thay vì chỉ đóng vai trò là trình tạo mã, Codex phân tích kho mã, xác định nơi nên đặt các thành phần mới và triển khai dần dần bảng điều khiển đồng thời xác minh kết quả.

Quy trình làm việc gồm một số bước chính:

• Kiểm tra kho mã: Codex quét cấu trúc dự án để xác định nơi thêm UI bảng điều khiển và logic hỗ trợ.
• Giao diện người dùng: Tạo trường nhập chủ đề cho phép người dùng tìm kiếm các chủ đề như AI, khí hậu hoặc công nghệ.
• Truy xuất tin tức thời gian thực: Hệ thống thu thập bài viết gần đây từ nguồn đáng tin cậy thay vì dựa vào ví dụ mã cứng.
• Lọc và tóm tắt: GPT-5.4 trích xuất siêu dữ liệu hữu ích như tiêu đề, nguồn và tóm tắt, đảm bảo kết quả phù hợp với chủ đề đã chọn.
• Hiển thị có cấu trúc: Cuối cùng, bảng điều khiển hiển thị chính xác ba mục tin theo bố cục dạng thẻ để dễ lướt.

Lưu ý: Bảng điều khiển cuối cùng không được tạo từ một lời nhắc duy nhất. Cần vài vòng lặp và tinh chỉnh lời nhắc để đạt hành vi và định dạng đầu ra mong muốn. Khi chạy các thử nghiệm tương tự, hãy kỳ vọng có thử–sai trong khi điều chỉnh lời nhắc và ràng buộc. Ngoài ra, đảm bảo trình duyệt hoặc hệ thống của bạn không chặn tương tác trình duyệt tự động, vì các hạn chế như vậy có thể cản trở quy trình sử dụng máy tính.

Kết luận

Trong hướng dẫn này, chúng ta đã khám phá cách GPT-5.4 Computer Use có thể được dùng để xây dựng các tác nhân tương tác với môi trường phần mềm thực thay vì dựa vào API truyền thống. Với ứng dụng mẫu CUA của OpenAI, trước tiên chúng ta đã xem vòng lặp sử dụng máy tính hoạt động qua một vài kịch bản sandbox như thế nào, tức là mô hình quan sát giao diện, đề xuất hành động và xác minh kết quả thông qua ảnh chụp màn hình.

Sau đó, chúng ta áp dụng cùng khái niệm để xây dựng một bảng điều khiển tin tức trực tiếp bằng Codex trong môi trường CUA. Thay vì viết ứng dụng thủ công, một lời nhắc đóng vai trò như đặc tả cấp cao, cho phép Codex kiểm tra kho mã, tạo UI và logic cho bảng điều khiển, truy xuất tin tức gần đây từ nguồn tin cậy và hiển thị kết quả theo định dạng có cấu trúc.

Từ đây, bạn có thể mở rộng ý tưởng này bằng cách xây dựng các tác nhân có thể:

• Tự động hóa bảng điều khiển nội bộ hoặc công cụ báo cáo
• Tạo quy trình nghiên cứu
• Theo dõi xu hướng ngành theo thời gian thực
• Dự phác tính năng sản phẩm mới trực tiếp trong các kho mã hiện có

Khi các mô hình sử dụng máy tính tiếp tục được cải thiện, chúng có thể mở đường cho các tác nhân phát triển và tự động hóa đa dụng, có khả năng tương tác với cả giao diện phần mềm và mã nguồn.