Running Chef Claude locally

Use this page to run the extracted Chef Claude recipe project from Learn React on your computer and generate a recipe with your own provider key. Before it runs, the project needs its key reads changed for Vite, its retired Anthropic model replaced, and an install that accepts the older React dependencies it declares. If the React side of the project is new to you, the React handbook starts from the beginning.

What you need first

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

Check that both commands work:

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

You also need an API key for the provider you use. The course code includes an Anthropic route and a Hugging Face route. Provider signup, model availability, and pricing can change, so use the provider's current account instructions. Whichever route you choose, use a temporary key with a low spending limit, because the project calls the provider from browser code.

JunoWhat you need first Install the LTS version of Node.js, which includes npm, and check that node --version and npm --version both print a version.

Then get a key for the provider route you plan to use. Make it a temporary key with a low spending limit, because this project calls the provider straight from the browser.

JunoWhat you need first Pick the Anthropic or Hugging Face route before you set up credentials. You need both keys only if you plan to run both implementations.

Signup flows, model availability, and pricing change over time, so follow the provider's current instructions rather than the recording.

JunoWhat you need first This is a Vite and React project with two optional provider clients. The page starts and looks normal even with a placeholder key, so only a rendered recipe proves that the key is valid, the account is active, and the model is available. Each of those can fail on its own.

Open the project folder

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

$ cd path-to-your-downloaded-project

Before running anything, open package.json. Its scripts block shows the commands the project expects, and dependencies records the exact React and provider packages this snapshot was built against.

JunoOpen the project folder Work in the extracted folder containing package.json; every command and file on this page belongs there.

If a command reports that a file is missing, check which folder the terminal is in before you change anything else.

JunoOpen the project folder The project runs on npm and Vite. Its provider calls still read keys from Scrimba's environment, which exists only inside Scrimba's editor, so the next section changes those reads.

JunoOpen the project folder Read package.json before changing any file. scripts is what npm start resolves to, and dependencies pins the versions this snapshot was built against, React prerelease included. That read explains the install flag and the provider keys before either one surprises you.

Make the environment variables work in Vite

Scrimba's editor understands process.env.ANTHROPIC_API_KEY and process.env.HF_ACCESS_TOKEN. A local Vite app does not provide that process.env object in the browser.

Open ai.js and change the Anthropic value from:

apiKey: process.env.ANTHROPIC_API_KEY,

to:

apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,

Change the Hugging Face value from:

const hf = new HfInference(process.env.HF_ACCESS_TOKEN)

to:

const hf = new HfInference(import.meta.env.VITE_HF_ACCESS_TOKEN)

The VITE_ prefix is required because Vite exposes only specially prefixed environment variables to browser code.

Replace the retired Anthropic model

The downloaded Anthropic function uses the retired model claude-3-haiku-20240307. In the getRecipeFromChefClaude function, change:

model: "claude-3-haiku-20240307",

to Anthropic's documented replacement:

model: "claude-haiku-4-5-20251001",

The rest of the course request can stay unchanged.

Add your keys to .env

Create .env beside package.json. Add the value for the route you use:

VITE_ANTHROPIC_API_KEY=your-anthropic-key-here
VITE_HF_ACCESS_TOKEN=your-hugging-face-token-here

You can omit the unused value. The project calls getRecipeFromChefClaude by default, so if you leave that function as it is, you need the Anthropic value and the model change above. To use the Hugging Face route, which calls a Mistral model, follow the course's provider-switching lesson and confirm that its Hugging Face model is still available.

Create .gitignore beside package.json and add:

.env
node_modules/

Keeping .env out of Git matters as much as the browser exposure described in the warning below, because a key that reaches the repository history stays there even after you delete the file. The Git handbook covers the wider habit in ignoring files and good habits.

These keys are visible in the browser

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

JunoMake the environment variables work in Vite In ai.js, change both key reads to the import.meta.env forms and replace the retired Anthropic model. Then put the key you use in .env and list that file in .gitignore.

The key is still visible in the browser, so keep this version on your own computer.

JunoMake the environment variables work in Vite Vite client code reads import.meta.env and exposes only values whose names start with VITE_. Set the variable that matches the provider function the app calls, and use the current Haiku replacement for the default Anthropic route.

JunoMake the environment variables work in Vite The VITE_ prefix is an exposure allowlist, not secret storage: Vite writes each value into the bundle. A deployable version moves provider traffic behind a server boundary.

Install and run the project

The extracted project uses a prerelease version of React 19 alongside a dependency whose peer range does not accept that prerelease. A normal npm install therefore stops with an ERESOLVE error. Install this course snapshot with its peer check relaxed:

$ npm install --legacy-peer-deps
$ npm start

Vite prints a local address similar to:

  VITE ready

  Local: http://localhost:5173/

Open the exact Local URL. If 5173 is busy, Vite chooses another port and prints it. Add enough ingredients to request a recipe. A rendered recipe confirms two things: the local page works, and the selected provider key and model work. Stop the project with Ctrl+C.

Restart Vite after changing .env.

JunoInstall and run the project Run npm install --legacy-peer-deps, then npm start, and open the Local URL it prints. Add ingredients and ask for a recipe; a recipe on the page means everything works. Press Ctrl+C to stop.

The flag sounds like a warning, but it is the correct install for this project.

JunoInstall and run the project The relaxed peer check handles the known React prerelease mismatch without replacing course dependencies. Restart the server after every .env change, since Vite reads those values at startup.

JunoInstall and run the project--legacy-peer-deps skips the peer-dependency enforcement npm has applied by default since version 7 and installs the tree as declared. That is safe for a course snapshot pinned to a React prerelease. Do not upgrade or replace the React packages instead, because that creates a different project from the one in the course.

Troubleshooting

ERESOLVE unable to resolve dependency tree: Use npm install --legacy-peer-deps for this extracted project. Do not delete or replace React packages to get past the install.

process is not defined: One or both Scrimba-style process.env values remain in ai.js. Replace them with the import.meta.env.VITE_... forms shown above, then restart Vite.

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

Anthropic says the model is not found or retired: Confirm that ai.js uses claude-haiku-4-5-20251001, not claude-3-haiku-20240307. If Anthropic later retires the replacement, use the successor named in its current model deprecation documentation.

Hugging Face rejects the Mistral model: Confirm that the model in ai.js is available through the inference provider connected to your account. A model page can remain downloadable even when it is not available through your chosen hosted inference provider.

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

JunoTroubleshooting Use the install flag when you see ERESOLVE, replace every old key read when you see process is not defined, and restart the project after editing .env.

Most of these errors name the fix in the message itself, so read the whole message before you change anything.

JunoTroubleshooting Keep three problems apart: the peer-dependency conflict, Vite's key substitution, and provider model availability. A page that opens still needs a successful provider request before it shows a recipe, so treat a missing recipe as a provider question rather than a build one.

JunoTroubleshooting Check installation, Vite's key substitution, and provider model availability separately. Before deployment, move the provider request and key to a backend; no variable name in frontend code can keep a value secret.

Take Learn React on ScrimbaChef Claude is one of the projects you build in Scrimba's free Learn React course.→