Docs

Gui shows your web app in a window and puts your coding agent on top of it. Select part of the page, say what to change, and the agent edits your code. This page covers the parts of Gui that you use every day.

What you need

  • A Mac with Apple silicon (M1 or later) and macOS 13 or later.
  • A Gui account. Sign in with Google, GitHub, or a code sent to your email. Gui is free during the alpha.
  • A coding agent, for example Claude Code or Codex. Gui does not include an AI model. It uses the agent on your Mac, with your login and your plan.

Download Gui, open Gui.dmg, and drag Gui to Applications. When you first open it, Gui shows your agents. Install gets Claude Code or Codex for you, and Sign in starts the agent’s login.

Gui also works with Cursor, Amp, OpenCode, Grok Build, Kiro, Devin, Pi, Muse Code and fx, and with other agents that use ACP. Add an agent, or turn off the ones you don’t use, in Settings → Agents.

Gui updates itself. To check now, choose Gui → Check for Updates…

Open a project

On the start screen, click Open project… and choose your project folder. Gui finds the package manager and the dev script. The first time, it shows you the command and asks before it runs it. If the dependencies are missing, Gui installs them in the same step. In a monorepo, Gui asks which app to show. If the project has a .env.example, Gui offers to make .env.local from it.

Then Gui starts the dev server and shows your app. Any app on a local dev server works. For React (Vite and Next.js) and Astro, Gui also finds the source file of each element.

To start from nothing, click New project… and choose Website, Dashboard, or Blank.

Each project opens in its own tab, with its own preview, chat, dev server and agent. Tabs in the background keep running. A tab shows when its agent is working, is waiting for you, or has failed.

To open folders from Terminal, choose Gui → Install 'gui' Command… once. Then gui opens the current folder, and gui path/to/app opens a different one.

Select and ask

Click Select in the toolbar, or press ⌘D. Gui outlines the element under the pointer and shows its component and its size.

  • Click an element to select it.
  • Drag across the page to select an area.
  • Hold Shift to select more than one. Shift-click a selected element to remove it.
  • Press Esc when you are done.

Then write the change in the chat. Each selection goes with your message: a screenshot, its HTML and styles, and the file and line it came from. You can also paste or drag a reference image into the chat. The agent sees it.

To change a few words, double-click the text on the page and type.

The chat

The agent’s name at the top of the chat switches agents or starts a new chat. The model button chooses the agent’s model and effort.

While the agent works, the chat shows each step. When it is done, the steps fold into one line, and the chat shows what changed: the selected element before and after, and the files. Click Undo to put the files back, or Follow up to ask for more. On an earlier message, Undo to here undoes that change and each change after it. Gui asks first.

Gui keeps a copy of your project files before and after each change, and Undo uses these copies. Gui does not change your git history. It also does not commit, push or make branches. Ask your agent for that, or use the terminal.

Messages that you send while the agent works wait in a queue above the message box, and run in order. You can edit a queued message, drag it to a new place, remove it, or click Send now. Stop stops the agent and pauses the queue.

Auto and Ask set what the agent can do without you. Auto is on by default. In Auto, Gui lets the agent edit project files and run commands. It still asks you about files outside the project, sensitive files such as config files, lockfiles, package.json and git hooks, and anything the agent flags. Commands do not run in a sandbox. In Ask, Gui asks you about everything except edits to ordinary project files. Each project keeps its own setting. When the agent waits for you, press ⌘↩ to allow or ⌘⌫ to not allow.

The chat floats on the page. Drag it by its header to a different corner, and drag an edge to resize it. ⇧⌘D shows it as a sidebar, and ⌘B hides it. Errors from the console and the build show above the message box, with a button that gives the error to your agent.

Screen sizes

The size menu in the toolbar shows your app at four sizes:

  • Desktop (⌘1) fills the window.
  • Laptop (⌘2) is 1440 × 900.
  • Tablet (⌘3) is 820 × 1180.
  • Mobile (⌘4) is 390 × 844.

In a small window, Gui draws the device frame smaller and shows how much. The page still lays out at the full size, and the agent knows which size you look at. ⌘+ and ⌘− zoom, and ⌘0 goes back. Focus mode (⌘\) hides everything except the page, until you press Esc.

Screenshots and recordings

The camera button in the toolbar copies or saves a screenshot of the page, or attaches it to the chat. It takes the visible area or the full page.

Record makes a video of the page only, up to 60 seconds long. When you stop, the clip goes with your next message. The agent can examine each frame of an animation. Agents that cannot read images cannot see the clip.

To talk while you record, turn on the microphone next to Record, then point at the problem as you speak. Your Mac makes the transcript, so your voice does not go to a server. The agent gets your words and where the pointer was when you said them. Narrated recordings can be up to 3 minutes long and need macOS 26 or later. Gui uses the microphone only while you record with narration on.

Terminal and logs

The dot at the start of the address bar shows the dev server’s status. Click it to restart or stop the server, show its logs, or open your app in your browser. If the server stops with an error, a bar under the page shows its logs and a button to restart it.

⌘J opens the drawer under the page, with the dev server’s logs and your terminals. A terminal is your own shell, in the project folder. Click + to add one, and press ⌘K to clear it. Terminals keep running when you go to a different tab.

Canvases

A canvas is a board for designs, with no project folder and no dev server. Click New canvas on the start screen. Ask the agent for a page, or for a few versions of one. Each version is a frame on the board, in one HTML file. You can move, resize, name and compare frames, like artboards in Figma.

  • Scroll to pan. Pinch or ⌘-scroll to zoom. Press H for the hand tool and V to move frames.
  • Drag across the board, or Shift-click, to select frames. Your next message is about them.
  • ⌥⌘G puts the selected frames in a section, ⌥⌘D duplicates them, and ⇧⌘E exports them as PNGs.
  • Double-click a frame to open it live. You can select elements and change the size as in a project. Click Canvas or press Esc to go back.

The agent can take screenshots of a website to use as a reference, for example “make it feel like linear.app”. When a design is ready, right-click its frame and choose Turn into Project… to make a Vite project from it. The project opens in a new tab.

GitHub

Clone… on the start screen copies a repository to your Mac. Type its name or address, or connect GitHub to choose from your repositories, private ones too. In Settings → GitHub, you can connect or disconnect GitHub and choose the repositories that Gui can get. Gui uses the connection only to clone.

Keyboard shortcuts

Help → Keyboard Shortcuts (⌘/) shows all of them, and each button shows its shortcut in its tooltip. These are the ones you use most:

Open a project folder⌘O
New canvas⌥⌘N
New tab⌘T
Close the tab⌘W
Select an element or area⌘D
Screenshot⇧⌘S
Record the page⌥⌘R
Desktop, Laptop, Tablet, Mobile⌘1 – ⌘4
Zoom in, zoom out, fit⌘+ ⌘− ⌘0
Focus mode⌘\
Show or hide the chat⌘B
Go to the message box⌘L
Chat as a sidebar, or floating⇧⌘D
New chat⇧⌘K
Stop the agent⌘.
Auto or Ask⇧⌘A
Allow, or don’t allow⌘↩ ⌘⌫
Undo the agent’s last change⌘Z
Terminal and logs⌘J
Settings⌘,
All shortcuts⌘/

Your data

Your projects stay on your Mac. Gui keeps your chats, the copies for Undo, recordings and canvases in ~/Library/Application Support/Gui. Gui does not send your code, files, chats or screenshots to us. Your agent sends your prompts and code to the company that makes it, under that company’s terms.

When Gui has an error, it sends us a crash report without your code or files. To stop them, turn off Send crash reports in Settings → Account. The Privacy page has the details.

Help

Gui is in alpha, so some things will break. Tell us when they do.