Skip to content
Docs
Mac · Code modeYour first code change

Your first code change

Open a sample website on its own branch, improve it with an agent and review the diff.

On this page

Open the sample#

Download the sample siteA one-page website in a small Git repository, made for this tutorial. Free, no account needed.
  1. 1Unzip the download. You get a sample-site folder: a small Git repository with one commit.
  2. 2In ADE, switch to Code mode: click the mode name at the top of the sidebar.
  3. 3Click the folder icon next to Projects in the sidebar and choose Open folder…. Pick sample-site.
  4. 4When ADE asks how to open the repository, choose Isolated workspaces. Each task then gets its own branch.
  5. 5Start a new task in the project and open its chat.

Run it#

First prompt

Open the address in your browser. You should see the Northwind sample page with three sections. To start the server with the Run button next time, save a run command in Project settings.

Make one change and review it#

Second prompt

  1. 1Reload the page and press Tab to move through the links.
  2. 2Open the Changes tab in the right panel and read the CSS the agent changed.
  3. 3Click Review in the right panel header. A new chat reviews the change and adds comments to the diff.
  4. 4Ask the first chat to fix anything the review found.

Keep the change#

You are done when the page still works, focus is easy to see and you understand the CSS change. Ask the agent to stop the server.

To keep it, ask the agent to commit the change on this task’s branch. Commit & Push and Create PR need a GitHub remote. To try a pull request, push the sample to your own GitHub repository first.