cline

## How Cline Works

1. You describe a task in natural language
2. Cline creates a plan (visible to you)
3. For each step, Cline:
   - Reads relevant files (auto-approved)
   - Proposes file changes (you approve/reject each)
   - Runs terminal commands (you approve first)
   - Opens browser for testing (you approve)
4. You can steer the agent mid-task

## Example: Add Authentication to an Existing App

Prompt: "Add Clerk authentication to this Next.js app. Protect all /dashboard
routes. Add a sign-in page. Show the user's name in the header."

Cline's steps (each requires your approval):
1. Reads package.json, layout.tsx, middleware.ts
2. Runs: npm install @clerk/nextjs
3. Creates: src/middleware.ts with Clerk middleware
4. Modifies: src/app/layout.tsx to add ClerkProvider
5. Creates: src/app/sign-in/[[...sign-in]]/page.tsx
6. Modifies: src/components/Header.tsx to show UserButton
7. Runs: npm run build (to verify no errors)
8. Opens browser to test sign-in flow

// VS Code settings for Cline
{
  "cline.apiProvider": "anthropic",
  "cline.apiModelId": "claude-sonnet-4-20250514",
  "cline.customInstructions": "Follow the project conventions in .cursor/rules/. Use TypeScript strict mode. Prefer server components. Always run tests after changes.",
  "cline.autoApproveReadOnly": true,     // Don't ask to read files
  "cline.maxFileLineCount": 500          // Warn before reading huge files
}

## Multi-File Refactoring
"Migrate all API routes from Express to Hono. Keep the same route structure
and middleware. Update tests to use the Hono test client."
→ Cline reads all route files, creates a migration plan, edits each file,
  updates imports, runs tests after each change.

## Feature Implementation
"Add a Stripe webhook handler that processes subscription.created,
subscription.updated, and subscription.deleted events. Update the user's
plan in the database. Add proper signature verification."
→ Cline scaffolds the handler, adds event processing, creates DB migration,
  writes tests, and verifies the build.

## Debugging
"Users report that the search API returns stale results. Find the caching
layer, identify why it's not invalidating properly, and fix it."
→ Cline reads the search route, finds the Redis cache, identifies the TTL
  issue, proposes a fix with cache invalidation on write.

## Documentation
"Generate API documentation for all endpoints in src/server/routers/.
Create a markdown file for each router with endpoint descriptions,
input/output schemas, and example requests."
→ Cline reads each router, extracts Zod schemas, and generates docs.

## Cline supports MCP (Model Context Protocol) servers

Add custom tools via MCP:
- Database query tool → Cline can check DB schema/data
- Deployment tool → Cline can deploy to staging
- Testing tool → Cline can run specific test suites
- Monitoring tool → Cline can check error rates

Configure in Cline settings → MCP Servers → Add server URL

# VS Code Extension
Search "Cline" in VS Code Extensions marketplace
# Or: code --install-extension saoudrizwan.claude-dev

# Set API key in Cline settings
# Supports: Anthropic, OpenAI, Google, AWS Bedrock, OpenRouter, local models