Running Chef Claude locally

Use this page to run the extracted Chef Claude recipe project from Learn React on your computer. You adapt the provider key used by its Vite app, install the older React dependencies it declares, and generate a recipe locally. 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; the project calls the provider from browser code.

JunoWhat you need first Install the LTS version of Node.js, which includes npm, and 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. Setting that limit takes a minute and has saved me from my own typos more than once!

JunoWhat you need first Pick the Anthropic or Hugging Face route before configuring credentials; you need both keys only if you plan to run both implementations. Signup flows, model availability, and pricing change over time, so trust the provider's current instructions rather than the recording. Deciding the route first means setting up exactly one credential instead of two.

JunoWhat you need first This is a Vite and React project with two optional provider clients, and the page starts and looks normal even when the key is a placeholder. A rendered recipe is the only real proof: valid key, live account, available model. Expect those three to fail independently, because they do, though rarely on the same day.

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. Errors caused by the wrong folder kept me stuck for hours when I started out!

JunoOpen the project folder The project runs on npm and Vite. Its extracted provider calls still expect Scrimba's environment variables, which you change in the next section; until then the code reads keys from an environment that only exists inside Scrimba's editor.

JunoOpen the project folder Read package.json before you change any file: scripts is what npm start resolves to, and dependencies records the exact versions this snapshot was built against, React prerelease included. That thirty-second read predicts the install flag and the provider keys before either one surprises you. I skip it about once a year, and the regret arrives about ten minutes later.

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 Change the key reads and retired Anthropic model in ai.js, add the key you use to .env, and keep that file out of Git. The key remains visible in the browser.

JunoMake the environment variables work in Vite Vite client code reads import.meta.env and exposes only prefixed values. Configure the variable matching 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. 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. Press Ctrl+C when you want to stop it. The flag sounds like a warning, and it is still the correct choice for this project, so use it without thinking you have broken something.

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 range enforcement npm applies by default from version 7, installing the dependency tree as written instead of refusing it. That is safe for a course snapshot pinned to a React prerelease, and it is the same flag that hides a real incompatibility in a project you maintain, so use it here and treat it with suspicion everywhere else.

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 page: 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 describe the fix inside the message itself. Read the whole message before you change anything, which took me far too long to learn!

JunoTroubleshooting Separate the peer-dependency conflict from Vite substitution and provider model availability. A page that opens still needs a successful provider request before it can display a recipe, so treat a blank result as a provider question rather than a build one.

JunoTroubleshooting Check installation, Vite's key substitution, and provider model availability separately, because all three fail with a page that loads and does nothing. A retired model and a rejected key look identical in the interface and quite different in the network response. Before you deploy anything, move the request and the key to a backend, because no variable name in frontend code can keep a value secret.