# Browser and design mode

Preview your app in the built-in browser, point the agent at elements with design mode, choose where links open, and snap your screen into a chat.

Canonical page: https://themachine.myapps.ai/docs/code/browser

## The built-in browser

Machine Code has a browser that opens as a tab next to your chat. Use it to
look at your dev server while the agent works on it.

Open one with **Ctrl+Shift+B**, the browser button in the header, or the
**+** in the tab bar. Use **Device size** to see the page at phone or tablet
width, and **Responsive** to go back.

## Design mode

Design mode lets you point at the thing you want changed instead of
describing where it is.

### Turn on design mode

Click **Design mode** in the browser's toolbar.
### Pick elements

Click an element on the page. **Shift-click** to pick several.
### Say what to change

Write what you want, for example *make these buttons the same height and use
the brand blue*, and click **Attach**.

The agent gets each element's location in the page, its HTML and styles, a
picture of it, and a hint at which source file it probably comes from.

## Where links open

When you click a web link in an agent's reply, Machine Code asks where to
open it:

| Choice | What it does |
|---|---|
| **Machine Code browser** | Opens in a tab next to your chat, with design mode ready. |
| **Your browser** | Chrome, or whatever your default browser is. |

Tick **Always open links this way** to stop being asked.

## Snapshot into a chat

Press **Ctrl+Shift+Alt+S** (**⌘⇧⌥S** on Mac) from anywhere to take a
snapshot of your screen and attach it to the chat you're in. If no chat is
open, Machine Code asks you to open one first.