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

# Your first project

> Build a working todo app with Cline. Learn how to give tasks, approve file changes, approve terminal commands, and iterate on your work.

This tutorial walks you through building a todo app with Cline from scratch. By the end, you will know how to give Cline a task, review and approve file changes, handle terminal commands, and use Plan mode to think through complex work before writing any code.

**Time to complete:** 5–10 minutes

## Prerequisites

* Cline installed in your editor — [Install guide](/getting-started/installing-cline)
* An AI model connected — [Authorization guide](/getting-started/authorizing-with-cline)

## Step 1: Open a project folder

Cline needs an open workspace folder to create and edit files. Open an empty folder so Cline has a clean place to build.

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

    The folder name appears at the top of the Explorer panel on the left. The panel will be empty since the folder is new.
  </Tab>

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

    The folder appears in the Project panel on the left.
  </Tab>
</Tabs>

<Warning>
  If you skip this step and no folder is open, Cline has nowhere to create files. Always open a folder before starting a task.
</Warning>

## Step 2: Open the Cline panel

<Tabs>
  <Tab title="VS Code / Cursor / Windsurf">
    Click the **Cline icon** in the Activity Bar (the vertical strip of icons on the left). A panel opens showing the Cline chat interface.

    <Tip>
      If you can't find the icon, open the Command Palette (`Cmd+Shift+P` on macOS or `Ctrl+Shift+P` on Windows/Linux), type **Cline: Open In New Tab**, and press Enter.
    </Tip>
  </Tab>

  <Tab title="JetBrains">
    Go to **View → Tool Windows → Cline**. The Cline panel opens on the right side of your IDE.
  </Tab>
</Tabs>

You will see:

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

## Step 3: Start with Plan mode

Before Cline writes any code, use **Plan mode** to review the approach. In Plan mode, Cline analyzes your request and describes what it intends to build — no files are created or modified.

<Tip>
  Plan mode is especially useful for tasks where you want to clarify requirements or catch design issues before code is written. For simple, well-defined tasks you can skip straight to Act mode.
</Tip>

1. Look at the **Plan/Act toggle** at the bottom of the Cline panel. Click it to switch to **Plan** if it is not already selected.
2. Click the text input box and type the following:

```text theme={null}
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** to send the message.

Cline will describe its plan: what structure it intends to create, how it will handle state, and what the HTML/CSS/JS layout will look like. Read through the plan and ask follow-up questions if anything is unclear.

When you are happy with the plan, click the toggle to switch from **Plan** to **Act**.

## Step 4: Approve file changes

Once in Act mode, Cline proposes actual file changes. Before creating or editing any file, Cline shows you exactly what it wants to do and waits for your approval.

Here is what you will see in the chat:

1. **Cline proposes a file.** A section appears in the chat showing the file path (for example, `index.html`) and the code Cline wants to write. New lines are highlighted in green.
2. **Approve or Reject buttons appear** below the proposal.
   * **Approve** — Cline writes the file to your project folder.
   * **Reject** — Cline stops and waits for different instructions.
3. **Click Approve** to let Cline create `index.html`.

After approval, `index.html` appears in your editor's file explorer.

<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 are comfortable with Cline, you can enable [auto-approve](/features/auto-approve) to skip confirmations for specific action types.
</Note>

## Step 5: Approve terminal commands

For some tasks, Cline may ask to run a terminal command — for example, to open the file in a browser, install a dependency, or start a dev server.

When Cline proposes a command, you will see:

* The exact command Cline wants to run (for example, `open index.html`)
* **Approve** and **Reject** buttons

Review the command before approving. If a command starts a long-running process (like a dev server), a **Proceed While Running** button appears so Cline can continue working while the process runs in the background.

<Warning>
  Always read the proposed command before approving. If you are unsure what a command does, ask Cline to explain it before proceeding.
</Warning>

## Step 6: View your todo app

After Cline creates `index.html`, open it in a browser to see the result.

<Tabs>
  <Tab title="macOS">
    Open a terminal in your editor (`` Ctrl+` `` or **Terminal → New Terminal**) and run:

    ```bash theme={null}
    open index.html
    ```

    Or right-click `index.html` in the file explorer and select **Reveal in Finder**, then double-click the file.
  </Tab>

  <Tab title="Windows">
    Open a terminal in your editor (`` Ctrl+` `` or **Terminal → New Terminal**) and run:

    ```bash theme={null}
    start index.html
    ```

    Or right-click `index.html` in the file explorer and select **Reveal in File Explorer**, then double-click the file.
  </Tab>

  <Tab title="Linux">
    Open a terminal in your editor (`` Ctrl+` `` or **Terminal → New Terminal**) and run:

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

    Or right-click `index.html` in the file explorer and select **Open Containing Folder**, then double-click the file.
  </Tab>
</Tabs>

Try out the app: add a few tasks, mark them complete, and delete them. The app runs entirely in your browser with no server or backend required.

## Step 7: Iterate with follow-up messages

Cline 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**, type a follow-up request. Here are some examples to try:

**Add persistence:**

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

**Change the design:**

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

**Add a filter:**

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

For each follow-up, Cline will:

1. Read your current `index.html` to understand the existing code.
2. Propose specific changes shown as a diff — green for added lines, 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 update.

## Step 8: Undo mistakes with checkpoints

Cline automatically saves a **checkpoint** after each change it makes. If something breaks or you do not like a change, you can restore a previous state.

**To find checkpoints:** Scroll through the conversation in the Cline panel. Next to each step where Cline made a change, you will see two buttons:

* **Compare** — shows a before/after diff of exactly what changed at that step
* **Restore** — rolls back your project to the state at that step

**Restore options:**

| Option                     | What it does                                         | When to use it                                  |
| -------------------------- | ---------------------------------------------------- | ----------------------------------------------- |
| Restore Task and Workspace | Resets files and conversation history to that point  | Start over completely from a prior step         |
| Restore Task Only          | Keeps current files but reverts conversation context | Rarely needed                                   |
| Restore Workspace Only     | Resets files but keeps full conversation history     | Try a different approach while keeping the chat |

<Tip>
  **Restore Workspace Only** is the most common choice. It undoes file changes so you can try a different approach, without losing your conversation with Cline.
</Tip>

<Note>
  Checkpoints are separate from Git. Restoring a checkpoint does not affect your commits, branches, or any version control history.
</Note>

## What you learned

You just completed the core Cline workflow:

<CardGroup cols={2}>
  <Card title="Plan before coding" icon="map">
    Use Plan mode to review Cline's approach before any files are created or modified.
  </Card>

  <Card title="Approve file changes" icon="file-check">
    Every file creation and edit requires your explicit approval. You see the diff before anything is written.
  </Card>

  <Card title="Approve terminal commands" icon="terminal">
    Cline shows you each command it wants to run. Nothing executes without your permission.
  </Card>

  <Card title="Iterate in the same chat" icon="arrows-rotate">
    Follow-up messages build on the existing code. Cline modifies rather than rewrites.
  </Card>

  <Card title="Restore with checkpoints" icon="clock-rotate-left">
    Roll back to any prior state if a change breaks something or goes in the wrong direction.
  </Card>

  <Card title="Context with @ mentions" icon="at">
    Use `@file`, `@folder`, and `@url` in your messages to give Cline direct access to specific content.
  </Card>
</CardGroup>

These same patterns apply to any project, from simple scripts to full applications. The more context you give Cline, the better the results.

## Next steps

<CardGroup cols={2}>
  <Card title="Plan and Act" icon="toggle-on" href="/core-workflows/plan-and-act">
    Learn when to use Plan mode vs Act mode and how to switch between them mid-task.
  </Card>

  <Card title="Working with files" icon="folder-open" href="/core-workflows/working-with-files">
    Use `@` mentions to reference files, folders, and URLs directly in your prompts.
  </Card>

  <Card title="Auto-approve" icon="circle-check" href="/features/auto-approve">
    Configure which actions Cline can take without asking for approval each time.
  </Card>

  <Card title="Cline rules" icon="book" href="/customization/cline-rules">
    Set persistent instructions that shape how Cline behaves across all tasks in your project.
  </Card>
</CardGroup>

***

**Need help?** Join the [Cline Discord community](https://discord.gg/cline) or type `/reportbug` in the Cline chat to report an issue.