Build Your First AI Agent with Cline

Cline (formerly Claude Dev) is an open-source AI agent that lives in VS Code. Unlike Copilot or Cursor, Cline can autonomously edit files, run terminal commands, and iterate on bugs until they're fixed — all without you typing a second prompt.

---

What Makes an AI Agent Different?

A Copilot suggests code → you accept or reject.

An AI Agent like Cline:

1. Reads your entire codebase
2. Plans a multi-step approach
3. Edits files
4. Runs tests
5. Reads the output
6. Fixes errors
7. Repeats until the task is done

This "agentic loop" means you can assign tasks like "Add a complete authentication system with JWT" and come back to working code.

---

Step 1: Install Cline

1. Open VS Code
2. Press Ctrl+P (or Cmd+P on Mac)
3. Type: ext install saoudrizwan.claude-dev
4. Press Enter to install

Or search "Cline" in the VS Code Extensions marketplace.

---

Step 2: Configure Your API Key

Cline works with any OpenAI-compatible API. The best options:

Option A: Anthropic (Claude 3.7) — Recommended

1. Get an API key at console.anthropic.com
2. In Cline settings: Provider → Anthropic, paste your key
3. Select model: claude-3-7-sonnet-20250219

Cost estimate: ~$0.50–2.00 per hour of heavy use

Option B: OpenRouter (Pay Per Use, Many Models)

1. Create account at openrouter.ai
2. Add credit ($5–20 is a good start)
3. In Cline settings: Provider → OpenRouter, paste your key
4. Choose from 100+ models including DeepSeek, Llama 3, and Mistral

Option C: Ollama (Free, Local)

1. Install Ollama (see our Ollama guide)
2. Pull a coding model: ollama pull deepseek-coder-v2
3. In Cline settings: Provider → Ollama, URL: http://localhost:11434
4. Model: deepseek-coder-v2

---

Step 3: Understanding Cline's Tools

Cline has access to these tools (you approve each use):

Tool	What it does
read_file	Read any file in your project
write_to_file	Create or overwrite a file
replace_in_file	Make targeted edits (safer than full rewrite)
execute_command	Run terminal commands (npm install, tests, etc.)
search_files	Grep across your codebase
list_files	Explore your directory structure
browser_action	Open and interact with web pages

By default, Cline asks your permission before each tool use. You can set auto-approve for trusted operations.

---

Step 4: Your First Task

Open the Cline panel (robot icon in sidebar) and try this task:

Create a reusable <LoadingSpinner /> React component in TypeScript.
Requirements:
- Accept a 'size' prop: 'sm' | 'md' | 'lg'
- Accept an optional 'color' prop (defaults to current text color)
- Use Tailwind CSS classes
- Include a JSDoc comment
- Create the component in src/components/LoadingSpinner.tsx
- Export it from src/components/index.ts (or create the file if needed)

Watch how Cline:

1. Explores your project structure
2. Checks existing components for patterns
3. Creates the component file
4. Updates the index exports
5. Reports what it did

---

Step 5: Multi-Step Agent Tasks

Cline excels at tasks that require multiple steps. Example:

I need to add pagination to the /api/posts endpoint.
The endpoint is in src/app/api/posts/route.ts.
The database uses Prisma with a Post model.

Please:
1. Add ?page=1&limit=10 query params
2. Return { data, total, page, pages }
3. Add input validation using zod
4. Update the frontend PostList component to show next/prev buttons
5. Test that existing posts still load correctly

This task normally takes 30–45 minutes. Cline handles it in ~5 minutes.

---

Step 6: Configure Auto-Approve (Optional)

For faster iteration, set auto-approve rules:

Settings → Cline → Auto-Approve:

• ✅ Read files
• ✅ List files
• ✅ Search files
• ⚠️ Write files (approve manually for safety)
• ⚠️ Execute commands (always review first)

Safety tip: Never auto-approve execute_command until you're comfortable with how Cline works.

---

Best Practices

Be specific about constraints:

Add error handling to the payment flow.
- Don't change the existing error boundary
- Use the existing toast notification system (useToast hook)
- Log errors to console.error, not console.log
- Never expose internal error messages to users

Start small, build up:

• Begin with isolated components or utility functions
• Move to larger features once you trust the agent's decisions

Review every change:

• Always read the diff before accepting
• Run your test suite after each major task

---

Troubleshooting

"Model refused to continue" The model hit its context limit. Start a new task and be more specific about scope.

"Command failed: npm install" Check that your working directory is correct. Tell Cline: "The project root is at /path/to/project".

"Changes broke other tests" Include test output in your follow-up: "The changes broke UserProfile.test.tsx with this error: [paste error]. Fix it without changing the test."

---

Next Steps

• Read the Cline documentation for advanced configuration
• Explore MCP servers to give Cline access to web browsers, databases, and APIs
• Compare with other agents in our AI Agents directory