Computer use and in-app browser

Let Codex inspect a rendered interface instead of guessing from its code. Start with your website in the built-in browser, give precise visual feedback, and use desktop Computer Use when the task needs another app.

Before you start

• An updated ChatGPT desktop app with Codex access. Desktop Computer Use requires a supported region and permission from your workspace.
• A website project you can run locally, its documented development command, and a specific page or visible problem to check. A public test page also works for inspection.
• For the desktop-app exercise: the Computer Use plugin and a harmless target app such as Calculator. On macOS, you must grant Screen Recording and Accessibility permissions yourself.

Want to do it yourself?

Difficulty

6 out of 10

Estimated completion time

30–60 minutes

Skills you’ll need: Grant the required app permissions, describe a visible check, and compare the recorded actions with the intended result.

I’ll do it myselfI’d rather get help

How this helps your brand

Rendered checks help you assess whether a website control is usable, beyond whether its source code looks plausible. Repeating the visible flow after a repair helps protect the customer action it supports.

1. 1

   Step 1: Open a real page in the built-in browser

   Open a Codex chat in your website project. Start its development server using the project’s instructions, or ask Codex to inspect those instructions and start it. Use the actual local URL and port the server reports.

   Select New tab in the desktop app and enter that URL, or ask Codex to open it with @Browser. Confirm that the intended page loads before asking for a fix. The built-in browser has its own profile; sign-ins from your regular Chrome profile are not automatically shared.

2. 2

   Step 2: Describe one visible problem

   Name the route, what you did, what happened, and what you expected. For example: “On /contact, the Send button extends past the form at a narrow window width. Keep it inside the form without hiding the label.”

   For precise feedback, select Annotate in the browser toolbar, click an element or drag over an area, and save a comment. Then send a chat message asking Codex to address that comment. Saving a comment gives context; the follow-up message tells Codex to act on it.

   Illustrated examplePair a marked area with an explicit request

   ● ● ●Example · /contact · 360px

   Northline StudioLet’s talk.

   Your message

   I’m planning a renovation…

   Send message1

   Orange marks the button’s overflow.

   1 · Saved annotation

   The Send button extends beyond the form at this width.

   2 · Send a chat message

   On /contact at 360px, fix the annotated overflow. Keep the button inside the form and its full label visible.

   The annotation identifies the area. Your message asks Codex to act.

3. 3

   Step 3: Ask Codex to repeat the visible check

   Use the prompt below to have Codex reproduce the problem, make a small fix, and inspect the rendered result again. Ask it to state what it actually checked and what remains untested.

   Review the page yourself after the response. Try the original problem state and a nearby one, such as a wider window or a longer button label. Inspect the code diff as well: a good screenshot alone does not establish that unrelated behavior still works.

   Tip: Browser permissions are under Settings > Browser > Agent permissions. Managed workspaces can restrict them. The built-in browser cannot automate file uploads.

   Illustrated exampleSeparate visible evidence from untested behavior

   ↻

   Same route. Same action. Check again.Example report after the /contact fix

   ↔360px · original state

   Observed“Send message” fits within the form.

   ↔768px · nearby state

   ObservedThe wider layout still keeps the button aligned.

   ±Changed files

   Review the diffCheck that the change is limited to the contact form.

   Still untestedMessage delivery. A visible layout check does not verify submission.

4. 4

   Step 4: Enable desktop Computer Use when the task needs it

   For a desktop app rather than the web preview, open Plugins > Computer Use. Select Install plugin if prompted, select Enable if shown, turn on the server and skill toggles, then select Try now. Review access under Settings > Computer use.

   On macOS, grant Screen Recording and Accessibility when prompted. On Windows, keep the app visible on the active desktop and let Codex use the foreground while it works. A first check can be: “Use Computer Use in Calculator to calculate 18 × 7 and report the displayed result.” Approve the intended app and confirm that the display reads 126.

   Mention @Computer or the specific app, or explicitly ask for Computer Use. For repeatable data operations in an app with a dedicated plugin, prefer that structured connection.

   Illustrated exampleProve desktop access with a harmless calculation

   ▦Calculator · example

   18 × 7 =126

   789÷456×123−0.=+

   A small desktop check

   1. Enable Computer UseApprove Calculator as the intended app.
   2. Allow accessOn macOS: Screen Recording and Accessibility. On Windows: keep the app visible on the active desktop.
   3. Read the real displayAsk for 18 × 7. Confirm that Calculator visibly shows 126.

   This drawing shows the expected result. Your actual app must pass the check.

5. 5

   Step 5: Recover when the page or app is unavailable

   If the local page will not load, check the server’s output and exact port first. Ask Codex to report a failed startup rather than assuming the page was tested. If access is restricted by workspace policy, ask your administrator to review it.

   If a macOS app cannot be seen or controlled, check System Settings > Privacy & Security > Screen Recording and Accessibility for Codex Computer Use. On Windows, bring the target app to the active desktop. Stop the task if it uses the wrong window, correct the target, and retry the same small check.

Use @Browser to inspect [exact local URL and route] in this project. First confirm that the development server is running using the project instructions. Reproduce this problem: [steps, visible result, and expected result]. Read any browser annotations I left. Make the smallest relevant fix, then repeat the same flow and check [one nearby state]. List changed files, observed results, and anything you could not test. Do not deploy, submit real customer data, or change unrelated pages.