Executando Intro to Mistral AI localmente

Use esta página para executar o projeto Intro to Mistral AI extraído no seu computador. O projeto lê sua chave de API da forma como o Scrimba a fornece, então uma linha muda antes de rodar em Vite, e o resultado da chamada de função aparece no console do navegador. O tratamento da chave segue o mesmo padrão de Executando Chef Claude localmente, que resolve o mesmo problema para um provedor diferente.

O que você precisa antes

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

Verifique se Node e npm estão disponíveis:

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

Você também precisa de uma chave de API do Mistral. Se ainda não tem uma, siga o Setup de chave do Studio do Mistral, crie uma chave e copie quando ela for exibida. Você a adicionará ao arquivo de ambiente local mais adiante nesta página.

JunoO que você precisa antes Instale a versão LTS do Node.js, que vem com npm, e crie uma chave de API do Mistral.

Copie a chave assim que o Studio a exibir e guarde-a em um local seguro até adicionar ao .env.

JunoO que você precisa antes Criar uma chave e ter acesso a um modelo são coisas separadas, então verifique se sua conta do Mistral consegue usar o modelo que sua aula baixada usa.

JunoO que você precisa antes A página pode iniciar com uma chave provisória e parecer completamente normal. Apenas o loop de chamada de função prova se a chave e o modelo funcionam juntos, então confirme que a credencial funciona antes de debugar código que não está quebrado.

Abra a pasta do projeto

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

$ cd path-to-your-downloaded-project

JunoAbra a pasta do projeto Trabalhe na pasta extraída que contém package.json e execute todo comando npm de lá. O arquivo .env que você criará depois também fica nessa mesma pasta.

JunoAbra a pasta do projeto Este é um projeto npm e Vite, então package.json informa o que npm start executa. O próximo passo muda sua leitura de chave exclusiva do Scrimba para que a aplicação leia seu arquivo de ambiente local.

JunoAbra a pasta do projeto O download não tem lockfile, então npm install resolve versões no registro e as registra localmente. Duas configurações em dias diferentes podem ter versões patch diferentes, o que vale a pena descartar antes de culpar sua máquina por uma diferença.

Faça a chave de API funcionar em Vite

O index.js baixado lê a chave com a sintaxe de ambiente do Scrimba:

const client = new MistralClient(process.env.MISTRAL_API_KEY)

Um projeto Vite no navegador padrão não fornece esse valor process.env. Mude a linha para:

const client = new MistralClient(import.meta.env.VITE_MISTRAL_API_KEY)

Crie .env ao lado de package.json:

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

Crie .gitignore ao lado e adicione:

.env
node_modules/

O prefixo VITE_ é obrigatório porque Vite expõe apenas variáveis de ambiente com prefixo especial para código no navegador. Ignorar .env é importante porque uma chave adicionada ao Git acidentalmente não é removida deletando o arquivo: o valor fica no histórico do repositório. O manual do Git aborda o hábito mais amplo em ignorando arquivos e boas práticas.

Esta chave é visível no navegador

O prefixo VITE_ coloca propositalmente a chave de API no bundle do frontend. Use uma chave temporária e restrita apenas para aprendizado local. Nunca implante ou compartilhe esta versão e nunca faça commit de .env. Uma aplicação em produção precisa de um backend ou função serverless que mantém a chave no servidor.

JunoFaça a chave de API funcionar em Vite Mude a leitura de chave antiga, coloque uma chave temporária em .env e mantenha esse arquivo fora do Git.

O navegador ainda consegue ler essa chave, então use uma que você esteja disposto a deletar depois. Essa exposição é uma limitação de projetos apenas frontend, não um erro na sua configuração.

JunoFaça a chave de API funcionar em Vite Código cliente do Vite lê import.meta.env e expõe apenas variáveis com prefixo VITE_, é por isso que a renomeação importa. Reinicie o servidor depois de editar .env, porque os valores são lidos na inicialização.

JunoFaça a chave de API funcionar em Vite Vite inline a string da chave no JavaScript servido, então uma busca em DevTools Sources a encontra em texto plano. Uma versão com backend tem que executar todo o loop de chamada de função no servidor, não apenas manter a chave.

Instale e execute o projeto

Instale as dependências baixadas e inicie Vite:

$ npm install
$ npm start

Abra a URL exata Local que Vite imprime, normalmente http://localhost:5173/. Na aula de chamada de função, abra as ferramentas de desenvolvedor do seu navegador e selecione Console. Uma resposta do Mistral retornada lá é o resultado de sucesso visível; a aula não renderiza esse resultado na página.

Reinicie Vite após mudar .env. Interrompa com Ctrl+C.

JunoInstale e execute o projeto Execute npm install, depois npm start, e abra a URL Local que ele imprime. Depois abra o Console do navegador, porque a aula de chamada de função imprime sua resposta lá.

Uma página aparentemente vazia é o resultado esperado, não uma falha.

JunoInstale e execute o projeto Use o endereço exato que Vite imprime em vez de uma porta memorizada e reinicie após mudanças de ambiente. A aula reporta ao Console, então mantenha DevTools aberto enquanto testa.

JunoInstale e execute o projeto Um servidor Vite rodando prova que os pacotes instalaram e o código editado compilou, e nada mais. Apenas uma requisição real confirma que Mistral aceita sua chave e o modelo da aula, então execute o exemplo de chamada de função antes de considerar a configuração completa.

Solução de problemas

process is not defined: A leitura de ambiente estilo Scrimba permanece em index.js. Substitua pela forma import.meta.env.VITE_MISTRAL_API_KEY acima e reinicie Vite.

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

O modelo não está disponível ou a requisição do SDK falha: O projeto baixado fixa uma SDK Mistral antiga e pede mistral-large-latest. SDKs de provedor e catálogos de modelo mudam. Compare o ID do modelo em index.js contra os modelos listados na documentação do Mistral e mude o ID antes de mudar a versão fixada da SDK, já que um modelo renomeado é a causa mais comum.

Nada aparece na página: Abra o console do navegador. A aula de chamada de função registra sua resposta final lá em vez de renderizá-la na página.

Se você quiser publicar este projeto: Não publique esta versão apenas frontend. Mude a chamada Mistral e credencial para um backend primeiro.

JunoSolução de problemas Verifique o nome VITE_, onde .env fica, o ID do modelo e o Console do navegador, depois reinicie. Mude uma coisa por vez.

Não publique esta versão, por bem que rode na sua máquina.

JunoSolução de problemas Separe uma leitura process.env não resolvida de autorização de provedor e disponibilidade de modelo, já que cada uma produz um erro diferente. Uma página que chega ao seu navegador confirma apenas que o código compilou, não que uma requisição funcionou.

JunoSolução de problemas Verifique a variável Vite primeiro, depois inicialização da SDK, acesso a modelo e o loop. Um modelo renomeado e uma chave rejeitada ambos aparecem como uma requisição falhada mas precisam de correções diferentes, então leia o corpo da resposta antes de editar qualquer coisa.