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
• An AI model connected — Authorization guide

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.

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.

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.

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

Step 2: Open the Cline panel

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.

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.

JetBrains

Go to View → Tool Windows → Cline. The Cline panel opens on the right side of your IDE.

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.

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.

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:

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.

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 to skip confirmations for specific action types.

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.

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

Step 6: View your todo app

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

macOS

Open a terminal in your editor (Ctrl+` or Terminal → New Terminal) and run:

open index.html

Or right-click index.html in the file explorer and select Reveal in Finder, then double-click the file.

Windows

Open a terminal in your editor (Ctrl+` or Terminal → New Terminal) and run:

start index.html

Or right-click index.html in the file explorer and select Reveal in File Explorer, then double-click the file.

Linux

Open a terminal in your editor (Ctrl+` or Terminal → New Terminal) and run:

xdg-open index.html

Or right-click index.html in the file explorer and select Open Containing Folder, then double-click the file.

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:

Add local storage so tasks persist when I refresh the page

Change the design:

Switch to a dark theme with purple accent colors

Add a filter:

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

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.

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

What you learned

You just completed the core Cline workflow:

Plan before coding

Use Plan mode to review Cline’s approach before any files are created or modified.

Approve file changes

Every file creation and edit requires your explicit approval. You see the diff before anything is written.

Approve terminal commands

Cline shows you each command it wants to run. Nothing executes without your permission.

Iterate in the same chat

Follow-up messages build on the existing code. Cline modifies rather than rewrites.

Restore with checkpoints

Roll back to any prior state if a change breaks something or goes in the wrong direction.

Context with @ mentions

Use @file, @folder, and @url in your messages to give Cline direct access to specific content.

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

Plan and Act

Learn when to use Plan mode vs Act mode and how to switch between them mid-task.

Working with files

Use @ mentions to reference files, folders, and URLs directly in your prompts.

Auto-approve

Configure which actions Cline can take without asking for approval each time.

Cline rules

Set persistent instructions that shape how Cline behaves across all tasks in your project.

---

Need help? Join the Cline Discord community or type /reportbug in the Cline chat to report an issue.