How to Use Cline: Autonomous AI Coding Agent for VS Code

If you've used AI coding assistants like GitHub Copilot or ChatGPT, you know the pattern: copy context out of your editor, paste it into a chat window, copy the response back, and manually apply changes across your files. Cline breaks this loop entirely. It's an open-source, autonomous AI coding agent that runs directly inside VS Code as an extension, with full access to your project files, terminal, and browser. Rather than suggesting code snippets you paste in, Cline reads your codebase, creates and edits files, runs terminal commands, and even automates browser interactions — all while asking for your approval at each step. Originally released as "Claude Dev," Cline has grown into one of the most capable AI coding agents available, with support for any LLM provider and a transparent, human-in-the-loop workflow that keeps you in control.

Why Cline Matters for Web Developers

The AI coding tool landscape is crowded. Cursor, Windsurf, GitHub Copilot, Aider — each takes a different approach to integrating AI into development. What makes Cline distinct is a combination of factors that matter specifically for professional developers shipping real code:

It lives inside VS Code. You don't switch to a different editor or a separate application. Cline operates as a sidebar panel in your existing VS Code workspace. Your keybindings, extensions, themes, and Git configuration stay exactly as they are. This is particularly significant if your team has standardised on VS Code — there's no editor migration to justify.

It's fully open source. Cline's entire codebase is available on GitHub under the Apache 2.0 licence. You can inspect exactly what it does with your code, how it communicates with LLM providers, and what data leaves your machine. For teams with security requirements or compliance constraints, this transparency is non-negotiable.

Plan mode and Act mode give you structured control. Unlike tools that immediately start generating code, Cline separates thinking from doing. In Plan mode, the agent analyses your request, explores your codebase, and proposes an approach without modifying anything. In Act mode, it executes — creating files, editing code, running commands — with your approval at each step. This two-phase workflow prevents the "AI rewrote half my project" problem.

It works with any LLM. Cline isn't locked to a single provider. You can connect it to Anthropic's Claude, OpenAI's GPT models, Google's Gemini, AWS Bedrock, Azure OpenAI, or any OpenAI-compatible API — including local models running through Ollama or LM Studio. You choose the model that fits your budget, privacy requirements, and performance needs.

It's an agent, not an autocompleter. Cline doesn't just fill in the next line. It can scaffold an entire feature across multiple files, run your test suite to verify its work, debug failures by reading error output, and iterate until the implementation is correct. This agentic loop — plan, implement, verify, fix — is what separates it from traditional code completion tools.

Step 1: System Requirements

Cline is lightweight on its own, but the LLM interactions and file operations benefit from a reasonable development machine:

• VS Code version 1.84.0 or later (required for the extension API Cline uses)
• Node.js 18+ (if you plan to use MCP servers or local tooling)
• Operating system: macOS, Windows, or Linux — anywhere VS Code runs
• Internet connection for cloud LLM providers (not required if using local models via Ollama)
• API key from at least one supported LLM provider

If you plan to use local models, you'll also need:

• Ollama or LM Studio installed and running
• A downloaded model (e.g., deepseek-coder, codellama, or qwen2.5-coder)
• Sufficient RAM — 16 GB minimum for 7B parameter models, 32 GB+ recommended for larger models

There are no specific CPU or GPU requirements for Cline itself. The compute-intensive work happens on the LLM provider's side (or on your machine if running local models).

Step 2: Install Cline

Installing Cline takes under a minute:

1. Open VS Code
2. Open the Extensions panel (Cmd+Shift+X on macOS, Ctrl+Shift+X on Windows/Linux)
3. Search for "Cline" in the marketplace
4. Click Install on the extension by Saoud Rizwan (the publisher name is saoudrizwan)
5. After installation, you'll see a Cline icon in the activity bar (left sidebar)

Alternatively, install from the command line:

code --install-extension saoudrizwan.claude-dev

Note the extension ID is still saoudrizwan.claude-dev from its original name — this hasn't changed despite the rebrand to Cline.

Once installed, click the Cline icon in the activity bar to open the Cline panel. The first time you open it, you'll be prompted to configure an AI provider.

Step 3: Configure Your AI Provider

Cline's provider-agnostic architecture means you can switch between models without changing your workflow. Open the Cline panel and click the settings gear icon to configure your provider.

Anthropic (Claude)

Claude models — particularly Claude Sonnet 4 and Claude Opus 4 — are widely considered among the strongest for code generation tasks. To use them directly:

1. Get an API key from console.anthropic.com
2. In Cline settings, select Anthropic as the provider
3. Paste your API key
4. Select a model (Claude Sonnet 4 is a strong balance of capability and cost)

OpenAI

1. Get an API key from platform.openai.com
2. Select OpenAI as the provider
3. Paste your API key
4. Choose a model — GPT-4o or o3-mini work well for coding tasks

OpenRouter

OpenRouter acts as a unified gateway to dozens of LLM providers, often at lower prices. This is particularly useful if you want to experiment with different models or access models that don't have a direct API:

1. Get an API key from openrouter.ai
2. Select OpenRouter as the provider
3. Paste your API key
4. Browse and select from available models

AWS Bedrock and Azure OpenAI

For enterprise environments where API calls must route through your cloud provider:

• AWS Bedrock: Configure your AWS credentials (access key, secret key, region) and select a Bedrock-hosted model like Claude or Llama
• Azure OpenAI: Provide your Azure endpoint URL, API key, and deployment name

Local Models via Ollama

Running models locally means zero API costs and complete data privacy — your code never leaves your machine:

1. Install Ollama from ollama.ai
2. Pull a coding model:

ollama pull qwen2.5-coder:14b

1. Ensure Ollama is running (ollama serve)
2. In Cline settings, select Ollama as the provider
3. The model list will auto-populate from your locally available models

Local models work well for routine tasks — file creation, boilerplate generation, simple refactoring. For complex architectural reasoning or multi-file features, cloud models like Claude Sonnet 4 still outperform most local options.

Cost Awareness

Cline displays the token count and estimated cost for each interaction in the chat panel. This real-time cost tracking helps you stay within budget. A typical feature implementation session might consume 50,000-200,000 tokens depending on codebase size and task complexity. With Claude Sonnet 4, that's roughly $0.50-$2.00 per session.

Step 4: Core Features

Plan Mode vs Act Mode

This is Cline's defining workflow, and understanding it well will save you time and money.

Plan mode is a read-only exploration phase. When you type a request in Plan mode, Cline:

• Reads relevant files in your project to understand the codebase
• Analyses the task requirements
• Proposes a step-by-step implementation plan
• Does NOT create, edit, or delete any files
• Does NOT run any terminal commands

This is where you refine the approach before any code is written. You can ask follow-up questions, request a different architecture, or narrow the scope — all without touching your project.

Act mode is the execution phase. When you switch to Act mode (or start a task in Act mode directly), Cline:

• Creates new files and directories
• Edits existing files with surgical precision (it shows you a diff before each edit)
• Runs terminal commands (build, test, lint, install dependencies)
• Reads command output and reacts to errors
• Iterates until the task is complete or it needs your input

Every action in Act mode requires your explicit approval. Cline presents each file edit or command and waits for you to click Approve or Reject. You see exactly what changes before they're applied.

A practical workflow:

1. Start in Plan mode: "I need to add rate limiting middleware to our Express API. We have routes in src/routes/ and existing middleware in src/middleware/."
2. Review Cline's proposed approach — it might suggest using express-rate-limit, creating a new middleware file, and applying it to specific route groups
3. Refine: "Use a sliding window algorithm instead of fixed window, and store the counters in Redis since we have it already"
4. Switch to Act mode: Cline implements the plan, creating files, installing the npm package, and wiring up the middleware
5. Review each diff as Cline presents it

File Creation and Editing

Cline reads and writes files using VS Code's built-in file system APIs. When it edits a file, you see a standard VS Code diff view showing exactly what changed. This means:

• Changes integrate with VS Code's undo/redo history
• Git diff will show AI-generated changes just like manual edits
• You can reject individual edits while approving others
• Your .gitignore and workspace settings are respected

Terminal Command Execution

Cline can run commands in your VS Code integrated terminal. This is how it installs dependencies, runs tests, builds your project, and debugs issues. For example:

Cline wants to run: npm install express-rate-limit
[Approve] [Reject]

After running a command, Cline reads the terminal output. If a test fails, it reads the error message and attempts a fix. This creates an autonomous loop: implement, test, read errors, fix, test again.

Browser Automation

Cline includes browser automation capabilities, allowing it to launch a browser, navigate to URLs, click elements, fill forms, and capture screenshots. This is particularly useful for:

• Verifying that a UI change renders correctly
• Testing form submissions
• Debugging visual issues by taking screenshots and analysing them
• Validating API responses in a browser context

Cline handles the coding, but you still need to get code to your servers. DeployHQ automates deployments from Git to any server — SFTP, SSH, or cloud — with build commands and zero-downtime transfers. Try it free.

Step 5: Advanced Features

Custom Instructions

Custom instructions let you define persistent rules that Cline follows across all interactions. Access them from the Cline settings panel. These instructions are prepended to every prompt, so Cline always operates within your guidelines.

Effective custom instructions include:

- Always use TypeScript with strict mode
- Follow our project's ESLint configuration — don't suppress warnings
- Use named exports, not default exports
- Write tests for all new functions using Vitest
- When creating React components, use function components with hooks
- Never install new dependencies without asking first
- Our API base URL is defined in src/config/api.ts — don't hardcode URLs

Custom instructions are stored per-workspace, so you can have different rules for different projects. This is how you align Cline's output with your team's coding standards without repeating yourself in every prompt.

MCP Server Support

The Model Context Protocol (MCP) is an open standard that lets AI agents connect to external tools and data sources. Cline has built-in MCP support, meaning you can extend its capabilities by connecting MCP servers that provide specialised functionality.

Examples of what MCP servers enable:

• Database access: Query your PostgreSQL or MongoDB database directly from Cline to understand schema or verify data
• API documentation: Connect a documentation server so Cline can look up your internal API specs
• File search: Add a semantic code search server for better codebase navigation
• Deployment tools: Integrate with your deployment pipeline for status checks

To configure MCP servers, add them in Cline's settings under the MCP Servers section. Each server requires a command to start it and optionally environment variables:

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://user:pass@localhost:5432/mydb"
      }
    }
  }
}

Auto-Approve Settings

For trusted operations, you can configure Cline to auto-approve certain action types without requiring manual confirmation each time:

• Read-only file operations: Let Cline freely read files without approval prompts
• Write operations: Auto-approve file creation and editing (use with caution)
• Terminal commands: Auto-approve specific commands or all terminal execution
• Browser actions: Auto-approve browser automation steps

You control the granularity. A common configuration is to auto-approve file reads and specific safe terminal commands (like npm test or npm run lint) while requiring approval for file writes and dependency installation. This strikes a balance between speed and safety.

Context Management

Cline includes an @ mention system for adding context to your prompts. Type @ in the chat input to reference:

• @file: Include a specific file's content in the prompt
• @folder: Reference an entire directory structure
• @url: Fetch and include content from a URL
• @problems: Include VS Code's current problems/diagnostics
• @terminal: Include recent terminal output
• @git: Include Git diff or commit history

This explicit context system helps you guide Cline to the right files without it spending tokens exploring your entire codebase. For example:

@src/middleware/auth.ts @src/routes/api.ts
Add JWT refresh token rotation to the auth middleware
and update the API routes to handle the new token format

Checkpoints and Rollback

Cline automatically creates checkpoints before making changes. If an implementation goes in the wrong direction, you can roll back to any previous checkpoint — restoring your files to their exact state before that point.

This is separate from Git. Checkpoints work at the Cline session level, so you can experiment freely knowing you can revert without cluttering your Git history with broken commits.

Step 6: Best Practices

Always Start with Plan Mode

The most common mistake with Cline is jumping straight into Act mode. Plan mode costs a fraction of the tokens (it only reads files, doesn't generate edits) and catches misunderstandings early. A 30-second planning conversation can save a 10-minute implementation that goes in the wrong direction.

Review Every Diff

Cline shows you a diff for each file edit. Read it. AI-generated code can contain subtle issues — incorrect error handling, missing edge cases, hardcoded values that should be configurable. The diff view is your quality gate.

Pay special attention to:

• Imports: Does it import from the right paths? Did it add an unnecessary dependency?
• Error handling: Does it catch the right exceptions? Are error messages helpful?
• Naming: Do variable and function names follow your project's conventions?
• Side effects: Did it modify files you didn't expect?

Provide Rich Context

The quality of Cline's output is directly proportional to the context you provide. Instead of "add authentication," try:

We need JWT authentication for our Express API.
- Use the existing User model in @src/models/user.ts
- Passwords are already hashed with bcrypt (see @src/utils/auth.ts)
- Store JWT secret in environment variables (we use dotenv, see @.env.example)
- Access tokens expire in 15 minutes, refresh tokens in 7 days
- Protect all routes under /api/v1 except /api/v1/auth/login and /api/v1/auth/register

Manage Costs

Token usage adds up across long sessions. Practical cost management strategies:

• Start with Plan mode — it's cheaper than generating code you'll reject
• Use cheaper models for simple tasks — GPT-4o mini or local models handle boilerplate well
• Be specific — vague prompts cause Cline to explore more files, consuming more tokens
• Break large tasks into smaller ones — instead of "refactor the entire API layer," target specific modules
• Monitor the token counter — Cline shows running costs in the chat panel

Use Git Branches

Always work on a feature branch when using Cline for significant changes. This gives you a clean rollback path via Git if something goes wrong, and makes it easy to review the full set of AI-generated changes before merging:

git checkout -b feature/rate-limiting
# ... use Cline to implement ...
git diff main  # Review all changes

Cline vs Cursor: When to Use What

This is a common question. Cursor is an AI-first code editor — a fork of VS Code with AI deeply integrated into the editing experience. Cline is an extension that adds agentic AI to standard VS Code. The key differences:

• Cursor excels at inline code completion, quick edits, and chat-based code generation within a custom editor. It's faster for small, frequent interactions.
• Cline excels at multi-file autonomous tasks, terminal automation, and complex implementations where the AI needs to plan, execute, and verify across your entire project. It works inside standard VS Code with no editor migration.

Many developers use both: Cursor (or Copilot) for line-by-line coding speed, and Cline for larger agentic tasks.

Step 7: Deploy with DeployHQ

Cline writes the code, but it doesn't deploy it. Your deployment workflow remains separate and predictable — exactly as it should be. Here's how Cline and DeployHQ work together in practice.

The Cline-to-DeployHQ Workflow

Let's walk through a real feature implementation, from planning through production deployment.

1. Design the feature in Plan mode

You start by describing what you need:

I need to add a /health endpoint to our Express API that checks
database connectivity, Redis connection, and returns the app version
from package.json. The endpoint should return 200 with a JSON body
when all checks pass, and 503 with details about which check failed.
Use @src/config/database.ts and @src/config/redis.ts for connection references.

Cline analyses your codebase in Plan mode and proposes:

• Create src/routes/health.ts with the health check logic
• Add database and Redis ping functions
• Register the route in src/app.ts
• Add a test file tests/routes/health.test.ts

2. Switch to Act mode — Cline implements across multiple files

After you approve the plan, switch to Act mode. Cline creates the health check route:

// src/routes/health.ts
import { Router, Request, Response } from 'express';
import { pool } from '../config/database';
import { redisClient } from '../config/redis';
import { version } from '../../package.json';

const router = Router();

router.get('/health', async (req: Request, res: Response) => {
  const checks = {
    database: false,
    redis: false,
  };

  try {
    await pool.query('SELECT 1');
    checks.database = true;
  } catch (err) {
    // database check failed
  }

  try {
    await redisClient.ping();
    checks.redis = true;
  } catch (err) {
    // redis check failed
  }

  const healthy = Object.values(checks).every(Boolean);

  res.status(healthy ? 200 : 503).json({
    status: healthy ? 'healthy' : 'degraded',
    version,
    checks,
    timestamp: new Date().toISOString(),
  });
});

export { router as healthRouter };

It then registers the route in your app entrypoint and creates the test file — each edit shown as a diff for your approval.

3. Cline runs tests to verify

Cline executes your test suite directly in the terminal:

Cline wants to run: npm test -- --grep "health"
[Approve] [Reject]

If tests fail, Cline reads the error output and fixes the issue. This implement-test-fix loop continues until tests pass.

4. Review changes in VS Code's diff view

After Cline finishes, use VS Code's Source Control panel to review all changes. You'll see a clean diff of every file Cline created or modified — just like reviewing a colleague's pull request.

5. Commit, push, and let DeployHQ handle the rest

git add -A
git commit -m "Add /health endpoint with database and Redis checks"
git push origin feature/health-check

If your DeployHQ project is configured with automatic deployments, pushing to your deployment branch triggers the pipeline immediately. DeployHQ:

• Pulls the latest code from your repository
• Runs your build commands (npm ci && npm run build, for example)
• Deploys the compiled output to your server via SFTP, SSH, or your configured protocol
• Uses atomic deployments for zero-downtime releases — the old version serves traffic until the new version is fully transferred and ready

Why This Separation Matters

Cline stays in your editor. DeployHQ stays in your deployment pipeline. Neither tries to do the other's job. This separation gives you:

• Auditability: Git history shows exactly what Cline changed. DeployHQ logs show exactly what was deployed and when.
• Rollback safety: DeployHQ can roll back to any previous deployment independently of what Cline did. You're never locked into AI-generated code.
• Team compatibility: Not everyone on your team needs to use Cline. The deployment pipeline works identically whether code was written by a human, by Cline, or by any other tool.
• Build pipeline control: DeployHQ's build commands handle compilation, minification, and dependency installation on the server side — Cline doesn't need to worry about production build configurations.

Setting Up DeployHQ for Cline Projects

If you don't have DeployHQ configured yet:

1. Sign up for a free account
2. Connect your Git repository (GitHub, GitLab, Bitbucket, or any Git host)
3. Configure your server connection (SSH, SFTP, or cloud provider)
4. Set your build commands — for a typical Node.js project:

npm ci
npm run build

1. Enable automatic deployments on your main branch
2. Push from VS Code, DeployHQ deploys — no additional steps

Step 8: Troubleshooting

"Connection failed" or "API key invalid"

• Verify your API key is correct and has sufficient credits/quota
• For Anthropic: check that your key hasn't been rotated at console.anthropic.com
• For OpenRouter: ensure your account has credits loaded
• For Ollama: confirm the service is running with ollama list

Cline is slow or unresponsive

• Large files significantly increase token usage and response time — use @file to reference specific files rather than letting Cline scan everything
• Local models are slower than cloud APIs; switch to a cloud provider for complex tasks
• Check VS Code's output panel (View, then Output, then select "Cline") for error messages

Cline makes incorrect changes

• Start with Plan mode to verify the approach before execution
• Provide more context: reference specific files, describe existing patterns, mention constraints
• Use custom instructions to enforce your coding standards
• Roll back using checkpoints and try a more specific prompt

High token usage

• Break large tasks into smaller, focused requests
• Use Plan mode to estimate scope before acting
• Switch to a cheaper model for routine tasks
• Use @file mentions to limit codebase exploration

MCP server won't connect

• Verify the MCP server command works when run manually in your terminal
• Check that environment variables are set correctly in the MCP configuration
• Look at Cline's output panel for connection error details
• Ensure the MCP server's required dependencies are installed

Terminal commands fail

• Cline uses VS Code's integrated terminal, which inherits your shell environment
• If commands fail, try running them manually in the VS Code terminal first
• Check that your PATH includes the necessary tools (Node.js, Python, etc.)
• On Windows, ensure you're using the correct shell (PowerShell vs Command Prompt vs WSL)

Conclusion

Cline represents a meaningful shift in how AI coding tools work. Rather than operating as a separate application that you copy-paste to and from, it acts as an autonomous agent within your existing editor — reading your code, proposing changes, running tests, and iterating based on results. The Plan/Act mode separation gives you structured control over what gets changed and when, while the provider-agnostic architecture means you're never locked into a single AI vendor.

The real power is in how Cline fits into your existing workflow. It doesn't replace your editor, your Git practices, or your deployment pipeline. You still review diffs, commit intentionally, and deploy through a reliable pipeline like DeployHQ. What changes is the speed at which code gets from idea to implementation — and the reduction in context-switching that slows down modern development.

Start with Plan mode, be specific with your prompts, review every diff, and let your deployment tools handle the rest.

If you have questions about integrating Cline into your deployment workflow, reach out at support@deployhq.com or find us on Twitter/X.