Setting up VS Code with Cline
In this codelab you'll install Visual Studio Code, add the Cline AI coding assistant to it, connect your own model provider, and run your first AI-assisted task — all inside your code editor.
What you'll use
- Visual Studio Code — A free, open-source code editor whose extensions marketplace powers modern developer workflows. Learn more →
- Cline — An AI coding assistant that lives in your editor. It reads your codebase, plans changes, writes files, and runs commands for you. Learn more →
- A model provider (like Anthropic, OpenRouter, or Google Gemini) that you connect with an API key to power Cline's intelligence.
1Install Visual Studio Code
VS Code is free to download and runs on Windows, macOS, and Linux. Let's install it on your machine.
- Download the installer from code.visualstudio.com
- Run the installer and keep the default options.
- Make sure \"Add to PATH\" is checked so you can open folders from the terminal.
- Click Finish to launch VS Code.
Verify the installation:
code --versionYou should see a version line like 1.9x.y.
2Install the Cline extension
Cline is installed as an extension from the VS Code Marketplace, just like any other extension.
- Open the Extensions view with Ctrl+Shift+Shift (or Cmd+Shift+X on Mac).
- Type "Cline" in the search box and press Enter.
- Click Install on the Cline section.
- Once installed, the Cline icon will appear in the activity bar on the left.
Or install it from the terminal:
code --install-extension saoudrizwan.claude-devVerify it's installed:
code --list-extensions | grep claudeYou should see the extension's name and version, confirming Cline is ready.
3Connect a model provider
Cline needs a model to power its answers. You'll connect one using an API key from a provider.
- Click the Cline icon in the activity bar to open its panel.
- Open the settings (gear icon) and choose your API provider.
- Paste your API key and select a model.
- First time? Cline will guide you to create an API key on the provider's website.
💡 No API key yet? Most providers offer free credits to get started. For example, Anthropic and OpenRouter give you a starting balance, and Gemini has a free tier. Pick whichever works for you — you can change providers anytime.
4Your first AI-assisted task
With a model connected, you're ready to make Cline help you with a real, hands-on task.
Create a project folder and open it in VS Code:
mkdir my-project && cd my-projectOpen the Cline panel and ask for something in plain English:
"Create a simple HTML page inside a templates folder."- Cline will review your code, propose an approach, and put forward a plan for your approval.
- Approve each change it wants to make, then check the result in your editor.
5Get to know Plan and Act modes
Cline works in two modes that keep you in control of everything it does.
🧠 Plan mode
Cline reads your code and plans approach without changing any files. Use it to design before you build.
⚡ Act mode
Cline executes the plan, editing files and running terminal commands — but it always asks for your approval with each change.
This two-step flow — plan, approve, apply — is the same professional workflow real teams use, now powered by AI.
6What's next
You now have a complete AI-assisted coding setup. Here are some great next steps:
🌐 Version control
Put your project under version control and share it on GitHub — Getting started with GitHub
📦 JavaScript runtime
Install the runtime and package manager used by most modern web apps — Getting started with Node.js & npm
🤖 Compare AI editors
Cline turns VS Code into an AI editor; try another one to see the differences — Getting started with Google Antigravity
📖 Lesson: Understand the building blocks behind your websites in our Create your own website lesson.
You're all set!
You have VS Code installed, the Cline extension ready, a model provider connected, and your first AI-assisted task behind you.
Back to codelabs