Executando Chef Claude localmente

Use esta página para executar o projeto de receitas Chef Claude extraído do Learn React no seu computador e gerar uma receita com sua própria chave de provedor. Antes de executar, o projeto precisa que suas leituras de chave sejam ajustadas para o Vite, que seu modelo Anthropic desatualizado seja substituído e que uma instalação seja feita aceitando as dependências React antigas que ele declara. Se o lado React do projeto é novo para você, o manual React começa do início.

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:

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

Você também precisa de uma chave de API para o provedor que usa. O código do curso inclui uma rota Anthropic e uma rota Hugging Face. Sinais, disponibilidade de modelos e preços podem mudar, então use as instruções atuais de conta do provedor. Qualquer que seja a rota escolhida, use uma chave temporária com um limite de gastos baixo, porque o projeto chama o provedor a partir do código do navegador.

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 obtenha uma chave para a rota do provedor que você planeja usar. Faça uma chave temporária com um limite de gastos baixo, porque este projeto chama o provedor diretamente do navegador.

JunoO que você precisa primeiro Escolha a rota Anthropic ou Hugging Face antes de configurar as credenciais. Você precisa de ambas as chaves apenas se planeja executar ambas as implementações.

Fluxos de cadastro, disponibilidade de modelos e preços mudam ao longo do tempo, então siga as instruções atuais do provedor em vez da gravação.

JunoO que você precisa primeiro Este é um projeto Vite e React com dois clientes provedores opcionais. A página inicia e parece normal mesmo com uma chave de espaço reservado, então apenas uma receita renderizada prova que a chave é válida, a conta está ativa e o modelo está disponível. Cada um desses pode falhar individualmente.

Abra a pasta do projeto

Abra um terminal na pasta Chef Claude extraída que contém package.json:

$ cd path-to-your-downloaded-project

Antes de executar qualquer coisa, abra package.json. Seu bloco scripts mostra os comandos que o projeto espera, e dependencies registra os pacotes React e provedor exatos com os quais este snapshot foi construído.

JunoAbra a pasta do projeto Trabalhe na pasta extraída que contém package.json; cada comando e arquivo nesta página pertence a ela.

Se um comando relatar que um arquivo está faltando, verifique em qual pasta o terminal está antes de alterar qualquer outra coisa.

JunoAbra a pasta do projeto O projeto é executado em npm e Vite. Suas chamadas de provedor ainda leem chaves do ambiente do Scrimba, que existe apenas dentro do editor do Scrimba, então a próxima seção altera essas leituras.

JunoAbra a pasta do projeto Leia package.json antes de alterar qualquer arquivo. scripts é para o que npm start se resolve, e dependencies fixa as versões com as quais este snapshot foi construído, incluindo a pré-lançamento do React. Essa leitura explica o sinalizador de instalação e as chaves de provedor antes que qualquer um deles o surpreenda.

Faça as variáveis de ambiente funcionarem no Vite

O editor do Scrimba entende process.env.ANTHROPIC_API_KEY e process.env.HF_ACCESS_TOKEN. Um app Vite local não fornece esse objeto process.env no navegador.

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)

O prefixo VITE_ é necessário porque o Vite expõe apenas variáveis de ambiente especialmente prefixadas para código de navegador.

Substitua o modelo Anthropic desatualizado

A função Anthropic baixada usa o modelo desatualizado claude-3-haiku-20240307. Na função getRecipeFromChefClaude, mude:

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

para a substituição documentada pelo Anthropic:

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

O restante da solicitação do curso pode permanecer inalterado.

Adicione suas chaves ao .env

Crie .env ao lado de package.json. Adicione o valor para a rota que usa:

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

Você pode omitir o valor não utilizado. O projeto chama getRecipeFromChefClaude por padrão, então se deixar essa função como está, você precisa do valor Anthropic e da mudança de modelo acima. Para usar a rota Hugging Face, que chama um modelo Mistral, siga a lição de alternância de provedor do curso e confirme que seu modelo Hugging Face ainda está disponível.

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

.env
node_modules/

Manter .env fora do Git é tão importante quanto a exposição do navegador descrita no aviso abaixo, porque uma chave que chega ao histórico do repositório fica lá mesmo depois que você delete o arquivo. O manual Git cobre o hábito mais amplo em ignorando arquivos e boas práticas.

Essas chaves são visíveis no navegador

O prefixo VITE_ coloca intencionalmente cada valor no pacote frontend. Use credenciais temporárias e restritas apenas para aprendizado local. Nunca implante ou compartilhe essa versão, e nunca faça commit de .env. Uma versão de produção precisa de um backend ou função serverless que mantém credenciais de provedor no servidor.

JunoFaça as variáveis de ambiente funcionarem no Vite Em ai.js, mude ambas as leituras de chave para as formas import.meta.env e substitua o modelo Anthropic desatualizado. Depois coloque a chave que usa em .env e liste esse arquivo em .gitignore.

A chave ainda é visível no navegador, então mantenha essa versão no seu próprio computador.

JunoFaça as variáveis de ambiente funcionarem no Vite Código cliente do Vite lê import.meta.env e expõe apenas valores cujos nomes começam com VITE_. Configure a variável que corresponde à função de provedor que o app chama, e use a substituição Haiku atual para a rota Anthropic padrão.

JunoFaça as variáveis de ambiente funcionarem no Vite O prefixo VITE_ é uma lista de permissões de exposição, não armazenamento secreto: o Vite escreve cada valor no pacote. Uma versão implantável move o tráfego de provedor atrás de um limite de servidor.

Instale e execute o projeto

O projeto extraído usa uma versão de pré-lançamento do React 19 junto com uma dependência cujo intervalo de peer não aceita esse pré-lançamento. Uma instalação normal de npm install portanto para com um erro ERESOLVE. Instale este snapshot do curso com sua verificação de peer relaxada:

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

O Vite imprime um endereço local similar a:

  VITE ready

  Local: http://localhost:5173/

Abra a URL Local exata. Se 5173 está ocupado, o Vite escolhe outra porta e a imprime. Adicione ingredientes suficientes para solicitar uma receita. Uma receita renderizada confirma duas coisas: a página local funciona e a chave e modelo do provedor selecionado funcionam. Pare o projeto com Ctrl+C.

Reinicie o Vite depois de alterar .env.

JunoInstale e execute o projeto Execute npm install --legacy-peer-deps, depois npm start, e abra a URL Local que ele imprime. Adicione ingredientes e peça uma receita; uma receita na página significa que tudo funciona. Pressione Ctrl+C para parar.

O sinalizador parece um aviso, mas é a instalação correta para este projeto.

JunoInstale e execute o projeto A verificação de peer relaxada lida com a incompatibilidade de pré-lançamento do React conhecida sem substituir dependências do curso. Reinicie o servidor após cada mudança de .env, já que o Vite lê esses valores na inicialização.

JunoInstale e execute o projeto--legacy-peer-deps ignora a imposição de dependência de peer que o npm tem aplicado por padrão desde a versão 7 e instala a árvore como declarada. Isso é seguro para um snapshot de curso fixado em uma pré-lançamento do React. Não atualize ou substitua os pacotes React, porque isso cria um projeto diferente do que está no curso.

Solução de problemas

ERESOLVE unable to resolve dependency tree: Use npm install --legacy-peer-deps para este projeto extraído. Não delete ou substitua pacotes React para passar da instalação.

process is not defined: Um ou ambos os valores process.env estilo Scrimba permanecem em ai.js. Substitua-os pelas formas import.meta.env.VITE_... mostradas acima, depois reinicie o Vite.

A chave é undefined ou a autenticação falha: Verifique o nome de variável exato VITE_, certifique-se que .env está ao lado de package.json, e reinicie o projeto. Confirme que a credencial está ativa na conta do provedor.

Anthropic diz que o modelo não foi encontrado ou está desatualizado: Confirme que ai.js usa claude-haiku-4-5-20251001, não claude-3-haiku-20240307. Se Anthropic depois desatualizar a substituição, use o sucessor nomeado em sua documentação atual de depreciação de modelo.

Hugging Face rejeita o modelo Mistral: Confirme que o modelo em ai.js está disponível através do provedor de inferência conectado à sua conta. Uma página de modelo pode permanecer baixável mesmo quando não está disponível através do provedor de inferência hospedado escolhido.

Se você quer publicar este projeto: Não publique essa versão apenas frontend. Mova a solicitação de IA e credencial para um backend primeiro.

JunoSolução de problemas Use o sinalizador de instalação quando vir ERESOLVE, substitua cada leitura de chave antiga quando vir process is not defined, e reinicie o projeto depois de editar .env.

A maioria desses erros nomeiam a correção na própria mensagem, então leia a mensagem toda antes de alterar qualquer coisa.

JunoSolução de problemas Separe três problemas: o conflito de dependência de peer, a substituição de chave do Vite e a disponibilidade de modelo do provedor. Uma página que abre ainda precisa de uma solicitação de provedor bem-sucedida antes de mostrar uma receita, então trate uma receita ausente como uma questão de provedor em vez de uma de compilação.

JunoSolução de problemas Verifique a instalação, a substituição de chave do Vite e a disponibilidade de modelo do provedor separadamente. Antes de implantação, mova a solicitação de provedor e chave para um backend; nenhum nome de variável em código frontend pode manter um valor secreto.

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