Basic Usage Beginner

Learn the core usage patterns of Cline: starting tasks, chatting about code, creating and editing files, running terminal commands, using browser automation, working with images, and leveraging the checkpoint system for safe experimentation.

Starting a Task

Every interaction with Cline begins by opening the Cline panel and typing a task description. Tasks can be anything from a simple question to a complex multi-step request:

// Simple question
You: What does the handleAuth function in src/auth.ts do?

// Code generation
You: Create a new React component for a user profile card

// Complex multi-step task
You: Add pagination to the /api/users endpoint.
     Update the frontend to show page controls.
     Add tests for the new pagination logic.

Chatting About Code

You can use Cline as a conversational coding assistant. Ask questions about your codebase, discuss architecture decisions, or get explanations of complex code:

You: How is authentication implemented in this project?
     Walk me through the flow from login to dashboard.

Cline: Let me read the relevant files to understand the auth flow...
       [Reads src/auth/login.ts, src/middleware/auth.ts, src/routes/dashboard.ts]

       Here's how authentication works in this project:
       1. The login form posts to /api/auth/login...
       2. The server validates credentials and issues a JWT...
       3. The auth middleware checks the token on protected routes...

File Creation and Editing

Cline can create new files and edit existing ones. When editing, it shows you a diff view so you can see exactly what changes will be made:

Creating New Files

You: Create a utility function for formatting dates
     in src/utils/dateFormatter.ts

Cline: I'll create a new file with date formatting utilities.
       [Create file: src/utils/dateFormatter.ts] Approve | Reject

       // Shows the full content of the new file

Editing Existing Files

You: Add error handling to the fetchUsers function

Cline: I'll add try-catch error handling to fetchUsers.
       [Edit file: src/api/users.ts] Approve | Reject

       // Shows a diff with red (removed) and green (added) lines

Running Terminal Commands

Cline can execute terminal commands in your VS Code integrated terminal. This is useful for installing packages, running tests, building projects, and more:

You: Install the zod validation library and add input
     validation to the user registration endpoint

Cline: I'll install zod first, then add validation.
       [Run command: npm install zod] Approve | Reject

       // After approval, Cline runs the command and
       // then proceeds to edit the registration code

Browser Automation

One of Cline's unique features is its built-in browser. Cline can launch a headless browser to:

• Test web applications and verify changes visually
• Scrape data from websites
• Take screenshots of pages
• Fill out forms and interact with web elements
• Read console logs and network requests

You: Start the dev server and check if the login page
     renders correctly at http://localhost:3000/login

Cline: I'll start the server and verify the login page.
       [Run command: npm run dev]     Approve | Reject
       [Use browser: navigate to ...] Approve | Reject
       [Use browser: screenshot]      Approve | Reject

       The login page renders correctly. I can see the
       email/password fields and the submit button.
       Here's a screenshot: [image]

Image Analysis

You can drag and drop images directly into the Cline chat. This is useful for:

• Implementing designs: Drop a mockup and ask Cline to build the UI
• Debugging UI issues: Share a screenshot of a bug
• Analyzing errors: Drop a screenshot of an error message

You: [drops design mockup image]
     Build this card component using React and Tailwind CSS.
     Match the design as closely as possible.

Cline: I see a card with a profile image, name, title, and
       two action buttons. Let me create this component...

Drag and Drop Files

Beyond images, you can drag and drop files from your file explorer into the Cline chat to provide them as context. This is faster than asking Cline to read files manually and ensures it has the exact context you want:

Understanding the Approval Flow

Cline's approval flow is central to its design philosophy of keeping the human in control:

Checkpoints and Undo

Cline automatically creates checkpoints as it works, allowing you to roll back to any previous state. This makes experimentation safe:

• Automatic checkpoints: Created before each file change, so nothing is lost
• Restore any checkpoint: Click on any previous step in the conversation to revert all files to that point
• Compare changes: See what changed between any two checkpoints
• Safe experimentation: Try bold changes knowing you can always go back