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

Prompt Engineering in Cursor

Master prompt engineering in Cursor IDE. Agent mode vs inline editing, composer prompts, codebase-aware prompting, and .cursorrules integration strategies.

Antigravity CLI — Configuration Reference

Complete configuration reference for Antigravity CLI. Settings.json, environment variables, MCP servers, plugins, trusted folders, and project context files.

Antigravity CLI — Getting Started

Install, authenticate, and run your first Antigravity CLI session. Covers curl install, npm, Homebrew, OAuth, API key auth, and essential commands.