Before you start, choose what powers the agent in Settings → AI for the agent. See Engines and sign-in.
Create a project
- On the Projects page, type a Name.
- Pick a Template. See Templates.
- Choose Create.
Graspable copies the template into a new folder and installs its packages. The project header shows "installing deps" while this runs. You can look at the files in the meantime. The prompt box and the preview unlock when the install ends.
Send the first request
The project page has three parts: the file list on the left, the editor in the middle, and the run panel on the right.
Type what you want in the box that says "What should we build?" and press Enter. Shift+Enter adds a new line.
Say what should happen, not how to code it. For example:
Replace the cube with a small solar system. The planets orbit the sun, and tapping a planet shows its name above it.
While the agent works, the box says "Steer the agent…". Anything you send then reaches the agent during the same run. The square button cancels the run.
Read the run
The run panel shows the run as it happens.
| You see | It means |
|---|---|
| Text | The agent talking to you |
▸ name … |
The agent used a tool, such as reading a file or running a command |
✎ App.jsx |
The agent wrote that file. The editor shows the new content right away |
🧠 recalled: … |
Items from memory were given to the agent for this request |
| An amber card with Allow and Deny | The agent wants to do something that needs your approval. See Approvals and safety |
✓ build check or ✗ build check |
A check passed or failed |
— success — |
The run completed |
The checks
When the agent finishes editing, Graspable checks the result:
- build — the project is built.
- smoke — the built app is loaded in a browser on your computer, without a window. Errors, failed requests and a blank page fail the check. A screenshot of what the browser saw appears under the check.
- xr — your XR recordings are replayed. This check only appears when the project has recordings. See XR tests.
If a check fails, the agent gets the error and tries to fix it. It gets at most three repair turns. If the check still fails, the run ends as failed and tells you which check.
If no browser is found, the smoke and xr checks are skipped and the check line gives the reason.
Open the preview
Use the buttons at the top right of the project page:
- Code — the editor only.
- Split — the editor above the preview.
- Preview — the preview only. The first click starts the project's dev server.
- Compare — runs the same request with several engines side by side. You can then Adopt one result or Discard it.
The preview reloads as files change. See Preview and headset.
Edit by hand
Click a file to open it. Type, then save with Save ⌘S (Ctrl+S on Windows and Linux).
If you select code in the editor, a chip above the prompt box shows the file and lines. The selection goes with your next request, so you can write "make this slower" without naming the file. Click the × on the chip to leave it out.
Go back in time and undo
When a run has more than one event, a slider appears at the top of the run panel. Drag it back to see the transcript and the files as they were at that point. The editor is read-only while you do this. Live returns to the present.
When a run that changed files has ended, you can undo it:
- Undo run puts every file the run changed back to how it was before the run.
- With the slider dragged back, the button reads Undo after here and puts the files back to how they were at that point.
If you changed a file after the run, Graspable leaves it alone and tells you how many files "changed since". Choose overwrite them too to undo those as well. Undo never deletes a file that existed before the run started.