Executando Chef Claude localmente

Use esta página para rodar o projeto de receita Chef Claude extraído de Learn React no seu computador e obter uma receita com sua própria chave Anthropic. Três coisas diferem do editor do Scrimba: a instalação precisa de um flag extra, as leituras de chave em ai.js precisam da sintaxe do Vite, e o modelo Anthropic que o projeto usa foi descontinuado. Se a parte React do projeto é novidade para você, o manual React começa do zero.

O que você precisa primeiro

Instale uma versão LTS suportada do Node.js. Node 24 é recomendado e inclui npm.

Verifique se os dois comandos funcionam. Seus números de versão podem ser diferentes:

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

Você também precisa de uma chave de API Anthropic, porque o app pede uma receita ao Anthropic. Crie uma chave que você vai deletar quando terminar e configure um limite mensal baixo de gastos no Console Anthropic: este projeto chama o Anthropic direto do navegador, então a chave fica exposta na página.

JunoO que você precisa primeiro Instale a versão LTS do Node.js, que inclui npm, e verifique que node --version e npm --version imprimem uma versão.

Depois crie uma chave de API Anthropic e configure um limite de gastos baixo na sua conta. Essa única chave é tudo que este projeto precisa.

JunoO que você precisa primeiroai.js cria o cliente Anthropic assim que a página carrega, mas não envia nada até você clicar em Get a recipe. Então a página pode parecer correta mesmo com uma chave errada; apenas uma receita mostra que a chave funciona.

JunoO que você precisa primeiro O cliente Anthropic é criado com dangerouslyAllowBrowser: true, que é o aviso próprio da SDK de que a chave viaja com a página.

Instale os pacotes

Abra um terminal na pasta Chef Claude extraída. É a que contém package.json e ai.js:

$ cd path-to-your-extracted-project

Um simples npm install para com um erro ERESOLVE, porque o projeto usa um prerelease do React 19 que um de seus pacotes não aceita. Adicione um flag em vez disso:

$ npm install --legacy-peer-deps

npm termina reportando quantos pacotes foram adicionados.

JunoInstale os pacotes Abra o terminal na pasta que contém package.json, depois execute npm install --legacy-peer-deps. npm termina dizendo quantos pacotes foram adicionados.

O flag parece um aviso, mas é a instalação correta para este projeto. Se npm diz que não consegue encontrar package.json, você está na pasta errada.

JunoInstale os pacotesreact-markdown 9.0.1, que renderiza a receita, pede react 18 ou mais novo, e npm trata 19.0.0-rc como fora desse intervalo. O flag deixa npm instalar as versões React e react-markdown que o curso fixou em vez de recusar a árvore toda.

JunoInstale os pacotes--legacy-peer-deps pula a verificação de peer-dependency que npm aplicou desde a versão 7. Não atualize ou substitua os pacotes React em vez disso, porque você fica com um projeto diferente do que está no curso.

Altere três linhas em ai.js

O editor Scrimba preenche process.env.ANTHROPIC_API_KEY e process.env.HF_ACCESS_TOKEN para você. O navegador não tem process, e Vite não cria um, então ambas as leituras devem mudar, até mesmo a do Hugging Face que o app nunca chama: ai.js executa ambas assim que carrega.

Abra ai.js e mude o valor Anthropic de:

apiKey: process.env.ANTHROPIC_API_KEY,

para:

apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,

Mude o valor Hugging Face de:

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

para:

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

Vite passa para código do navegador apenas as variáveis cujos nomes começam com VITE_, e é por isso que ambos os nomes ganham esse prefixo.

A terceira linha é o model. Na função getRecipeFromChefClaude, o projeto pede claude-3-haiku-20240307, que Anthropic descontinuou. Mude:

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

para a substituição nomeada da Anthropic:

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

O resto da requisição fica como o curso escreveu.

JunoAltere três linhas em ai.js Em ai.js, mude ambas as leituras de chave para as formas import.meta.env, depois mude o nome do model.

Mude ambas as leituras mesmo que o app use apenas Anthropic; uma leitura antiga deixada para trás é suficiente para deixar a página em branco.

JunoAltere três linhas em ai.js Quando Vite inicia, ele substitui cada leitura import.meta.env.VITE_... pelo valor de .env. Um nome sem o prefixo é oculto do código do navegador, então um prefixo ausente aparece como uma chave undefined, não como um erro na inicialização.

JunoAltere três linhas em ai.js Uma leitura process.env deixada para trás lança um erro enquanto ai.js ainda está carregando, antes de React desenhar qualquer coisa, e é por isso que a página toda fica em branco em vez de apenas a receita falhar.

Adicione sua chave a .env

Crie .env ao lado de package.json e coloque sua chave nele:

VITE_ANTHROPIC_API_KEY=your-anthropic-key-here

Crie .gitignore ao lado de package.json e adicione:

.env
node_modules/

Uma chave que chega a um repositório Git fica no histórico mesmo depois que você deleta o arquivo. O manual Git cobre o hábito em ignorando arquivos e boas práticas.

Esta chave é visível no navegador

Vite escreve todo valor VITE_ no código que envia para o navegador, então qualquer um que abre esta página pode ler sua chave. Mantenha esta versão no seu próprio computador: nunca implemente ou compartilhe, e nunca faça commit de .env. Uma versão que você publica precisa de um backend ou função serverless que mantenha a chave no servidor.

JunoAdicione sua chave a .env Faça um arquivo chamado .env ao lado de package.json com sua chave em uma linha, depois liste .env em .gitignore para que Git nunca a salve.

JunoAdicione sua chave a .env Vite lê .env quando inicia e o observa depois disso. Salve uma mudança e o terminal diz .env changed, restarting server, então a próxima requisição usa o novo valor sem você parar nada.

JunoAdicione sua chave a .env O prefixo VITE_ é uma lista de permissões de exposição, não armazenamento seguro: a chave fica no módulo que Vite serve e no header de toda requisição que o navegador envia ao Anthropic.

Inicie o app e obtenha uma receita

Inicie o servidor de desenvolvimento:

$ npm start

Vite pode primeiro imprimir um aviso que começa com (!) Your Vite config uses features. Ele não para o app. Abaixo dele, Vite imprime o endereço para abrir:

  VITE v8.3.4  ready in 92 ms

  ➜  Local:   http://localhost:5173/

Abra o endereço Local exato. A página começa com cinco ingredientes já listados, então Get a recipe está aparecendo logo. Clique nele e espere alguns segundos: a página não mostra progresso enquanto Anthropic escreve. Uma receita sob Chef Claude Recommends significa que sua chave e o model funcionam.

Se nada aparecer após cerca de 20 segundos, abra as ferramentas de desenvolvedor do seu navegador (F12, ou Cmd+Option+J no Chrome em um Mac) e leia a aba Console. O motivo está impresso lá, não na página; a solução de problemas abaixo combina com cada mensagem.

Pare o projeto com Ctrl+C. Você não precisa reiniciá-lo depois de editar .env: Vite percebe a mudança e reinicia a si mesmo.

JunoInicie o app e obtenha uma receita Execute npm start, ignore o aviso de config se aparecer, e abra o endereço Local. Clique em Get a recipe e dê a ele alguns segundos.

Se nenhuma receita aparecer, abra o Console nas ferramentas de desenvolvedor do seu navegador e procure pela primeira linha vermelha.

JunoInicie o app e obtenha uma receita A página abrindo apenas prova que Vite e React funcionam. A receita precisa que uma requisição do seu navegador ao Anthropic seja bem-sucedida, então uma página sem receita é uma questão de chave, conta ou model, não de build.

JunoInicie o app e obtenha uma receitagetRecipe aguarda a chamada Anthropic sem try/catch, então uma requisição rejeitada vira uma promise rejection não capturada no console e o estado da receita nunca muda. É por isso que falhas são silenciosas na página.

Solução de problemas

ERESOLVE unable to resolve dependency tree: Execute npm install --legacy-peer-deps em vez disso. Não delete ou substitua os pacotes React para passar na instalação.

A página está em branco e o console diz process is not defined: Uma leitura process.env ainda está em ai.js. Substitua ambas pelas formas import.meta.env.VITE_... mostradas acima e salve o arquivo.

Nada acontece depois de Get a recipe e o console diz Could not resolve authentication method: O navegador não tem chave. Verifique que .env está ao lado de package.json e que o nome é exatamente VITE_ANTHROPIC_API_KEY, salve o arquivo e clique em Get a recipe novamente uma vez que Vite diz que reiniciou.

O console mostra 401 com invalid x-api-key: A chave chegou, mas Anthropic não aceitou. Copie novamente da sua conta Anthropic e verifique que ela não foi deletada.

O console diz que seu saldo de crédito é muito baixo: A chave funciona, mas a conta não tem crédito para gastar. Adicione crédito em Billing no Console Anthropic, depois clique em Get a recipe novamente.

O console diz que o model não foi encontrado: Verifique que ai.js pede claude-haiku-4-5-20251001, não claude-3-haiku-20240307. Se Anthropic descontinuar esse model também mais tarde, use a substituição que a página de deprecações de models dela nomeia.

JunoSolução de problemas Encontre a primeira linha vermelha no Console e combine com um heading em negrito acima. Uma página em branco significa que uma leitura process.env ainda está em ai.js.

JunoSolução de problemas Mantenha três problemas separados: a verificação de peer-dependency do npm, a substituição de chave do Vite e a aceitação da chave, conta e model pelo Anthropic. Eles falham nessa ordem e cada um mostra seu erro em um lugar diferente.

JunoSolução de problemas Um 401 significa que a requisição chegou ao Anthropic com uma chave que ele rejeitou, então a substituição do Vite funcionou. Uma chave undefined não dá nada ao SDK para enviar, então ele lança antes de qualquer requisição sair do navegador.

Faça Learn React no ScrimbaChef Claude é um dos projetos que você constrói no curso grátis Learn React do Scrimba.→