Executando Intro to Mistral AI localmente

Use esta página para executar o projeto Intro to Mistral AI extraído no seu computador. Você adapta a busca de chave de API exclusiva do Scrimba para Vite, inicia o projeto e encontra o resultado da chamada de função no console do navegador. O tratamento de chaves aqui segue o mesmo padrão em Executando Chef Claude localmente, então as duas páginas resolvem o mesmo problema para provedores diferentes.

O que você precisa primeiro

Instale uma versão LTS suportada do Node.js. A versão 24 é recomendada 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 não tiver uma, siga a configuração de chave Studio do Mistral, crie uma chave e copie-a quando for exibida. Você a adicionará ao arquivo de ambiente local mais adiante nesta página.

JunoO que você precisa primeiro Instale a versão LTS do Node.js, que traz npm com ele, e crie uma chave de API do Mistral. Copie a chave no momento em que Studio a exibir, porque essa é a única vez que você vê o valor completo. Eu já fechei esse diálogo muito rápido e precisei criar uma segunda chave mais de uma vez!

JunoO que você precisa primeiro Studio exibe uma chave nova uma vez e depois armazena apenas seu nome, então cole-a em algum lugar seguro antes de sair da página. Verifique se sua conta consegue acessar o modelo que sua lição baixada menciona, já que criação de chave e acesso ao modelo são coisas separadas. Uma chave de nível gratuito permite requisições suficientes para este projeto.

JunoO que você precisa primeiro O projeto executa com Vite e instala com npm, então a página pode começar com uma chave de placeholder e parecer completamente normal. Apenas o loop de chamada de função prova que a chave e o modelo funcionam juntos, e é por isso que um servidor de desenvolvimento que inicia sem erros não diz nada sobre sua conta no Mistral. Confirme que a credencial funciona antes de começar a depurar código que não está quebrado.

Abra a pasta do projeto

Abra um terminal na pasta extraída contendo 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 todos os comandos npm a partir dela. O arquivo de ambiente que você criará depois pertence à mesma pasta. A razão mais comum para uma configuração falhar neste ponto é executar os comandos da pasta errada, e um comando confirma em qual pasta você está.

JunoAbra a pasta do projeto Este é um projeto npm e Vite, então package.json diz a você o que npm start realmente executa. O próximo passo altera sua busca de chave exclusiva do Scrimba para que o app extraído leia seu arquivo de ambiente local em vez disso.

JunoAbra a pasta do projeto Leia os scripts no projeto extraído em vez de assumir os comandos npm usuais. Este download não inclui lockfile, então npm install resolve versões contra o registro cada vez e escreve o resultado localmente. Duas pessoas fazendo setup em dias diferentes podem obter versões de patch diferentes, o que vale a pena lembrar antes de culpar sua máquina por uma diferença.

Faça a chave de API funcionar no 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 browser padrão não fornece esse valor process.env. Altere 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 dele 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 browser. Adicionar uma chave ao Git por acidente não é desfeito deletando o arquivo, porque o valor fica no histórico do repositório, e o manual do Git cobre o hábito mais amplo em ignorando arquivos e boas práticas.

Esta chave é visível no navegador

O prefixo VITE_ propositalmente coloca a chave de API no bundle 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. Um aplicativo em produção precisa de um backend ou função serverless que mantenha a chave no servidor.

JunoFaça a chave de API funcionar no Vite Altere a busca de chave antiga, coloque uma chave temporária em .env, e mantenha esse arquivo fora do Git. O navegador ainda consegue ler esta chave, então use uma chave que você está disposto a deletar depois. Esta exposição é uma limitação de projetos frontend-only, não um erro em sua configuração.

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

JunoFaça a chave de API funcionar no Vite Vite insere a string de chave literal no JavaScript servido, então você pode abrir DevTools, procurar em Sources, e encontrar sua própria credencial lá em texto simples. Olhar para ela uma vez torna a regra concreta. O limite do backend para este projeto tem que cobrir todo o loop de chamada de função, não apenas a chave: o servidor mantém a credencial, executa as chamadas de ferramenta, e retorna apenas a resposta finalizada.

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, geralmente http://localhost:5173/. Na lição de chamada de função, abra as ferramentas de desenvolvedor do navegador e selecione Console. Uma resposta retornada do Mistral lá é o resultado de sucesso visível; a lição não renderiza esse resultado na página.

Reinicie Vite depois de alterar .env. Pare-o 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 lição de chamada de função imprime sua resposta lá em vez de na página. Uma página em branco é 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 lição de chamada de função relata ao Console, então mantenha DevTools aberto enquanto você testa.

JunoInstale e execute o projeto Um servidor Vite em execução prova que os pacotes instalaram e seu código-fonte editado compilou, e não prova nada além disso. Apenas uma requisição real confirma que Mistral aceita sua chave e o modelo da lição, então execute o exemplo de chamada de função antes de considerar a configuração finalizada. Inicialização e uma credencial funcional falham em lugares completamente diferentes.

Solução de problemas

process is not defined: A leitura de ambiente estilo Scrimba permanece em index.js. Substitua-a 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 está ao lado de package.json, e reinicie o projeto. Verifique se a chave ainda está ativa em sua conta Mistral.

O modelo está indisponível ou a requisição do SDK falha: O ZIP baixado fixa uma SDK Mistral mais antiga e pede por 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 altere o ID antes de alterar a versão pinada do SDK, já que um modelo renomeado é a causa mais comum.

Nada aparece na página: Abra o console do navegador. A lição representativa 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 frontend-only. Mova a chamada do Mistral e a credencial para um backend primeiro.

JunoSolução de problemas Verifique o nome VITE_, onde .env está, o ID do modelo, e o Console do navegador, depois reinicie. Trabalhe por um de cada vez em vez de alterar várias coisas simultaneamente. Não publique esta versão, por bem que ela execute em sua máquina.

JunoSolução de problemas Separe uma leitura de process.env não resolvida da autorização do provedor e disponibilidade do modelo, já que cada um produz um erro diferente. Compilar e completar uma requisição são pontos de verificação diferentes, e uma página que chega ao seu navegador confirma apenas o primeiro.

JunoSolução de problemas Verifique nesta ordem: a variável Vite primeiro, depois inicialização do SDK, depois acesso ao modelo, depois o loop de chamada de função. Um modelo renomeado e uma chave rejeitada aparecem como uma requisição falhada e precisam de correções opostas, então leia o corpo da resposta antes de editar qualquer coisa. Antes da implantação, as requisições se movem para um backend, o que remove esta classe inteira de problema junto com a chave exposta.