// VS Code + Cline
Lightweight AI coding setup — the Cline extension in VS Code powered by your preferred API (DeepSeek, Kimi K2.6, etc.). Free, simple, and effective for everyday coding tasks.
01# Overview
Cline is a free, open-source VS Code extension that brings AI coding assistance directly into your editor. Connected to your API provider, it becomes a powerful AI pair programmer.
In-editor AI chat
Chat with AI without leaving VS Code
File creation & editing
Cline can create, edit, and refactor files
Terminal commands
Runs shell commands in the integrated terminal
OpenAI compatible
Works with any OpenAI-compatible endpoint
02# Install VS Code
Download and install VS Code from the official site if you haven't already:
# Download from:\n# https://code.visualstudio.com/\n\n# Or install via brew (macOS):\nbrew install --cask visual-studio-code\n\n# Or via winget (Windows):\nwinget install Microsoft.VisualStudioCode03# Install Cline
Install the Cline extension from the VS Code Marketplace:
- 01.Open VS Code
- 02.Press Ctrl+Shift+X (or Cmd+Shift+X on macOS) to open Extensions
- 03.Search for "Cline"
- 04.Click Install on the Cline extension by saoudrizwan
- 05.Reload VS Code if prompted
# Or install from CLI:
code --install-extension saoudrizwan.claude-dev04# Configure API Key
Connect Cline to your API provider:
- 01.Open Cline sidebar (click the Cline icon in the Activity Bar)
- 02.Click the settings/gear icon at the top of the Cline panel
- 03.Select "OpenAI Compatible" as the API Provider
- 04.Enter your API Base URL
- 05.Enter your API Key
- 06.Set the Model ID to your assigned model
API Provider: OpenAI Compatible
Base URL: <your-api-base-url>
API Key: <your-api-key>
Model ID: <your-assigned-model>05# Usage
Once configured, open the Cline sidebar and start chatting. Cline can:
Ask questions about your code
"What does the handleAuth function do?"
Create new files
"Create a React component for a user profile card"
Edit existing files
"Add error handling to the API route in app/api/users/route.ts"
Run terminal commands
"Run the tests and fix any failures"
Refactor code
"Refactor this component to use TypeScript interfaces instead of any"
06# Configuration
Custom Instructions
Add custom instructions in the Cline settings to tailor responses to your team's conventions:
// Example custom instructions:
Always use TypeScript with strict types.
Follow our naming convention: camelCase for variables, PascalCase for components.
Use Prisma ORM for database operations.
Prefer server components over client components.
Always include error handling in API routes.Auto-Approve Settings
Configure which actions Cline can perform without asking for approval:
07# Tips & Tricks
Use @-mentions for file context
Type @filename in the chat to explicitly include a file as context. This helps Cline understand exactly what you're working with.
Start with small tasks
Break complex features into smaller prompts. "Add a login form" is better than "build the entire auth system".
Review diffs before accepting
Cline shows a diff view before applying changes. Always review the changes to catch unintended modifications.
Use the task history
Cline keeps a history of past tasks. You can resume or reference previous conversations.
Keep your workspace clean
Close unrelated files and folders. A focused workspace helps Cline give more relevant suggestions.