Browser

The Browser panel is a web browser in the rail. Open your local dev server next to the chat that is changing it, check the page with WebKit’s Web Inspector, and point at the element you want changed.

Open it with ⌘⇧5, from the rail’s Open a panel list, or by typing /browser in the composer. It is available while Browser tools is on in Settings ▸ Browser & tools, which it is by default.

There is one browser for the whole window, so every folder’s Browser tab shows the same page, and it keeps that page while you switch between chats. Agents do not control this panel: you choose what to show them.

Open a page

Type in the address bar, Search or enter a URL, and press ↩. Anything that is not an address becomes a Google search. An address without a scheme gets https://, or http:// for localhost and 127.0.0.1. For a local server with a port, type the full address, such as http://localhost:3000. Esc puts the current page’s address back.

With no page open, the panel says Start browsing and lists up to four local pages to click:

• Dev servers running on your Mac, by project name and localhost port.
• Local addresses that came up in this chat’s tool output, newest first.
• Start servers, when the folder has servers in the Run panel and nothing else is listed.

Pages also open from elsewhere:

• Links in the transcript. A web link opens in the Browser panel while Browser tools is on, and in your default browser when it is off.
• The Activity panel. Clicking a browser action opens the page it used.

Back, Forward and Reload sit at the left of the toolbar; Reload turns into Stop while a page loads. With the page focused, ⌘R reloads; with the panel focused, ⌘[ and ⌘] go back and forward. A link that asks for a new window opens in the same panel. Open in default browser (the arrow in the address bar) and More ▸ Copy page address take the page elsewhere.

Show a page to the agent

• Send page to chat adds Inspect this page in the browser: and the page’s address to the composer.
• Capture and attach takes a screenshot of the visible page and attaches it to the composer.
• Design mode sends an element or area with your instructions. See the next section.

Nothing is sent until you send the message, except in design mode. More also has Save page link as turn evidence and Capture as turn evidence, which attach the page to the chat’s last finished turn; see Reviewing changes.

Design mode

Design mode lets you point at part of a page and tell the agent what to change.

1. Load the page, then press ⌘⇧D or click Design Mode, the pen in the toolbar. The pen becomes a Design pill.
2. Move the pointer over the page. Each element is outlined with a label naming it, including the React, Vue or Svelte component when the page exposes one.
3. Click an element to select it, or drag to draw a region.
4. Type what you want in the box under the selection, Describe the change, and press ↩.

Codz sends your words to the chat beside the panel straight away, with a screenshot of the selection outlined and a description of the element: the page address, its tag, its path in the page, its id and classes, its text, its size and position and, where known, its component. If the chat is busy, the message waits in its queue.

While the box is empty, the keyboard walks the page: ↩ selects the element’s first child, ⇧↩ its parent, and Tab and ⇧Tab its siblings. Esc drops the selection; press it again, click the Design pill, or press ⌘⇧D to leave design mode. The model button in the box is the chat’s own model picker; a change there applies to the chat.

Inspect, find and zoom

• Web Inspector. Click Show Web Inspector (</>) in the toolbar, choose View ▸ Show Web Inspector (⌥⌘I), or More ▸ Show Web Inspector. WebKit’s inspector docks inside the panel and stays open when you switch chats. Show JavaScript Console opens it on the console. The inspector needs a loaded page.
• Find. With the page focused, press ⌘F, or choose More ▸ Find in Page…. The bar shows the match count, such as 3 of 12. ↩ and ⇧↩ move through matches, as do ⌘G and ⌘⇧G, and Esc closes the bar.
• Zoom. View ▸ Zoom In (⌘=) and Zoom Out (⌘-) step between 25% and 500%. When a page is not at 100%, the address bar shows the level; click it to reset. Codz remembers the zoom for each site until you quit.

Downloads, dialogs and permissions

• Downloads go to your Downloads folder, with a number added when the name is taken. The Downloads button appears once there is one: it lists each download with its progress (click to cancel), Show in Finder when it is done, and Clear finished downloads.
• Alerts, confirmations and prompts from a page appear as sheets on the Codz window, titled with the site, such as localhost:3000 says.
• File uploads open the standard file picker.
• Camera and microphone. When a page asks, Codz asks you first. The answer is remembered for that site until you quit.

Sessions and blocked sites

These live in Settings ▸ Browser & tools:

Clearing browser data signs you out of sites you opened in the panel. It does not touch the browsers or apps your providers use.

The same page has two switches for the agents’ own web tools, separate from this panel:

• Web search (on by default) lets supported providers search the web. Turning it off stops Claude Code’s web search and Codex’s.
• Web fetch (on by default) lets supported providers read pages. Turning it off stops Claude Code’s.

Keyboard shortcuts

⌘R reloads while the page has focus, and ⌘F, ⌘[ and ⌘] act on the browser while the panel has focus. Elsewhere they keep their usual meaning in Codz.

Troubleshooting

Navigation to a site is blocked in Codz Settings. The host, or a domain above it, is in Blocked sites. Remove it there.

A local address does not load. Type the full address with its scheme, such as http://localhost:3000, and check that the server is running. The Run panel can start your project’s dev servers.

I am signed out of sites after relaunching. Persist sessions is set to Don’t keep. Set it to Shared across tasks.