OpenAI公式「Computer Use」サンプルアプリを動かしてみた

今回は、OpenAI公式が提供しているCUA（Computer Use Agent）サンプルアプリをローカル環境でそのまま動かしてみました。セットアップから実行までの手順と、仕組みの概要を紹介します。

そもそもOpenAIの「Computer Use」とは？

OpenAIのComputer Useは、gpt-5.4モデルとcomputerツールを組み合わせて、AIにブラウザやデスクトップの操作を委任できる機能です。

ポイントをまとめると以下のとおりです。

• 現行の実装ではgpt-5.4 + computerツールの組み合わせを使用する
• 旧computer-use-previewは新規実装向けではない
• OpenAI公式のComputer Useガイドでも、エンドツーエンドの実行例としてサンプルアプリの利用が案内されている

公式ドキュメントでも「まずはサンプルアプリから始めるのが最短ルート」とされているので、そこから試していきます。

前提環境

公式サンプルアプリの動作に必要な環境は以下のとおりです。

Node.jsとpnpmが入っていれば、あとはサンプルアプリ側のセットアップで揃います。

セットアップ手順

1. リポジトリをクローン

bash

git clone https://github.com/openai/openai-cua-sample-app.git
cd openai-cua-sample-app

2. pnpmを有効化して依存パッケージをインストール

bash

corepack enable
pnpm install

3. 環境変数を設定

bash

cp .env.example .env

.envファイルを開いて、OpenAIのAPIキーを設定します。

OpenAI APIキーの取得方法は以下の記事から
OpenAI APIキーの取得方法と主要API・料金の最新まとめ（2026年2月版）

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx

4. Playwrightをインストール

bash

pnpm playwright:install

Linuxの場合はシステム依存ライブラリもまとめて入れるオプションが用意されています。

bash

pnpm playwright:install:with-deps

OpenAIのComputer Useガイドでも、最短のプロトタイプはPlaywrightかSeleniumから始めることが推奨されています。

5. 開発サーバーを起動

bash

pnpm dev

ブラウザで http://127.0.0.1:3000 を開けば、サンプルアプリのUIが表示されます。

起動後の操作

サンプルアプリを開くと、オペレーターコンソールが表示されます。

操作の流れはシンプルです。

1. シナリオ（タスク）を選択する
2. HeadlessモードのままRunを開始する
3. AIがブラウザを操作する様子をスクリーンショットで確認できる

サンプルアプリの中には、実行開始やスクリーンショット確認用のオペレーターコンソールと、実際にブラウザ操作を行うランナーが含まれています。

READMEによると、nativeモードがResponses APIのcomputerツールを直接使う形になっており、Computer Useの実演に一番近い構成です。

サンプルアプリに用意されている3つのシナリオ

オペレーターコンソールには、あらかじめ3つのシナリオが用意されています。
それぞれがローカルの検証用ブラウザラボに接続される設計で、外部サイトにアクセスすることなくComputer Useの動作を確認できます。

シナリオごとに専用の検証（Verification）も用意されており、たとえばKanbanは最終カード配置、Paintは保存状態とキャンバス状態、Bookingは確認レコードと条件一致をチェックします。

Advanced Settings の意味

オペレーターコンソールには「Advanced settings」セクションがあり、実行方式を細かく調整できます。

Engineは「モデルの切替」ではなく、実行方式の切替です。

• Code: PlaywrightのJavaScript REPL（exec_js）でブラウザを操作する方式
• Native: computerツールを直接使って、クリック・ドラッグ・入力・スクリーンショットを実行する方式

Browserはブラウザの表示方法を選びます。

• Headless: 画面を出さず裏で実行する
• Visible: ブラウザウィンドウを開いて操作の様子を目で見られる

Verificationは、シナリオ実行後に専用の検証を走らせるかどうかの設定です。オンにするとシナリオごとのbuilt-in checksが実行され、オフにすると「モデルのaction loopが完了したこと」自体を成功条件として扱います。

Turn budgetは、モデルが使えるターン数の上限です。UIでは4〜50turnsの範囲で調整でき、デフォルトは24です。値が高いほど長い計画を立てられますが、そのぶん実行に時間がかかります。

なお、実際に使われるモデルはこの画面ではなく環境変数で決まります。Runner側はCUA_DEFAULT_MODEL、Web側はNEXT_PUBLIC_CUA_DEFAULT_MODELで、どちらもデフォルトはgpt-5.4です。

Northstar Staysを実際に試してみた

3つのシナリオの中から、今回はNorthstar Staysを試してみました。
宿泊予約サイト風のUIに対してAIが検索・フォーム入力・予約確定まで一連の操作を行うデモです。

どんなタスクなのか

Northstar Staysでは、ブラウザラボ上に「NORTHSTAR HOTELS & RESORTS」という架空の宿泊予約サイトが用意されています。
AIはこの予約UIを操作して、ホテルの検索・絞り込み・選択・フォーム入力・予約確定までを一貫して行います。

具体的には以下のような操作が含まれます。

• 地域やフィルタ条件（朝食付き、ワークスペースデスクなど）の選択と検索
• 検索結果の中から条件に合うホテルを選択（「Choose stay」ボタンのクリック）
• 予約フォームへのゲスト名・メールアドレス・チェックイン日・チェックアウト日・特記事項の入力
• 「Confirm stay」ボタンによる予約確定

つまり「ボタンクリック」だけでなく、テキスト入力・日付指定・条件判断が組み合わさった、実務に近い操作をAIが自律的に組み立てるシナリオです。

実行に使ったプロンプト

今回は以下のRun promptを使いました。

Book the Luma Harbor Hotel from 4/18 to 4/21 for Ada Lovelace (ada.lovelace@example.com). Ensure breakfast is included and request a late arrival after 9pm.

このプロンプトには、ホテル名・宿泊期間・ゲスト情報・条件（朝食付き）・特記事項（21時以降のレイトチェックイン希望）がすべて含まれています。
AIはこれを読み取って、予約UIの各フィールドに適切な値を入力していきます。

実行手順

1. オペレーターコンソールのScenarioで「Northstar Stays」を選択する
2. Run promptに上記のプロンプトを入力する（デフォルトで入っている場合もある）
3. Advanced settingsは既定のまま（Code / Headless / 24 turns）でOK
4. 「Start Run」をクリックして実行を開始する

Agent Activityで実行の流れを追う

実行が始まると、画面上部のAgent Activityセクションにイベントが時系列で流れていきます。
実際に観察できた流れはこうでした。

1. Run started — Northstar Stays・code・headless・24 turnsで開始
2. Workspace ready — ローカルにワークスペースディレクトリが作成される
3. Using the live Responses API code loop for the booking lab — gpt-5.4でResponses APIのループが開始
4. Operator — booking-complete-reservationシナリオのRunが開始される
5. Lab runtime started — ブラウザラボがローカルポートで起動
6. Browser session started — run-scopedのbooking labブラウザセッションが開始
7. Navigation — ラボのURLへ遷移
8. Captured Booking Loaded（Frame 1） — 予約画面の初期表示がスクリーンショットとしてキャプチャされる
9. Responses API turn 1 completed — 最初のターンが完了（336 in / 98 out / 10 reasoning）
10. Run browser script — モデルがブラウザ操作のスクリプトを実行
11. Captured Responses Code Turn（Frame 2） — 操作後の画面がキャプチャされる

この後もターンが繰り返され、フォーム入力→確認→予約確定までAIが自律的に進めていきます。

Live Frameで操作結果を確認

画面下部のLive Frameセクションでは、AIが操作しているブラウザの状態をリアルタイムで確認できます。

今回のケースでは、Frame 2の時点で以下の状態が表示されていました。

• 「Book a stay」画面にSan Franciscoのホテルが3件表示されている
• Luma Harbor Hotel（Marina District、$289/night、朝食付き・ワークスペースデスク）
• Ember Lane Hotel（Mission Bay、$241/night）
• Port Exchange Inn（Embarcadero、$264/night）
• 右側に「Review and reserve」の予約フォームが表示されている

プロンプトで指定した「Luma Harbor Hotel」は朝食付き（Breakfast included）の条件も満たしているので、AIはこのホテルの「Choose stay」をクリックし、続いてフォームに名前・メール・日付・特記事項を入力していく流れです。

Review timelineでフレームを振り返る

画面最下部にはReview timelineがあり、実行中にキャプチャされたフレームをスライダーで振り返ることができます。
「Replay JSON」ボタンから実行ログのJSON全体を確認することも可能です。

今回はFrame 1（予約画面の初期表示）とFrame 2（最初のブラウザ操作後）が記録されており、AIの操作がどのように進行したかをスクリーンショットの連続として確認できました。

動かしてみた所感

Northstar Staysは、Computer Useの実用性を最もイメージしやすいシナリオでした。

プロンプトに「誰が・どこに・いつ・どんな条件で泊まりたいか」を自然文で書くだけで、AIが予約UIの操作を自律的に組み立てて実行していきます。
検索フィルタの選択、条件に合うホテルの判断、フォームへの正確な入力、確認ボタンの押下まで、人間がブラウザで行う操作と同じ流れをAIが再現している様子を見ると、「AIエージェントに仕事を任せる」という概念が一気にリアルになります。

Verificationをオンにしておけば、実行完了後に予約確認レコードと入力条件の一致が自動チェックされるので、タスクが正しく完了したかどうかも確認できます。

まとめ：試してみた所感

OpenAI公式のCUAサンプルアプリは、セットアップ自体は非常にスムーズでした。Node.jsとpnpmが入っていれば、コマンド数本で動く状態まで持っていけます。

実際に動かしてみると、AIがブラウザ上でクリックや入力を行う様子をスクリーンショット越しに確認でき、「AIエージェントが仕事をする」未来像を体感できます。

参考リンク

• Computer-Using Agent | OpenAI（公式ブログ）
• openai-cua-sample-app