> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cline.bot/llms.txt
> Use this file to discover all available pages before exploring further.

# Build Your First Project

> Build a working todo app with Cline and learn the core workflow.

This tutorial walks you through building a todo app with Cline from scratch. Along the way, you'll learn how to give tasks, approve changes, iterate on your work, and recover from mistakes.

**Time estimate:** 5-10 minutes

## Prerequisites

Before starting, make sure you have:

* Cline installed in your editor ([Install Guide](/getting-started/installing-cline))
* An AI model connected ([Model Setup](/getting-started/authorizing-with-cline))

If you haven't done these yet, complete them first and come back here.

## Step 1: Open a Project Folder

Cline needs a workspace, which is a folder on your computer where it can create and edit files. You'll open an empty folder so Cline has a clean place to build your todo app.

<Tabs>
  <Tab title="VS Code / Cursor / Windsurf">
    1. Go to **File → Open Folder** in the top menu bar
    2. Create a new folder on your computer (for example, name it `todo-app` on your Desktop)
    3. Select that folder and click **Open**

    Your editor should now show the folder name in the top of the sidebar on the left. The file explorer (left panel) will be empty since the folder is new.
  </Tab>

  <Tab title="JetBrains">
    1. Go to **File → Open** in the top menu bar
    2. Create a new folder on your computer (for example, name it `todo-app` on your Desktop)
    3. Select that folder and click **OK**

    Your editor should now show the folder name in the Project panel on the left. It will be empty since the folder is new.
  </Tab>
</Tabs>

<Warning>
  If you skip this step and don't have a folder open, Cline won't know where to create files. Always open a folder before starting a task.
</Warning>

## Step 2: Open the Cline Panel

The Cline panel is a chat interface where you communicate with Cline. You need to open it before you can give Cline any instructions.

<Tabs>
  <Tab title="VS Code / Cursor / Windsurf">
    Look at the **Activity Bar**, the vertical strip of icons on the far left (or far right) of your editor. Find the **Cline icon** (it looks like a small robot) and click it.

    A panel will open showing the Cline chat interface. You'll see:

    * A **text input box** at the bottom where you type messages
    * A **chat area** above it where Cline's responses will appear
    * A **settings gear icon** in the top-right corner of the panel

    <Tip>
      **Can't find the Cline icon?** Open the Command Palette with `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux), type **"Cline: Open In New Tab"**, and press Enter. This opens Cline in a full editor tab, which also gives it more screen space.
    </Tip>
  </Tab>

  <Tab title="JetBrains">
    Go to **View → Tool Windows → Cline** in the top menu bar. The Cline panel will open on the right side of your editor.

    You'll see:

    * A **text input box** at the bottom where you type messages
    * A **chat area** above it where Cline's responses will appear
    * A **settings gear icon** in the top-right corner of the panel
  </Tab>
</Tabs>

## Step 3: Give Cline a Task

Now you'll tell Cline what to build. You communicate with Cline by typing messages in the text input box, just like a chat app.

1. **Click on the text input box** at the bottom of the Cline panel
2. **Paste (or type) the following prompt** into the text input box:

```text theme={"system"}
Build a todo app in a single HTML file. Include:
- Input field to add new tasks
- List that displays all tasks
- Checkbox to mark tasks complete (with strikethrough styling)
- Button to delete individual tasks
- Clean, modern design with CSS
- All JavaScript inline in the same file
```

3. **Press Enter** on your keyboard (or click the **Send** button) to send the message

Cline will now read your message and start working on a response. You'll see text appearing in the chat area as Cline thinks through your request.

## Step 4: Understand Plan Mode vs Act Mode

When Cline receives your task, it may start in one of two modes. Look at the **bottom of the Cline panel**. You'll see a toggle button that says either **"Plan"** or **"Act"**.

### If Cline is in Plan Mode

In Plan mode, Cline **only talks**. It analyzes your request and discusses the approach, but it does **not** create or modify any files. You'll see Cline describe what it plans to build, but nothing will change in your project folder yet.

This is useful for complex tasks where you want to discuss the approach first. You can:

* Ask Cline questions about its plan
* Suggest changes to the approach
* Clarify your requirements

**When you're ready for Cline to start writing code**, click the toggle button at the bottom of the panel to switch from **"Plan"** to **"Act"**. Cline will then begin proposing actual file changes.

### If Cline is in Act Mode

In Act mode, Cline will start creating files and writing code right away (but it still asks for your approval before making any changes, see the next step).

<Note>
  For this tutorial, you want to be in **Act mode** so Cline creates the todo app. If you see "Plan" at the bottom, click it to switch to "Act". Learn more about when to use each mode in the [Plan and Act guide](/core-workflows/plan-and-act).
</Note>

## Step 5: Approve the Changes

Cline **never** modifies your files without your permission. Before creating or editing any file, Cline will show you exactly what it wants to do and wait for you to approve.

Here's what you'll see in the chat:

1. **Cline proposes a file change.** You'll see a section in the chat showing the file path (e.g., `index.html`) and the code Cline wants to write. New lines of code are highlighted in **green**.

2. **Approve or Reject buttons appear.** Directly below the proposed change, you'll see two buttons:
   * **Approve** (checkmark): Click this to let Cline create or edit the file. The file will be written to your project folder.
   * **Reject** (X): Click this to stop Cline and provide different instructions instead.

3. **Click Approve** to let Cline create the `index.html` file.

After you approve, Cline writes the file to your project folder. You should see `index.html` appear in your editor's file explorer (the left panel).

<Note>
  Every file creation, file edit, and terminal command requires your explicit approval. You are always in control of what changes in your project. Once you're comfortable with Cline, you can enable [auto-approve](/features/auto-approve) to skip confirmations for specific actions.
</Note>

## Step 6: View Your Todo App

Cline has created the `index.html` file in your project folder. Now let's open it in a web browser to see the app.

<Tabs>
  <Tab title="macOS">
    **Option A: Use the terminal**

    If Cline ran a terminal command to open the file, it may have already opened. Otherwise, you can open a terminal in your editor (`` Ctrl+` `` or **Terminal → New Terminal** from the menu) and type:

    ```bash theme={"system"}
    open index.html
    ```

    **Option B: Use Finder**

    Right-click `index.html` in your editor's file explorer (left panel) and select **"Reveal in Finder"**. Then double-click the file in Finder to open it in your default browser.
  </Tab>

  <Tab title="Windows">
    **Option A: Use the terminal**

    Open a terminal in your editor (`` Ctrl+` `` or **Terminal → New Terminal** from the menu) and type:

    ```bash theme={"system"}
    start index.html
    ```

    **Option B: Use File Explorer**

    Right-click `index.html` in your editor's file explorer (left panel) and select **"Reveal in File Explorer"**. Then double-click the file to open it in your default browser.
  </Tab>

  <Tab title="Linux">
    **Option A: Use the terminal**

    Open a terminal in your editor (`` Ctrl+` `` or **Terminal → New Terminal** from the menu) and type:

    ```bash theme={"system"}
    xdg-open index.html
    ```

    **Option B: Use your file manager**

    Right-click `index.html` in your editor's file explorer (left panel) and select **"Open Containing Folder"**. Then double-click the file to open it in your default browser.
  </Tab>
</Tabs>

**Option C: Live Server (any OS)**

If you have the Live Server extension installed in VS Code, right-click `index.html` in the file explorer and select **"Open with Live Server"**. This opens the app in your browser and automatically refreshes when files change.

Try out your new todo app: add a few tasks, check them off, and delete them. The app runs entirely in your browser with no server or backend needed.

## Step 7: Iterate on Your Project

One of Cline's most powerful features is that it remembers your entire conversation. You can ask for changes and Cline will modify the existing code rather than starting over.

**In the same Cline chat** (don't start a new conversation), click the text input box at the bottom and type a follow-up request. Here are some ideas to try:

**Add persistence:**

```text theme={"system"}
Add local storage so tasks persist when I refresh the page
```

**Change the design:**

```text theme={"system"}
Switch to a dark theme with purple accent colors
```

**Add a feature:**

```text theme={"system"}
Add a filter to show all, active, or completed tasks
```

When you send a follow-up message, Cline will:

1. Read your current `index.html` file to understand the existing code
2. Propose specific changes (shown as a diff with green for added lines and red for removed lines)
3. Wait for your approval before modifying the file

Click **Approve** to apply the changes, then refresh your browser to see the updated app.

## Step 8: Undo Mistakes with Checkpoints

Cline automatically saves a **checkpoint** after each change it makes. If something breaks or you don't like a modification, you can go back to any previous state.

### How to find checkpoints

Scroll through your conversation in the Cline panel. Next to each step where Cline made a change, you'll see two small buttons:

* **Compare**: Click this to see exactly what files changed at that step (a before/after diff)
* **Restore**: Click this to roll back your project to how it was at that point

### How to restore

When you click **Restore**, you'll see three options:

| Option                         | What it does                                                  | When to use it                                                         |
| ------------------------------ | ------------------------------------------------------------- | ---------------------------------------------------------------------- |
| **Restore Task and Workspace** | Resets both your files and conversation to that point         | You want to completely go back and start over from that step           |
| **Restore Task Only**          | Keeps your current files but reverts the conversation context | Rarely needed                                                          |
| **Restore Workspace Only**     | Resets files to that point but keeps the full conversation    | You want to try a different approach but keep the conversation history |

**Recommended for beginners:** Use **"Restore Workspace Only"** when you want to undo a change but keep chatting with Cline about what to do differently.

<Tip>
  Checkpoints are separate from Git. They won't affect your commits, branches, or any version control you have set up.
</Tip>

Learn more in the [Checkpoints guide](/core-workflows/checkpoints).

## What You Learned

You just completed the core Cline workflow:

1. **Opened a project folder** so Cline has a workspace
2. **Opened the Cline panel** and typed a task in the chat input
3. **Understood Plan vs Act mode** and how to switch between them
4. **Approved file changes** before Cline wrote anything to disk
5. **Iterated** by sending follow-up messages in the same conversation
6. **Used checkpoints** to undo mistakes and try different approaches

These same patterns work for any project, from simple scripts to full applications. The more context you give Cline about what you want, the better the results.

## Next Steps

* [Core Workflows](/core-workflows/task-management): Learn the patterns you'll use daily with Cline
* [Working with Files](/core-workflows/working-with-files): Use `@` mentions to reference files, folders, and URLs in your prompts
* [Model Selection Guide](/core-features/model-selection-guide): Choose the best AI model for your needs
* [Cline Rules](/customization/cline-rules): Customize how Cline behaves in your projects

## Need Help?

* **Start a fresh conversation**: Type `/new` in the chat input to begin a new task
* **Report issues**: Use `/reportbug` to help us improve
* **Get support**: Join our [Discord community](https://discord.gg/cline)