Module 2

Your First App (Basic)

Build a simple to-do list app using plain English prompts.

⏱️ Estimated time: 30 minutes

Time to build your first app! In this module, you will create a simple To-Do List app by describing what you want in plain English. You will see how Antigravity turns your words into a working app.

What We Will Build

A personal to-do list app that lets you:

  • Add new tasks
  • Mark tasks as done
  • Delete tasks you no longer need
  • See how many tasks are left

Step 1: Create a New Project

  1. 1Open Google Antigravity.
  2. 2In the left sidebar, click the folder icon with a "+" (plus) sign, then choose "New Project".
  3. 3Click "Add Folder" and pick (or create) an empty folder on your computer for this app — your Documents folder is a good place. For example, make a folder called "My To-Do App".
  4. 4Click "Create". This folder is now your project, where all the app files will be saved.

Local Mode is fine to start 💡

When you send your first instruction, Antigravity may ask you to choose a mode. Pick Local Mode — it simply means the AI works directly inside the folder you just chose. This is the easiest option for everything in this course.

Step 2: Write Your First Prompt

Now comes the fun part. In the Agent Manager panel (on the right), type your first prompt. A prompt is simply a description of what you want the AI to build.

Type this in the Agent Manager:

“Build me a simple to-do list web app. It should have a text box where I can type a task and a button to add it. Each task should have a checkbox to mark it as done and a delete button. Show the number of remaining tasks at the top.”

Then press Enter or click the Send button.

How to write good prompts 💡

Be specific and clear. Describe what the app should do, not how to build it. The more details you give, the better the result. Think about:

  • What does it look like? (colors, layout)
  • What can you do with it? (actions, buttons)
  • What information does it show? (text, numbers)

Step 3: Review What Antigravity Creates

After you send your prompt, Antigravity will start working. You will see:

  1. 1An Implementation Plan — the AI shows you what it plans to do (which files to create, what structure to use).
  2. 2A Task List — a checklist of each step the AI will take.
  3. 3Code being written — you will see files appearing in the sidebar and code being typed in the editor.
  4. 4A Walkthrough — when done, the AI summarizes what it built and how to use it.

This usually takes 30 seconds to 2 minutes. Just wait and watch!

Step 4: Run and Preview Your App

Once Antigravity finishes building, you need to see it in action:

  1. 1The AI may automatically open a preview in a browser window.
  2. 2If not, look in the terminal at the bottom — you will see a web address like http://localhost:3000.
  3. 3Click the link or copy it and paste it into your browser.
  4. 4You should see your to-do list app running!

Try adding a few tasks — for example “Call Corraina about the weekend trip” and “Send holiday photos to MarshyLockhart” — then mark them as done and delete them. Does it work? Great!

Step 5: What If Something Goes Wrong?

Errors are completely normal when building apps — even professional developers deal with them every day. The good news is that Antigravity can fix most errors for you. Here is what to do:

If the app does not look right:

Tell the AI what is wrong. For example:

“The delete button is too small. Make it bigger and red.”

If you see an error message on screen:

Copy the error message and paste it to the AI:

“I see this error when I open the app: [paste the error here]. Please fix it.”

If the app does not start at all:

Ask the AI to check the terminal:

“The app is not starting. Can you check what is wrong and fix it?”

If a feature is missing:

Simply ask for it:

“The task counter is not showing. Please add a counter at the top that shows how many tasks are left.”

The golden rule for fixing errors 💡

Do not panic! Just describe the problem to Antigravity and it will try to fix it. You do not need to understand the error yourself. The AI reads error messages, understands them, and applies the fix automatically.

If the first fix does not work, try describing the problem differently or with more detail. You can also say: “That did not fix it. Here is what I still see: [describe the issue].”

Important ⚠️

Sometimes Antigravity might go in circles trying to fix the same error. If this happens after 3-4 attempts, try saying: “Let us start this part over. Please rebuild the [component name] from scratch.”

Step 6: Make Changes by Re-Prompting

Want to change something? Just tell the AI! This is called “re-prompting.” Try these example follow-up prompts:

“Change the background color to light blue.”
“Add categories to each task (like "Work", "Personal", "Shopping").”
“Add a button to clear all completed tasks at once.”
“Make the app look more modern with rounded corners and shadows.”

Step 7: Save Your Work

Your project is automatically saved in the folder you chose when you created it. You can find all your project files there anytime.

Saving tip 💡

Antigravity saves your work as you go. But it is a good idea to make a copy of your project folder from time to time — just copy the entire folder to another location on your computer as a backup.

Step 8: Share Your App

Right now, your app runs on your own computer. In Module 4, we will learn how to publish your app so other people can use it. For now, you can show it to someone by letting them use your computer, or by taking screenshots.

Previous

Installation & Setup

Next

Intermediate App