✨ Setup Wizard

Install VS Code, Cline Extension & OpenRouter API

1
VS Code
2
Cline
3
OpenRouter
4
Complete
1

Install Visual Studio Code

Visual Studio Code is a powerful, lightweight code editor with built-in support for JavaScript, TypeScript, and Node.js. Follow these steps to install it on your system:

📥 Download VS Code

Select your operating system below for specific instructions:

Windows Installation

  1. Click the download button below to get the Windows installer (User Installer recommended)
  2. Once downloaded, double-click the VSCodeUserSetup-x64-*.exe file
  3. Follow the installation wizard (accept defaults unless you have specific preferences)
  4. Launch VS Code from the Start Menu or desktop shortcut
⬇️ Download VS Code for Windows

macOS Installation

  1. Click the download button below to get the macOS version
  2. Open the downloaded .zip file to extract it
  3. Drag the Visual Studio Code app to your Applications folder
  4. Open VS Code from Launchpad or Applications folder
  5. If you see a security warning, go to System Preferences → Security & Privacy and allow VS Code
⬇️ Download VS Code for macOS

Linux Installation

Choose your preferred method:

Option A: Snap (Recommended for Ubuntu/Debian)
sudo snap install code --classic
Option B: .deb package (Ubuntu/Debian)
sudo apt install ./code_*.deb
Option C: .rpm package (Fedora/RHEL/CentOS)
sudo rpm -i code-*.rpm
⬇️ Download VS Code for Linux
💡 Pro Tip: After installation, open VS Code and press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to access the Command Palette. This is your gateway to all VS Code features!
2

Install Cline Extension

Cline is an AI-powered coding assistant that integrates directly into VS Code. Here's how to install it:

🔧 Installation Steps

  1. Open VS Code (if not already open)
  2. Click the Extensions icon in the left sidebar (or press Ctrl+Shift+X / Cmd+Shift+X)
  3. In the search bar, type: cline
  4. Look for the official "Cline" extension by cline-org
  5. Click the Install button
  6. Wait for installation to complete (you'll see a gear icon instead of Install)
🔍 Finding the Right Extension:
Make sure you're installing the extension from cline-org. The extension icon features a blue/white C logo. If you see multiple results, verify the publisher name.

📸 Visual Guide

If you prefer visual instructions, you can watch this quick tutorial:

▶️ Watch Installation Video

✅ Verify Installation

After installation:

  • You should see a Cline icon in the Activity Bar (left sidebar)
  • Click it to open the Cline chat interface
  • The first time you open it, you'll be prompted to configure an AI provider
⚠️ Important: Cline requires an AI API key to function. In the next step, we'll set up OpenRouter, which provides access to multiple AI models through a single API.
3

Setup OpenRouter API

OpenRouter provides unified access to multiple AI models (GPT-4, Claude, Llama, etc.) through a single API key. We'll use it with Cline for AI-powered coding assistance.

🔑 Get Your OpenRouter API Key

  1. Go to openrouter.ai and sign up/log in
  2. Navigate to API Keys in your account dashboard
  3. Click Create New Key
  4. Give it a name (e.g., "Cline VS Code")
  5. Copy your API key immediately (you won't be able to see it again!)
🔗 Go to OpenRouter Keys Page
💰 Pricing: OpenRouter offers competitive pricing with access to multiple models. You get free credits upon signup to test different models. Check their pricing page for current rates.

⚙️ Configure Cline with OpenRouter

Now, let's connect your OpenRouter API key to Cline:

  1. In VS Code, click the Cline icon in the Activity Bar
  2. You'll see a setup screen asking for an API Provider
  3. Select OpenRouter from the dropdown
  4. In the API Key field, paste your OpenRouter key
  5. For Model, choose your preferred AI model (e.g., openai/gpt-4o, anthropic/claude-3.5-sonnet)
  6. Click Save or Connect
Example API Configuration:
Provider: OpenRouter
API Key: sk-or-v1-xxxxxxxxxxxxxxxxxxxxxxxx
Model: openai/gpt-4o

🎯 Recommended Models

Here are some popular models you can use with OpenRouter:

  • openai/gpt-4o - Latest GPT-4o, excellent all-around
  • anthropic/claude-3.5-sonnet - Great for code and reasoning
  • meta-llama/llama-3.1-70b-instruct - Powerful open-source option
  • mistralai/mixtral-8x7b-instruct - Fast and efficient
💡 Model Selection Tips:
• GPT-4o: Best overall performance, good for complex tasks
• Claude 3.5 Sonnet: Excellent for code generation and analysis
• Llama 3.1: Free tier available, good for experimentation
Start with GPT-4o or Claude 3.5 Sonnet for best results.
🔒 Security Note: Never share your API key. Keep it secret and secure. If you suspect it's been compromised, revoke it immediately from OpenRouter and create a new one.
🎉

Setup Complete!

You've successfully installed VS Code, Cline extension, and configured OpenRouter API.

🚀 Getting Started with Cline

  • Open the Cline panel in VS Code (left sidebar)
  • Type your first message to start coding with AI
  • Use / commands for special actions (e.g., /help)
  • Attach files by dragging them into the chat
  • Cline can read your workspace files and help with code

📚 Next Steps

📖 Read Cline Documentation 📊 OpenRouter API Docs 🎯 VS Code Official Docs

💻 Quick VS Code Tips

  • Ctrl+P - Quick file open
  • Ctrl+Shift+P - Command Palette
  • Ctrl+/ - Toggle comment
  • Ctrl+Shift+N - New window
  • Ctrl+Tab - Switch tabs
  • Ctrl+Shift+E - Explorer
  • Ctrl+Shift+G - Source Control
  • Ctrl+` - Terminal