Skip to main content
Pointing attaches the exact thing you mean to your next message: an element in your running app, a marked-up picture of the page, or lines from a file. For the Preview’s other controls, see Preview your app. To upload a file of your own, use the composer.

​
Choose how to point

Each way to point stages something in the composer. Nothing reaches the agent until you send. Use Ctrl instead of ⌘ on Windows and Linux. Select, Draw and Edit switch each other off, so only one is active over a page at a time.
Only the session’s owner sees these tools. People you share the session with can look at the Preview and the files, but they have no composer, so there is nothing to attach to.

​
Pick an element in the Preview

Use Select when words like “the second button in the card” would be ambiguous. The agent receives the element itself, not your description of it.
1

Arm the picker

In the Preview toolbar, click Select. Its tooltip changes to “Click an element in the preview — Esc cancels”. Until the app’s page has loaded, the button is greyed out with “Element picker loads with the app’s page”.
The Preview of the Harbor Sailing School app at desktop width with Select on. The tab strip above reads Plan, Preview, Shell, Database, Secrets, README.md and server.js, then the + button, with GitHub, Share, the Publish pill and the files button at the right. In the toolbar, the Desktop icon is highlighted and the port pill reads node · 3000; at the right end, the dashed-pointer Select button is highlighted blue, between the pen for Draw and Open in new tab. In the page, the description under the Beginner Dinghy card's title, Find your balance, catch the breeze, and learn the sailing essentials., is outlined and tinted, and a small dark label just below it gives the tag, p, and the quoted start of its text, Find your balance, catch the breeze, and (tr…. Above the cards are the headline Good days start on the water., a sailboat photo, This week's classes with its count of 3 and the filters All classes, Beginner, Intermediate and All levels. The Intermediate Keelboat and Sunset Sail cards sit beside it, dated Friday, Oct 30 and Saturday, Oct 31.

The outline and label show exactly what a click will pick.

2

Click the element

A ring and a label follow the pointer from element to element. Click the one you mean. It becomes a chip in the composer, and the picker switches off. Esc leaves without picking.
3

Say what to change, and send

Type the change, such as “Make this text larger on mobile”, and send. For more elements, click Select again for each. Picking the same element twice adds nothing.
The composer of the Harbor bookings session with one chip above the typed text Make this text larger on mobile. The chip has a dashed-pointer icon, reads p and the quoted start of the paragraph it holds, Find your balance, catch t…, and has a small X on its right. Below the text sit the + button, the model chip gpt-6.… · high, the plan chip p… · on, a microphone and the white Send button.

The picked paragraph waits as a chip above your text.

The chip describes the element: a unique CSS selector, the page, its size and position, its text, the styles that differ from the defaults, nearby text and its HTML. In a React app it also names the components around the element, and in a development build the source file and line that rendered it. IDs, class names and source paths that look like secrets, such as anything containing secret, password or api_key, are left out or become [redacted] before they leave the page. The element’s text and HTML go as they are.

​
Attach the Preview’s logs

Open Logs in the Preview toolbar and click the paperclip, “Attach the last lines to your next message”. The last 50 lines of the open tab become a chip: Preview console, or the server’s name followed by log. Read the logs covers the panel.

​
Draw on the Preview

Use Draw when the problem is visual, or when you want several fixes at once. Click Draw in the Preview toolbar and a dock appears along the bottom of the page. The page keeps scrolling while you draw, and each mark stays pinned to what it was drawn over. Add to chat captures the whole page, not only the visible part, so you can mark the header and the footer in one go. The picture lands in the composer as an image attachment, and the agent is told your marks point at what you mean.
The Preview of the Harbor Sailing School app in drawing mode, under a tab strip that reads Plan, Preview, Shell, Database, Secrets, README.md and server.js. In the toolbar, the Desktop icon is highlighted, the port pill reads node · 3000, and the pen for Draw is highlighted blue at the right, beside the dashed-pointer Select icon and Open in new tab. A red box surrounds the This week's classes heading with its count, 3, its top edge running through the MAKE ROOM FOR THE SEA label, and a red arrow points at the box from the lower right. Along the bottom of the page, a rounded dark dock shows the tools Draw, Arrow, which is selected, Box and Numbered pin, then the undo and trash buttons, an X, and a white Add to chat button with an image icon at the right end. The headline Good days start on the water., the sailboat photo and the Beginner Dinghy, Intermediate Keelboat and Sunset Sail class cards show around the marks.

A box and an arrow mark the heading, and Add to chat waits at the end of the dock.

Capture gives up after 30 seconds with “The page did not answer the screenshot request in time.” Marks live in the page, so a reload, such as the one at the end of each turn, clears them. Pictures up to 15 MB reach the model as images.

​
Change a style and send it

Use Edit when you know the exact value you want. Click Edit in the Preview toolbar and a panel opens over the right edge of the page. Click an element, and the panel shows Text, Text colour, Background, Font size, Weight, Padding, Margin and Radius for it. The page shows each change as you make it. Text appears only for an element that holds text and no other elements. Apply changes sends the list as a message, which starts a turn, or steers or queues if the agent is busy. Until the agent’s turn ends, your changes are only a layer on the page, so a reload drops them. Esc or the panel’s X discards every change. Edit waits while the Preview shows the saved copy of a sleeping app: “Editing waits for the live page”.

​
Add a selection from a file

Select text in a file and Add to prompt floats under the selection. Click it, or press ⌘⇧L. In the code editor it is also in the right-click menu as Add selection to prompt. Excalidraw has no shortcut, because ⌘⇧L is the editor’s own lock key there. Use the floating button.
The read-only code viewer with server.js open. The header reads server.js on the left, and 2.2 KB, a read-only chip and a Refresh icon on the right. Line numbers 4 to 40 run down the left edge, and a minimap sits at the top right. Lines 7 to 13 are selected, from the empty line 7 through const app = express(); to app.use('/api', (req, res, next) => {, with the caret at the end of line 13. Just below the end of the selection floats a small dark chip with an icon, reading Add to prompt ⌘⇧L.

Add to prompt follows the selection.

​
Pick and draw in documents

Each viewer keeps its pointing tools at the right end of the file’s header: a pencil to draw and, in PDFs, HTML files and decks, a dashed pointer to pick. In Office files and BPMN diagrams, a plain click picks. File viewers covers what each viewer shows.

​
What the agent receives

Chips wait above your text until you send. Click a chip’s X to remove it, or hover it to read the start of what it holds. On send, each chip’s context goes ahead of your text, in the order you added them. A code selection, for example, arrives as Selected context — server.js (lines 7-13): followed by the lines.
The composer of the Harbor bookings session with one chip above the typed text Make this text larger on mobile. The chip has a dashed-pointer icon, reads p and the quoted start of the paragraph it holds, Find your balance, catch t…, and has a small X on its right. Below the text sit the + button, the model chip gpt-6.… · high, the plan chip p… · on, a microphone and the white Send button.

A chip waits above your text until you send.

The transcript shows the same chips above your sent text. If a send fails, the chips come back. Opening another session drops chips you haven’t sent, and editing a queued message turns its chips into plain text.
Pair a pointer with one short sentence of intent. “Make this match the header” with an element chip beats a paragraph describing where the button is.

​
Next steps

Preview your app

Switch ports, test phone and tablet widths, and read the app’s console.

File viewers

Which viewer opens each file type, and what it can’t do.

Slides, drawings and diagrams

Fix a slide by pointing at it, then export to PowerPoint or PDF.

Queue, steer or stop

Send a pick while the agent works, and decide whether it joins the turn.