Executando Chef Claude localmente

Use esta página para executar o projeto de receitas do Chef Claude extraído do Learn React no seu computador. Você adapta a chave do provedor usada pelo seu app Vite, instala as dependências React antigas que ele declara e gera uma receita localmente. Se o lado React do projeto for novo para você, o manual React começa do zero.

O que você precisa primeiro

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

Verifique que ambos os 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. O cadastro do provedor, disponibilidade de modelos e preços podem mudar, então use as instruções de conta atuais do provedor. Qualquer que seja a rota escolhida, use uma chave temporária com um limite de gastos baixo; 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 obtenha uma chave para a rota do provedor que planeja usar. Faça uma chave temporária com um limite de gastos baixo, porque este projeto chama o provedor direto do navegador. Configurar esse limite leva um minuto e me salvou de meus próprios erros de digitação mais de uma vez!

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 planejar executar ambas as implementações. Os fluxos de cadastro, disponibilidade de modelos e preços mudam ao longo do tempo, então confie nas instruções atuais do provedor em vez da gravação. Decidir a rota primeiro significa configurar exatamente uma credencial em vez de duas.

JunoO que você precisa primeiro Este é um projeto Vite e React com dois clientes de provedor opcionais, e a página inicia e parece normal mesmo quando a chave é um espaço reservado. Uma receita renderizada é a única prova real: chave válida, conta ativa, modelo disponível. Espere que esses três falhem independentemente, porque falham, embora raramente no mesmo dia.

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 exatos React e do provedor contra 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 lá. Se um comando informar que um arquivo está faltando, verifique em qual pasta o terminal está antes de mudar qualquer outra coisa. Erros causados pela pasta errada me deixaram preso por horas quando comecei!

JunoAbra a pasta do projeto O projeto é executado com npm e Vite. Suas chamadas de provedor extraídas ainda esperam as variáveis de ambiente da Scrimba, que você muda na próxima seção; até então o código lê chaves de um ambiente que existe apenas dentro do editor da Scrimba.

JunoAbra a pasta do projeto Leia package.json antes de alterar qualquer arquivo: scripts é o que npm start se resolve, e dependencies registra as versões exatas contra as quais este snapshot foi construído, incluindo pré-lançamento do React. Essa leitura de trinta segundos prevê a flag de instalação e as chaves do provedor antes que qualquer uma delas o surpreenda. Pulo cerca de uma vez por ano, e o arrependimento chega cerca de dez minutos depois.

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

O editor da 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 altere o valor Anthropic de:

apiKey: process.env.ANTHROPIC_API_KEY,

para:

apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,

Altere 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_ é obrigatório porque o Vite expõe apenas variáveis de ambiente especialmente prefixadas ao código do navegador.

Substitua o modelo Anthropic descontinuado

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

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

para a substituição documentada da Anthropic:

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

O resto 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 você 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 usado. 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 comutação 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ê deleta o arquivo. O manual Git cobre o hábito mais amplo em ignorando arquivos e boas práticas.

Estas chaves são visíveis no navegador

O prefixo VITE_ deliberadamente coloca cada valor no bundle do frontend. Use credenciais temporárias e restritas apenas para aprendizado local. Nunca implante ou compartilhe esta versão, e nunca faça commit de .env. Uma versão de produção precisa de um backend ou função serverless que mantenha as credenciais do provedor no servidor.

JunoFaça as variáveis de ambiente funcionarem no Vite Altere as leituras de chave e o modelo Anthropic descontinuado em ai.js, adicione a chave que usa ao .env, e mantenha esse arquivo fora do Git. A chave permanece visível no navegador.

JunoFaça as variáveis de ambiente funcionarem no Vite O código cliente Vite lê import.meta.env e expõe apenas valores prefixados. Configure a variável correspondente à função do 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 seguro. Uma versão implantável move o tráfego do provedor para trás de um limite de servidor.

Instale e execute o projeto

O projeto extraído usa uma versão pré-lançamento do React 19 junto com uma dependência cuja faixa de peer não aceita esse pré-lançamento. Um npm install normal, 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 semelhante a:

  VITE ready

  Local: http://localhost:5173/

Abra a URL Local exata. Se 5173 estiver 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 do provedor selecionado e o modelo funcionam. Interrompa o projeto com Ctrl+C.

Reinicie o Vite após alterar .env.

JunoInstale e execute o projeto Execute npm install --legacy-peer-deps, depois npm start e abra a URL Local que ele imprime. Pressione Ctrl+C quando quiser interrompê-lo. A flag parece um aviso, e ainda é a escolha correta para este projeto, então use-a sem pensar que quebrou algo.

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

JunoInstale e execute o projeto--legacy-peer-deps pula a execução de intervalo de dependência de peer que npm aplica por padrão a partir da versão 7, instalando a árvore de dependência como escrita em vez de recusá-la. Isso é seguro para um snapshot de curso fixado em um pré-lançamento do React, e é a mesma flag que oculta uma incompatibilidade real em um projeto que você mantém, então use-a aqui e trate-a com suspeita em qualquer outro lugar.

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 pela instalação.

process is not defined: Um ou ambos os valores process.env no 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 exato da variável VITE_, certifique-se de que .env está ao lado de package.json, e reinicie o projeto. Confirme se a credencial está ativa na conta do provedor.

Anthropic diz que o modelo não foi encontrado ou está descontinuado: Confirme que ai.js usa claude-haiku-4-5-20251001, não claude-3-haiku-20240307. Se Anthropic descontinuar a substituição mais tarde, use o sucessor nomeado em sua documentação atual de descontinuaçã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 de seu provedor de inferência hospedada escolhido.

Se você quiser publicar esta página: Não publique esta versão apenas de frontend. Mova a solicitação de IA e a credencial para um backend primeiro.

JunoSolução de problemas Use a flag de instalação quando você vê ERESOLVE, substitua cada leitura de chave antiga quando você vê process is not defined, e reinicie o projeto após editar .env. A maioria desses erros descreve a correção dentro da própria mensagem. Leia a mensagem inteira antes de mudar qualquer coisa, o que levou muito tempo para eu aprender!

JunoSolução de problemas Separe o conflito de dependência de peer da substituição do Vite e da disponibilidade do modelo do provedor. Uma página que abre ainda precisa de uma solicitação de provedor bem-sucedida antes de poder exibir uma receita, então trate um resultado em branco como uma pergunta do provedor em vez de uma do build.

JunoSolução de problemas Verifique instalação, substituição de chave do Vite e disponibilidade do modelo do provedor separadamente, porque todos os três falham com uma página que carrega e não faz nada. Um modelo descontinuado e uma chave rejeitada parecem idênticos na interface e bem diferentes na resposta de rede. Antes de implantar qualquer coisa, mova a solicitação e a chave para um backend, porque nenhum nome de variável no código frontend pode manter um valor secreto.