How I Set Up Cline in VS Code and It Wrote My Entire Feature For Me

For the last year, I've been using GitHub Copilot like everyone else. It was basically a really smart autocomplete. But yesterday, I had my first true "aha" moment with AI where I literally pushed my chair back from my desk and just watched my computer write software by itself.

The tool that did this? Cline (previously known as Claude Dev).

Unlike Copilot, Cline is an agent. You don't just write a comment and wait for it to fill in the blank. You give it a high-level goal, and it navigates your workspace, creates files, writes code, runs terminal commands, and even reads the console errors to fix its own bugs. In this post, I'm going to walk you through exactly how to set it up, and how I got it to write a complete Next.js authentication flow for me.

Installation is the easiest part. You don't need Docker, you don't need complex Python environments. Since Cline is native to VS Code, you just install it from the marketplace.

• Open VS Code.
• Go to the Extensions tab (Cmd/Ctrl + Shift + X).
• Search for "Cline" (it has a little robot icon).
• Click Install.

Once installed, you'll see a new chat icon in your Activity Bar. Click it to open the Cline panel.

Cline is just the engine; you need to provide the "brain". Cline supports OpenAI, Anthropic, Google Gemini, and even local models via Ollama.

Crucial Advice: As of right now, Claude 3.5 Sonnet by Anthropic is significantly better at coding than GPT-4o. If you want the magic experience, use Claude.

1. Go to console.anthropic.com and create an account.
2. Add $5 or $10 to your billing balance. (Yes, it costs money, but $5 will last you a very long time).
3. Generate an API Key.
4. Back in VS Code, click the gear icon in the Cline panel.
5. Select "Anthropic" as the provider, and paste your API key. Select the claude-3-5-sonnet model.

With Cline set up, I decided to test it on something annoying: setting up a custom Next.js authentication flow using JWTs, HttpOnly cookies, and a Postgres database. Normally, this takes me a few hours to wire up correctly.

I opened the Cline chat and typed this exact prompt:

This is where it gets crazy. Cline didn't just spit out code for me to copy-paste. It told me: "I will now create the necessary files."

Suddenly, a diff view opened in VS Code. It was creating app/login/page.tsx. It asked me to click "Approve". I clicked it. Then it created the API routes. Approve. It wrote the middleware. Approve.

Then, something unexpected happened. It realized I didn't have the jose library installed.

It sent a message: "I need to run `npm install jose` in your terminal to continue. Is this okay?"

I clicked "Allow Terminal Command". It ran the command, waited for the installation to finish, and then continued writing the code. It was completely autonomous.

When it finished, I ran npm run dev and tried to log in. I got a 500 error. The HttpOnly cookie wasn't setting correctly because of a Next.js header bug.

Instead of Googling it, I just told Cline: "When I submit the login form, I get a 500 error and the cookie isn't set."

Cline replied: "Let me check the server logs." It literally read my terminal output, saw the specific error message, realized it used the wrong import for the Next.js cookies API, updated the API route, and asked me to try again.

I submitted the form again. Boom. Logged in. Redirected to the dashboard. The middleware worked flawlessly.

The entire process took maybe 15 minutes, and 12 of those minutes were just me reading the code it was writing to make sure it was secure.

Cline isn't perfect. If you give it a massive, vague task like "build me a CRM," it will get confused and hallucinate bad code. But if you break your work down into well-defined features—like "build this auth flow", or "create a sidebar component that fetches data from this endpoint"—it operates at the level of a mid-to-senior developer.

If you use VS Code, you need to install Cline today. It is the most powerful piece of software I've ever installed in my editor.