Let Your Agent See Your App

Your agent can work much better if it can see the app that it's building: it can take screenshots, click on the controls, read errors from the browser console, and check its own work each time it saves. To set this up, keep gleam dev running in its own terminal, so that the app stays at http://localhost:8000 while the agent works. Then follow the steps for your agent:

Cursor: There is nothing to install. Cursor has a built-in browser that its agent can use. Ask for it with @browser in the agent's chat, such as:

@browser open http://localhost:8000 and check that the speed slider changes the speed of the animation

Cursor asks for your approval before each browser action.

VS Code with Copilot: There is nothing to install, but you need to give the agent access to a page.

1. Open your settings, search for workbench.browser.enableChatTools, and turn it on.
2. Run Browser: Open Integrated Browser from the command palette and go to http://localhost:8000.
3. Select Share with Agent in the browser's toolbar and approve the confirmation. The agent can only see a page that you've shared with it.

Claude Code in VS Code: Install the Claude in Chrome extension in Chrome and sign in with the same account you use for Claude Code. Then ask for the browser with @browser in Claude Code's chat, such as:

@browser open http://localhost:8000 and check that the speed slider changes the speed of the animation

Claude works in new tabs of your own browser, where it can reach any site you're signed in to, so only approve the sites you expect. If it opens the new-drawing prompt, it will have to wait for you to close that prompt yourself.

Only use localhost. Your agent may not have access to the example app, so never ask it to open animator.cs61a.org. These tools don't enforce this for you, so it's your responsibility.

Your agent's browser may keep its own saved drawings, so the drawings it creates may not appear in your browser.