Installing VS Code and a free AI add-on
Lesson 2 of 12
2Installing VS Code and a free AI add-on
Your first install: the editor, then an add-on, then an API key, and with it the track's most important security lesson: where a key goes and where it never goes.
What the picture shows: Install the editor, then the extension, put the API key in an environment variable away from the code, then confirm with a test question.
Map of this part
The concepts in order, click any one to jump to it:
Two ways into the same idea
An extension is like an app you install on your phone to give it a new ability. An API key is like a building pass: whoever holds it gets in under your name and you pay. So never paste it in code or send it to anyone; keep it in a secret place of its own.
An extension is a package adding features to VS Code from its marketplace. An API key is a secret that authenticates your requests with the model provider and is billed. Keep it in an environment variable, a .env file listed in .gitignore, or the editor's secret store, and check the extension works with a small request whose answer you know.
Required fundamentals
A connection and permission to install
You need to download software onto your machine. On a managed work laptop you may need an admin's approval.
The browser helper from part one
Its real role starts here: paste any error message to it and ask "how do I fix this, step by step, as a beginner?"
A Google account (optional)
If you pick Continue.dev or Cline you will need a free key from Google AI Studio. If you pick Codeium you need nothing.
Core concepts
The first task is purely practical: a working editor plus a working AI add-on. But two concepts underneath it are worth pausing on.
1What is an "extension"?
An extension is a small program installed inside VS Code that gives it a capability it did not have. VS Code itself is a well-made text editor, and everything beyond that, language support, debuggers, AI, comes from extensions. That is why it is the most popular one: you build it to your own shape.
The panel opens from the four-squares icon on the side, or with Ctrl+Shift+X (Cmd on a Mac).
2What is an "API key"?
The language model does not run on your machine, it runs on the servers of whoever owns it. So the add-on in your editor needs a way to tell those servers "I am allowed". An API key is a long secret string that does exactly that: it proves who you are, and the usage is billed to you.
3Which add-on should you pick?
| Add-on | API key | Known for | Right if |
|---|---|---|---|
Codeium | Not needed | A bundled free model | You want the fewest steps between install and result |
Continue.dev | Yes | Open source, you choose the model | You like seeing what is going on and trying models |
Cline | Yes | Built around agent mode | Part four (the agent) is what you care about |
The project names Continue.dev as its main example but explicitly leaves the choice to you. If you want to finish fastest, Codeium has the least friction; if you want to understand the architecture, Continue.dev shows you the model and the settings.
4How do you know it works?
The project gives two tests, and either one is enough:
- Open a file and start typing, then wait a second: does faint grey text appear? That is inline completion.
- Open the chat panel and ask something simple like "Hello, are you there?": does a reply come?
How it works
Two pictures: the install path, then the map of where a key may go.
Diagram 3, The whole install path, including the "no reply? restart, then ask" loop.
Diagram 4, Where an API key lives and where it never lives. The dashed branches are real mistakes that happen daily.
What is actually asked of you
Task one, step by step
1. Download VS Code from code.visualstudio.com and install it. If you get stuck, ask your browser helper: "How do I install VS Code on my computer, step by step, as a beginner?"
2. Open the Extensions panel from the four-squares icon or Ctrl/Cmd+Shift+X, search for the add-on's name and click Install.
3. If it needs a key, create a free one at Google AI Studio and paste it into the add-on's settings screen, never into a file.
(Or pick Codeium and skip this step entirely.)
4. Test it. Open any file, start typing and wait for the grey text, or open the chat and ask "Hello, are you there?".
5. If nothing replies: restart VS Code once first. If it persists, copy the error text exactly as it is and paste it to your browser helper with: "I got this error setting up my VS Code AI add-on. How do I fix it, step by step?"
Myth vs. reality
| The myth | The reality |
|---|---|
| “An API key is just a username.” | It is a password. Whoever holds it uses your account and your quota. Treat it like your bank password. |
| “I'll keep the key in a config file inside the project to stay organised.” | That is exactly how keys leak into git. The right place: the add-on's settings screen, or an environment variable outside the repository. |
| “If the add-on does not reply, it is broken.” | Usually it just needs a window reload. The project mentions it; try that before looking for anything harder. |
| “It must be Continue.dev because the project named it.” | The project named it as an example and explicitly allows Cline and Codeium. The choice is part of the goal. |
| “Free is limited, so I need a subscription.” | Every tool on the project's list is free and covers all of its tasks. Cursor states outright that the Hobby plan covers everything here. |
Try it yourself
You installed Continue.dev and got a key from Google AI Studio. Where does it go?
A key is a password. Putting it in a project file means the first git push pushes it to GitHub. The only safe places are the add-on's settings screen or an environment variable that is never committed. And if one does leak, revoke it immediately and create a new one.
Quick review flashcards
Check your understanding
1. Why does the model need a key at all? Isn't the software on my machine?
The add-on is on your machine, but the model itself is on remote servers. The key tells those servers who you are, and the quota is counted against it. (Codeium is the exception, handling this internally where you never see it.)
2. If your key leaks into a public repository, what is the first thing you do?
Revoke it immediately in the key console, then create a new one. Deleting it from the file and pushing a new commit is not enough, git history keeps the old version, and bots scan GitHub for keys within minutes.
3. (Spot the bug) You installed the add-on and pasted the key; there is no grey text and no reply. In what order do you check?
(1) Reload the VS Code window. (2) Confirm the add-on is enabled, not merely installed. (3) Confirm the key was copied in full with no trailing space. (4) Copy any visible error verbatim and ask your browser helper. Cheapest check first, that is a general debugging rule.
4. Is your add-on choice final?
No, and the project itself has you try a second editor in part five. You can install more than one add-on and disable what you do not want. The real cost is not installation but splitting your attention across too many tools at once.
5. (Decision) On a work laptop you have no permission to install. What are your options?
Three: ask your administrator (cleanest), use a portable VS Code build if policy allows, or do the learning project on your personal machine. What is not advisable is working around the device policy, a leaked key on a work machine is a far bigger problem.
Resources for this part
Sorted by kind: start with the official docs when you want the precise reference, or with an article or video when you want the explanation first.