Running Intro to Mistral AI locally

Use this page to run the extracted Intro to Mistral AI project on your computer. The project reads its API key the way Scrimba supplies it, so one line changes before it runs in Vite, and the function-calling result then appears in the browser console. The key handling matches Running Chef Claude locally, which solves the same problem for a different provider.

What you need first

Install a supported LTS version of Node.js. Node 24 is recommended and includes npm.

Check that Node and npm are available:

$ node --version
v24.18.0
$ npm --version
11.18.0

You also need a Mistral API key. If you do not have one, follow Mistral's Studio key setup, create a key, and copy it when it is shown. You will add it to the local environment file later on this page.

JunoWhat you need first Install the LTS version of Node.js, which brings npm with it, and create a Mistral API key.

Copy the key as soon as Studio shows it, and keep it somewhere safe until you add it to .env.

JunoWhat you need first Creating a key and having access to a model are separate things, so check that your Mistral account can use the model your downloaded lesson names.

JunoWhat you need first The page can start with a placeholder key and look completely normal. Only the function-calling loop proves the key and the model together, so confirm the credential works before you debug code that is not broken.

Open the project folder

Open a terminal in the extracted folder containing package.json:

$ cd path-to-your-downloaded-project

JunoOpen the project folder Work in the extracted folder that contains package.json, and run every npm command from there. The .env file you create later belongs in that same folder too.

JunoOpen the project folder This is an npm and Vite project, so package.json tells you what npm start runs. The next step changes its Scrimba-only key lookup so the app reads your local environment file instead.

JunoOpen the project folder The download has no lockfile, so npm install resolves versions against the registry and records them locally. Two setups on different days can get different patch versions, which is worth ruling out before you blame your machine for a difference.

Make the API key work in Vite

The downloaded index.js reads the key with Scrimba's environment syntax:

const client = new MistralClient(process.env.MISTRAL_API_KEY)

A stock Vite browser project does not provide that process.env value. Change the line to:

const client = new MistralClient(import.meta.env.VITE_MISTRAL_API_KEY)

Create .env beside package.json:

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

Create .gitignore beside it and add:

.env
node_modules/

The VITE_ prefix is required because Vite exposes only specially prefixed environment variables to browser code. Ignoring .env matters because a key added to Git by accident is not removed by deleting the file: the value stays in the repository history. The Git handbook covers the wider habit in ignoring files and good habits.

This key is visible in the browser

The VITE_ prefix deliberately puts the API key into the frontend bundle. Use a temporary, restricted key for local learning only. Never deploy or share this version, and never commit .env. A production application needs a backend or serverless function that keeps the key on the server.

JunoMake the API key work in Vite Change the old key lookup, put a temporary key in .env, and keep that file out of Git.

The browser can still read this key, so use one you are willing to delete afterwards. That exposure is a limit of frontend-only projects, not an error in your setup.

JunoMake the API key work in Vite Vite client code reads import.meta.env and exposes only VITE_-prefixed variables, which is why the rename matters. Restart the server after editing .env, because the values are read at startup.

JunoMake the API key work in Vite Vite inlines the key string into the served JavaScript, so a search in DevTools Sources finds it in plain text. A backend version has to run the whole function-calling loop on the server, not only hold the key.

Install and run the project

Install the downloaded dependencies and start Vite:

$ npm install
$ npm start

Open the exact Local URL Vite prints, usually http://localhost:5173/. In the function-calling lesson, open your browser's developer tools and select Console. A returned Mistral response there is the visible success result; the lesson does not render that result on the page.

Restart Vite after changing .env. Stop it with Ctrl+C.

JunoInstall and run the project Run npm install, then npm start, and open the Local URL it prints. Then open the browser Console, because the function-calling lesson prints its answer there.

An empty-looking page is the expected result, not a failure.

JunoInstall and run the project Use the exact address Vite prints rather than a remembered port, and restart after environment changes. The lesson reports to the Console, so keep DevTools open while you test it.

JunoInstall and run the project A running Vite server proves the packages installed and the edited source compiled, and nothing more. Only a real request confirms that Mistral accepts your key and the lesson's model, so run the function-calling example before you call the setup finished.

Troubleshooting

process is not defined: The Scrimba-style environment read remains in index.js. Replace it with the import.meta.env.VITE_MISTRAL_API_KEY form above and restart Vite.

The key is undefined or authentication fails: Confirm the exact VITE_ variable name, make sure .env is beside package.json, and restart the project. Check that the key is still active in your Mistral account.

The model is unavailable or the SDK request fails: The downloaded project pins an older Mistral SDK and asks for mistral-large-latest. Provider SDKs and model catalogs change. Compare the model ID in index.js against the models listed in Mistral's documentation, and change the ID before you change the pinned SDK version, since a renamed model is the more common cause.

Nothing appears on the page: Open the browser console. The function-calling lesson logs its final response there instead of rendering it on the page.

If you want to publish this project: Do not publish this frontend-only version. Move the Mistral call and credential to a backend first.

JunoTroubleshooting Check the VITE_ name, where .env sits, the model ID, and the browser Console, then restart. Change one thing at a time.

Do not publish this version, however well it runs on your machine.

JunoTroubleshooting Separate an unresolved process.env read from provider authorization and model availability, since each produces a different error. A page that reaches your browser confirms only that the code compiled, not that a request succeeded.

JunoTroubleshooting Check the Vite variable first, then SDK startup, model access, and the loop. A renamed model and a rejected key both show up as a failed request but need different fixes, so read the response body before you edit anything.