docs/getting-started/your-first-project.mdx
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
Before starting, make sure you have:
If you haven't done these yet, complete them first and come back here.
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.
Your editor should now show the folder name in the Project panel on the left. It will be empty since the folder is new.
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>
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
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.
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
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.
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".
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:
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.
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>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:
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.
Approve or Reject buttons appear. Directly below the proposed change, you'll see two buttons:
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).
Cline has created the index.html file in your project folder. Now let's open it in a web browser to see the app.
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
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.
Open a terminal in your editor (`` Ctrl+` `` or **Terminal → New Terminal** from the menu) and type:
```bash
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.
Open a terminal in your editor (`` Ctrl+` `` or **Terminal → New Terminal** from the menu) and type:
```bash
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.
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.
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:
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 feature:
Add a filter to show all, active, or completed tasks
When you send a follow-up message, Cline will:
index.html file to understand the existing codeClick Approve to apply the changes, then refresh your browser to see the updated app.
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.
Scroll through your conversation in the Cline panel. Next to each step where Cline made a change, you'll see two small buttons:
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.
You just completed the core Cline workflow:
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.
@ mentions to reference files, folders, and URLs in your prompts/new in the chat input to begin a new task/reportbug to help us improve