Cline — AI Coding Tool Guide

VS Code extension for autonomous AI coding. Browser automation, MCP server creation, terminal control, and prompt patterns for complex multi-step development workflows.

clinevscodeautonomousbrowser-automation

Cline

Cline is a VS Code extension that acts as an autonomous AI coding agent. It can read/write files, execute terminal commands, control a browser, and create/modify MCP servers — all from a chat interface inside VS Code.

What Makes Cline Different

  • Browser automation — Opens a browser, navigates pages, clicks buttons, extracts data, and takes screenshots
  • MCP server creation — Build custom MCP servers for your workflow from scratch
  • Autonomous execution — Given a goal, Cline iterates autonomously through the full edit-build-test cycle
  • VS Code native — Extension, no separate terminal. All context lives inside the editor

Getting Started

Install from the VS Code Marketplace. Configure your API key in extension settings.

Prompt Patterns

End-to-End API Development

Create a REST API for a task management app:
1. Set up Express.js with TypeScript
2. Add PostgreSQL with Prisma ORM
3. Create CRUD endpoints for tasks
4. Add input validation with zod
5. Generate OpenAPI documentation
6. Write integration tests
7. Run `npm test` to verify everything works

Browser Automation

Test the signup flow on our staging site:
1. Navigate to https://staging.example.com/signup
2. Fill the form with test data: name=Test User, [email protected]
3. Click submit
4. Check for success redirect to /dashboard
5. Take a screenshot of the result
6. Report any issues found

MCP Server Creation

Create an MCP server that queries our internal Jira instance:
1. Use the @modelcontextprotocol/sdk package
2. Create tools: search_issues, get_issue, create_issue
3. Authenticate via JIRA_API_TOKEN environment variable
4. Handle pagination for search results
5. Write a README with setup instructions
6. Test with `npx @modelcontextprotocol/inspector`

Multi-Service Integration

Set up a CI pipeline that:
1. Reads the PR diff from GitHub API
2. Runs only affected tests (detect via file paths)
3. Posts results as a PR comment
4. If tests pass, triggers a staging deploy via Vercel API
5. Sends a Slack notification to the team channel

Configuration

Cline settings in VS Code:

{
  "cline.apiKey": "sk-ant-...",
  "cline.model": "claude-sonnet-4-20250514",
  "cline.autoApprove": false,
  "cline.maxRequestsPerTask": 50,
  "cline.browser.viewport": "1280x720"
}

MCP Configuration

Add MCP servers in Cline's settings panel (same format as Claude Code):

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-playwright"]
    }
  }
}

Related Articles

Gemini CLI — Configuration Reference

Complete Gemini CLI configuration reference. Covers gemini.yaml settings, MCP integration, .gemini/ directory conventions, sandbox configuration, extension management, and environment variables.

Prompt Engineering in Claude Code

Master prompt engineering for Claude Code. CLAUDE.md system prompt patterns, extended thinking strategies, multi-file refactoring prompts, and autonomous coding workflows.

Prompt Engineering in GitHub Copilot

Prompt patterns for GitHub Copilot chat, inline edits, and agent mode. Master workspace context, slash commands, step-by-step feature patterns, PR-focused prompting, and common pitfalls.