Tutorial Penggunaan Komputer GPT-5.4: Bangun Dasbor Berita Langsung

Di balik layar, GPT-5.4 berjalan melalui loop agen penggunaan komputer:

• Agen menerima tangkapan layar papan Kanban bersama dengan URL saat ini.
• Model menganalisis tata letak visual dan menentukan lokasi kartu tugas dan kolom.
• GPT-5.4 mengusulkan tindakan UI seperti:
• memindahkan kursor ke sebuah kartu
• mengklik dan menahan
• menyeret kartu ke kolom lain
• Runner mengeksekusi tindakan ini melalui event pointer Playwright.
• Tangkapan layar baru diambil dan dikirim kembali ke model agar dapat memverifikasi status papan yang diperbarui.

Proses berlanjut hingga papan mencerminkan konfigurasi yang diinginkan.

Yang membuat contoh ini menarik adalah model tidak bergantung pada pengetahuan internal apa pun tentang aplikasi Kanban.

Sebaliknya, model sepenuhnya menalar dari keadaan visual antarmuka, menentukan di mana harus mengklik, menyeret, dan meletakkan elemen berdasarkan tangkapan layar. Ini menunjukkan keunggulan utama penggunaan komputer GPT-5.4: pengembang dapat mengotomatisasi alur kerja tanpa membangun integrasi atau API khusus untuk setiap alat.

Interaksi kanvas Paint

Skenario Paint menangani tugas yang bergantung pada tata letak visual, penalaran spasial, dan kontrol kursor yang presisi, bukan sekadar pengisian formulir sederhana. Dalam pengaturan ini, agen diberi instruksi menggambar dan harus menyelesaikannya langsung di dalam aplikasi sketsa berbasis browser.

Saya meminta agen untuk membuat sketsa berbagai pemandangan di seluruh kanvas, dan GPT-5.4 menangani tugas tersebut dengan memilih warna, menemukan area gambar yang benar, dan mengisi kisi sesuai instruksi.

Berbeda dengan contoh Kanban, di mana tantangan utamanya adalah memindahkan kartu terstruktur antar kolom, skenario ini jauh lebih bergantung pada penafsiran keadaan visual aplikasi dan pengambilan serangkaian keputusan interaksi tingkat rendah. Begini cara penggunaan komputer melakukannya dalam demo ini:

• Pergerakan dan pembidikan kursor: GPT-5.4 terlebih dahulu menafsirkan tata letak antarmuka sketsa, termasuk palet warna di kiri dan kanvas piksel kosong di tengah.
• Pemilihan alat dan warna: Model mengidentifikasi opsi palet yang tersedia dan mengklik warna yang sesuai sebelum menggambar. Dalam run yang ditangkap, model berganti warna dan menggunakannya secara sengaja untuk membuat area berbeda di kanvas.
• Interaksi kanvas: Alih-alih memanggil API kanvas apa pun, agen berinteraksi dengan aplikasi sepenuhnya melalui tindakan UI dengan menggerakkan penunjuk ke sel tertentu dan mengisinya dalam pola berulang.
• Verifikasi status: Setelah setiap rangkaian tindakan, runner mengambil tangkapan layar baru dan mengembalikannya ke model agar dapat memverifikasi bahwa pola yang diharapkan muncul di kanvas.

Hal menarik yang perlu dicatat adalah GPT-5.4 tidak sekadar mengklik secara acak. Sebaliknya, model menggunakan loop umpan balik tangkapan layar untuk menalar di mana gambar harus dibuat, warna apa yang sedang dipilih, dan bagaimana kanvas berubah setelah setiap tindakan.

Pada bingkai-bingkai berikutnya, Anda dapat melihat dengan jelas kanvas berevolusi dari kisi kosong menjadi komposisi terstruktur dengan area berwarna besar, menunjukkan bahwa model mempertahankan kesadaran atas kemajuan dan tata letak selama beberapa giliran.

Alur pemesanan

Dalam lingkungan ini, agen berinteraksi dengan situs web pemesanan simulasi dan diminta untuk menyelesaikan alur reservasi. Artinya, agen harus melalui beberapa status UI secara berurutan alih-alih menyelesaikan satu tindakan terisolasi.

Begini cara penggunaan komputer diterapkan dalam demo ini:

• Pemahaman antarmuka: GPT-5.4 mulai dengan menafsirkan tata letak layar saat ini, mengidentifikasi tombol, kolom formulir, kalender, dropdown, dan kontrol konfirmasi.
• Navigasi langkah demi langkah: Agen memutuskan bagian alur kerja mana yang harus diselesaikan terlebih dahulu, seperti memilih opsi, berpindah ke layar berikutnya, atau membuka elemen formulir.
• Pengisian formulir: Agen memasukkan nilai yang diperlukan ke dalam kotak teks dan berinteraksi dengan kontrol seperti dropdown atau pemilih tanggal.
• Pelacakan status lintas giliran: Setelah setiap tindakan, runner mengambil tangkapan layar baru dan mengembalikannya ke model, memungkinkan model memverifikasi kolom mana yang sudah terisi dan apa yang masih perlu dilakukan.
• Konfirmasi dan penyelesaian: Setelah input yang diperlukan terisi, agen melanjutkan ke langkah konfirmasi akhir dan memeriksa bahwa reservasi berhasil diselesaikan.

Meskipun skenario Kanban, Paint, dan Booking semuanya mendemonstrasikan kontrol UI, kita perlu menerapkannya pada aplikasi yang lebih praktis.

Pada bagian berikutnya, saya akan menggunakan gagasan yang sama untuk membangun dasbor berita langsung yang mengumpulkan berita terbaru, menstrukturkan hasil, dan menampilkannya dalam antarmuka yang dapat digunakan dengan alur kerja tanpa kode di dalam aplikasi Codex.

Langkah 3: Membuat dasbor berita langsung dengan GPT-5.4

Pada langkah ini, kita akan menerapkan kapabilitas penggunaan komputer yang sama untuk membangun dasbor berita langsung. Tujuannya adalah membuat dasbor kecil di mana pengguna dapat memilih topik yang diminati, seperti AI, politik, iklim, teknologi, sains, dll. dan sistem kemudian akan:

• Mengumpulkan berita terbaru dari sumber tepercaya
• Mengekstrak informasi kunci dari artikel-artikel tersebut
• Menghasilkan tiga ringkasan singkat
• Menampilkan hasil dalam format dasbor terstruktur

Alih-alih menulis aplikasi secara manual, kita akan menggunakan Codex di dalam lingkungan penggunaan komputer GPT-5.4 dan memberinya prompt berikut untuk menghasilkan fitur tersebut langsung di dalam repositori CUA yang ada.

Karena Codex terhubung ke lingkungan yang sama yang digunakan oleh aplikasi contoh CUA, agen dapat menganalisis repositori, memutuskan di mana dasbor harus ditempatkan, dan mengimplementasikan UI serta logikanya secara otomatis.

Prompt: 

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 runnerDidukung oleh

Prompt tersebut menginstruksikan Codex untuk membangun dasbor berita langsung di dalam repositori yang ada dengan bertindak sebagai spesifikasi tingkat tinggi, bukan kode implementasi terperinci.

Codex terlebih dahulu memeriksa struktur proyek untuk menentukan di mana UI dasbor dan logika backend harus ditambahkan. Lalu Codex membuat kolom input topik, mengambil artikel terbaru dari sumber tepercaya secara real time, mengekstrak metadata kunci seperti judul, sumber, dan ringkasan, serta memfilter hasil untuk memastikan relevansi.

Terakhir, Codex menampilkan tepat tiga item berita dalam tata letak bersih dan terstruktur yang mudah dilihat atau diekspor di dasbor.

Penggunaan komputer GPT-5.4 memungkinkan alur kerja ini dengan memungkinkan model mengamati dan berinteraksi dengan lingkungan pengembangan saat menghasilkan fitur.

Alih-alih bertindak semata sebagai generator kode, Codex menganalisis repositori, menentukan di mana komponen baru harus ditempatkan, dan secara bertahap mengimplementasikan dasbor sambil memverifikasi hasilnya.

Alur kerja melibatkan beberapa langkah kunci:

• Inspeksi repositori: Codex memindai struktur proyek untuk mengidentifikasi di mana UI dasbor dan logika pendukung harus ditambahkan.
• Antarmuka pengguna: Codex membuat kolom input topik yang memungkinkan pengguna mencari subjek seperti AI, iklim, atau teknologi.
• Pengambilan berita real-time: Sistem mengumpulkan artikel terbaru dari sumber tepercaya alih-alih bergantung pada contoh yang di-hardcode.
• Penyaringan dan peringkasan: GPT-5.4 mengekstrak metadata berguna seperti judul, sumber, dan ringkasan, memastikan hasil tetap relevan dengan topik yang dipilih.
• Perenderan terstruktur: Terakhir, dasbor menampilkan tepat tiga item berita dalam tata letak bergaya kartu agar hasil mudah dipindai.

Catatan: Dasbor akhir tidak dihasilkan dari satu prompt saja. Diperlukan beberapa iterasi dan penyempurnaan prompt untuk mendapatkan perilaku dan format keluaran yang diinginkan. Saat menjalankan eksperimen serupa, harapkan beberapa coba-coba sambil menyesuaikan prompt dan batasannya. Pastikan juga browser atau sistem Anda tidak memblokir interaksi browser otomatis, karena pembatasan semacam itu dapat mengganggu alur kerja penggunaan komputer.

Kesimpulan

Dalam tutorial ini, kita mengeksplorasi bagaimana Computer Use GPT-5.4 dapat digunakan untuk membangun agen yang berinteraksi dengan lingkungan perangkat lunak nyata alih-alih bergantung pada API tradisional. Dengan menggunakan aplikasi contoh CUA dari OpenAI, kita terlebih dahulu meninjau cara kerja loop penggunaan komputer melalui beberapa skenario sandbox, yaitu bagaimana model mengamati antarmuka, mengusulkan tindakan, dan memverifikasi hasil melalui tangkapan layar.

Kemudian kita menerapkan konsep yang sama untuk membangun dasbor berita langsung menggunakan Codex di dalam lingkungan CUA. Alih-alih menulis aplikasi secara manual, sebuah prompt bertindak sebagai spesifikasi tingkat tinggi, memungkinkan Codex memeriksa repositori, menghasilkan UI dan logika untuk dasbor, mengambil berita terbaru dari sumber tepercaya, dan menampilkan hasil dalam format terstruktur.

Dari sini, Anda dapat memperluas gagasan ini lebih jauh dengan membangun agen yang:

• Mengotomatiskan dasbor internal atau alat pelaporan
• Menghasilkan pipeline riset
• Melacak tren industri secara real time
• Membuat prototipe fitur produk baru langsung di dalam repositori yang ada

Seiring model penggunaan komputer terus berkembang, model dapat semakin terbuka untuk agen pengembangan dan otomasi tujuan umum yang mampu berinteraksi dengan antarmuka perangkat lunak dan basis kode.