Running Chef Claude locally

Use this page to run the extracted Chef Claude recipe project from Learn React on your computer and get a recipe with your own Anthropic key. Three things differ from Scrimba's editor: the install needs one extra flag, the key reads in ai.js need Vite's syntax, and the Anthropic model the project names has been retired. 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. Your version numbers may be different:

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

You also need an Anthropic API key, because the app asks Anthropic for its recipe. Create a key you will delete when you are done, and set a low monthly spending limit in the Anthropic Console: this project calls Anthropic straight from the browser, so the key ends up in the page.

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 create an Anthropic API key and set a low spending limit on your account. That one key is all this project needs.

JunoWhat you need firstai.js builds the Anthropic client as soon as the page loads, but sends nothing until you click Get a recipe. So the page can look fine with a wrong key; only a recipe tells you the key works.

JunoWhat you need first The Anthropic client is created with dangerouslyAllowBrowser: true, which is the SDK's own warning that the key travels with the page.

Install the packages

Open a terminal in the extracted Chef Claude folder. It is the one containing package.json and ai.js:

$ cd path-to-your-extracted-project

A plain npm install stops here with an ERESOLVE error, because the project uses a prerelease of React 19 that one of its packages does not accept. Add one flag instead:

$ npm install --legacy-peer-deps

npm finishes by reporting how many packages it added.

JunoInstall the packages Open the terminal in the folder that contains package.json, then run npm install --legacy-peer-deps. npm ends by saying how many packages it added.

The flag sounds like a warning, but it is the correct install for this project. If npm says it cannot find package.json, you are in the wrong folder.

JunoInstall the packagesreact-markdown 9.0.1, which renders the recipe, asks for react 18 or newer, and npm treats 19.0.0-rc as outside that range. The flag lets npm install the React and react-markdown versions the course pinned instead of refusing the whole tree.

JunoInstall the packages--legacy-peer-deps skips the peer-dependency enforcement npm has applied since version 7. Don't upgrade or replace the React packages instead, because that gives you a different project from the one in the course.

Change three lines in ai.js

Scrimba's editor fills in process.env.ANTHROPIC_API_KEY and process.env.HF_ACCESS_TOKEN for you. The browser has no process, and Vite does not create one, so both reads must change, even the Hugging Face one the app never calls: ai.js runs both as soon as it loads.

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)

Vite hands browser code only the variables whose names start with VITE_, which is why both names gain that prefix.

The third line is the model. In the getRecipeFromChefClaude function, the project asks for claude-3-haiku-20240307, which Anthropic has retired. Change:

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

to Anthropic's named replacement:

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

The rest of the request stays as the course wrote it.

JunoChange three lines in ai.js In ai.js, change both key reads to the import.meta.env forms, then change the model name.

Change both reads even though the app only uses Anthropic; one old read left behind is enough to make the page blank.

JunoChange three lines in ai.js When Vite starts, it replaces each import.meta.env.VITE_... read with the value from .env. A name without the prefix is hidden from browser code, so a missing prefix shows up as an undefined key, not as an error at startup.

JunoChange three lines in ai.js A leftover process.env throws while ai.js is still loading, before React draws anything, which is why the whole page goes blank rather than just the recipe failing.

Add your key to .env

Create .env beside package.json and put your key in it:

VITE_ANTHROPIC_API_KEY=your-anthropic-key-here

Create .gitignore beside package.json and add:

.env
node_modules/

A key that reaches a Git repository stays in its history even after you delete the file. The Git handbook covers the habit in ignoring files and good habits.

This key is visible in the browser

Vite writes every VITE_ value into the code it sends to the browser, so anyone who opens this page can read your key. Keep this version on your own computer: never deploy or share it, and never commit .env. A version you publish needs a backend or serverless function that keeps the key on the server.

JunoAdd your key to .env Make a file called .env next to package.json with your key on one line, then list .env in .gitignore so Git never saves it.

JunoAdd your key to .env Vite reads .env when it starts and watches it after that. Save a change and the terminal says .env changed, restarting server, so the next request uses the new value without you stopping anything.

JunoAdd your key to .env The VITE_ prefix is an exposure allowlist, not secret storage: the key sits in the module Vite serves and in the header of every request the browser sends to Anthropic.

Start the app and get a recipe

Start the development server:

$ npm start

Vite may first print a warning that begins (!) Your Vite config uses features. It does not stop the app. Below it, Vite prints the address to open:

  VITE v8.3.4  ready in 92 ms

  ➜  Local:   http://localhost:5173/

Open the exact Local address. The page starts with five ingredients already listed, so Get a recipe is showing straight away. Click it and wait a few seconds: the page shows no progress while Anthropic writes. A recipe under Chef Claude Recommends means your key and the model both work.

If nothing appears after about 20 seconds, open your browser's developer tools (F12, or Cmd+Option+J in Chrome on a Mac) and read the Console tab. The reason is printed there, not on the page; the troubleshooting below matches each message.

Stop the project with Ctrl+C. You don't need to restart it after editing .env: Vite notices the change and restarts itself.

JunoStart the app and get a recipe Run npm start, ignore the config warning if it appears, and open the Local address. Click Get a recipe and give it a few seconds.

If no recipe appears, open the Console in your browser's developer tools and look for the first red line.

JunoStart the app and get a recipe The page opening only proves that Vite and React work. The recipe needs a request from your browser to Anthropic to succeed, so a page with no recipe is a key, account or model question, not a build one.

JunoStart the app and get a recipegetRecipe awaits the Anthropic call with no try/catch, so a rejected request becomes an uncaught promise rejection in the console and the recipe state never changes. That is why failures are silent on the page.

Troubleshooting

ERESOLVE unable to resolve dependency tree: Run npm install --legacy-peer-deps instead. Don't delete or replace the React packages to get past the install.

The page is blank, and the console says process is not defined: A process.env read is still in ai.js. Replace both with the import.meta.env.VITE_... forms shown above and save the file.

Nothing happens after Get a recipe, and the console says Could not resolve authentication method: The browser has no key. Check that .env is beside package.json and that the name is exactly VITE_ANTHROPIC_API_KEY, save the file, and click Get a recipe again once Vite says it restarted.

The console shows 401 with invalid x-api-key: The key arrived, but Anthropic did not accept it. Copy it again from your Anthropic account and check that it has not been deleted.

The console says your credit balance is too low: The key works, but the account has no credit to spend. Add credit under Billing in the Anthropic Console, then click Get a recipe again.

The console says the model is not found: Check that ai.js asks for claude-haiku-4-5-20251001, not claude-3-haiku-20240307. If Anthropic later retires that model too, use the replacement its model deprecations page names.

JunoTroubleshooting Find the first red line in the Console and match it to a bold heading above. A blank page means a process.env read is still in ai.js.

JunoTroubleshooting Keep three problems apart: npm's peer-dependency check, Vite's key replacement, and Anthropic accepting the key, the account and the model. They fail in that order, and each shows its error in a different place.

JunoTroubleshooting A 401 means the request reached Anthropic with a key it rejected, so Vite's replacement worked. An undefined key gives the SDK nothing to send, so it throws before any request leaves the browser.

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