Running the code locally

Everything in this course runs in the browser on Scrimba, and you never have to leave. But at some point you may want the project on your own machine: to keep building on it after the course ends, to use your own editor, or to put it in a Git repository of your own.

This page covers that. It's optional, and nothing later in the course depends on it.

What you need first

A supported LTS version of Node.js. Node 24 is recommended, and Node 22 also works. Check what you have:

$ node --version
v24.18.0

If that says "command not found", install the version marked LTS from nodejs.org.

npm. Node includes npm, and Scrimba downloads are npm projects. Check that it is available:

$ npm --version
11.18.0

JunoWhat you need first Use a supported Node.js LTS release: Node 24 is recommended and Node 22 works. The course's minimum supported version is Node 20.12, because that is the release where Node added the built-in environment-file API. Meeting that minimum is not the same as running a version that still receives updates, so prefer 24 or 22.

Get the code

Right-click the project title in the Scrimba editor and choose Download as Zip. Unzip the downloaded archive, then move into its folder in your terminal:

$ cd intro-to-ai-agents-lesson

Have a look at what's there. You should see server.js, package.json, package-lock.json, environment.js, vite.config.js, and the lesson's own JavaScript files.

JunoGet the code Download the project as a Zip, unzip it, and use cd to move into the folder that contains package.json. That folder is where every command on this page runs.

Install and run

This is the one real difference between Scrimba and your machine, and it is the step people most often skip.

On Scrimba, AI_URL, AI_KEY, and AI_MODEL are stored in your account settings, and Scrimba injects them into the running project. That's why there's no .env file in the browser version: it isn't needed there, and it would be a poor place to keep a key in a shared editor anyway.

Nothing injects them on your machine, so you supply them yourself. Open your Scrimba account settings, copy the same three values, and save them in a file called .env in the project folder, beside package.json:

AI_URL=<paste from Scrimba settings>
AI_KEY=<paste from Scrimba settings>
AI_MODEL=<paste from Scrimba settings>

One name per line, no quotes and no spaces around the =. environment.js reads that file when the project starts, using the environment-file support built into Node. That is the reason for the minimum supported version listed earlier on this page.

If you put this project in a Git repository of your own, keep .env out of that repository. AI_KEY is a credential, and a key that reaches a public repository is a key you have to replace. A one-line .gitignore in the project folder handles that:

.env

The Git handbook describes the wider habit in ignoring files and good habits.

Once .env and .gitignore exist, install the dependencies:

$ npm install

npm reads the dependency list from package.json and the exact resolved versions from package-lock.json, so you get the same dependency versions the lesson was recorded with. It writes a node_modules folder, which is large and can be rebuilt at any time, so that belongs in .gitignore too.

Then start the project:

$ npm run dev

  ➜  Local:   http://localhost:5173/

Open the address it prints. On a default Vite setup that is http://localhost:5173/, and you should read that line rather than assume the number, for the reason the next section covers.

JunoInstall and run Copy AI_URL, AI_KEY and AI_MODEL out of your Scrimba settings into a .env file beside package.json, because nothing injects them for you outside Scrimba. Then npm install and npm run dev. Add .env to .gitignore before you commit anything: a key that reaches a public repository is a key you have to replace.

When the port is already taken

A dev server needs a free port, and 5173 is Vite's default, so anything else running Vite has likely claimed it. This does not break your project. Vite moves to the next port number, prints a message about it, and keeps running:

$ npm run dev
Port 5173 is in use, trying another one...

  ➜  Local:   http://localhost:5174/

If 5174 is also in use it tries 5175, then 5176, trying higher numbers until it finds one that is free. So the port does not matter and you never have to choose one. Read the URL from the line Vite prints and open that. Building the habit of reading that line, rather than typing localhost:5173 from memory, is what prevents a later search for why the page will not load.

When you do want a specific port, pass it:

$ npm run dev -- --port 4000

-- on its own tells npm to pass everything after it to Vite, instead of treating the flag as an option for npm itself.

One case behaves differently. If a project sets strictPort in vite.config.js, Vite stops rather than trying higher numbers, and prints Port 5173 is already in use. Then you either quit whatever is holding the port or pass --port as above.

JunoWhen the port is already taken Vite does not need a specific port. If 5173 is taken it moves to 5174, then 5175, prints the port it ended up using, and runs the same way regardless. Read that printed URL instead of typing localhost:5173 from memory, and use npm run dev -- --port 4000 on the rare occasion you need a specific one.

Where to go from here

What you have now is a normal npm project, so anything you learn about Node tooling applies to it directly. If you want it in version control, your first repository walks through the first commit, and you should create the .gitignore shown above before you make that first commit.

Nothing later in the course depends on any of this. If the local copy gives you trouble, the Scrimba version is still there and still works.