Rodando Intro to Mistral AI localmente

Use esta página para rodar o projeto Intro to Mistral AI extraído no seu computador e obter uma resposta do Mistral com sua própria chave. Duas coisas diferem do editor do Scrimba: uma linha em index.js deve ler a chave do jeito que o Vite faz, e a resposta aparece no console do seu navegador, não na página. O projeto faz a pergunta ao Mistral assim que a página carrega, então não há botão para clicar.

O que você precisa antes

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

Verifique se ambos os 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 do Mistral, porque o projeto pede uma resposta ao Mistral. Crie uma no console do Mistral seguindo os passos da chave de API do Mistral. Dê a ela uma data de expiração alguns dias à frente e copie-a imediatamente: o Mistral mostra a chave completa apenas uma vez. Este projeto chama o Mistral pelo navegador, então a chave fica na página.

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

Depois crie uma chave de API do Mistral com expiração curta e copie-a em algum lugar seguro antes de fechar o diálogo. Você não conseguirá vê-la novamente depois.

JunoO que você precisa antes Seu navegador faz todo o trabalho aqui: carrega a página, depois envia sua chave e a pergunta para o Mistral em si. Node e npm são necessários apenas para instalar os pacotes e rodar o Vite, que serve a página.

JunoO que você precisa antes Cada carregamento de página envia uma requisição, depois mais uma para cada função que o Mistral pede, até cinco, então cada recarga gasta requisições da sua chave.

Instale os pacotes

Abra um terminal na pasta do projeto extraído. É aquela que contém package.json, index.js e tools.js:

$ cd path-to-your-extracted-project
$ npm install

npm termina reportando quantos pacotes adicionou:

added 20 packages, and audited 21 packages in 9s

JunoInstale os pacotes Abra o terminal na pasta que contém package.json e rode npm install. Deve terminar dizendo quantos pacotes foram adicionados.

Se npm disser que não consegue encontrar package.json, você está na pasta errada.

JunoInstale os pacotes npm instala dois pacotes e o que eles precisam: o SDK JavaScript do Mistral, que envia as requisições de chat, e o Vite, que serve a página e depois coloca sua chave nela.

JunoInstale os pacotes O SDK é fixado na versão 0.1.3, a versão com a qual o curso foi gravado, enquanto Vite é latest. Mantenha a versão do SDK: versões principais mais novas exportam um cliente diferente, e o código do curso pararia de funcionar.

Mude uma linha em index.js

O editor do Scrimba preenche process.env.MISTRAL_API_KEY para você. O navegador não tem process, e o Vite não cria um, então a leitura da chave deve mudar.

Abra index.js e mude a terceira linha de:

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

para:

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

Vite entrega ao código do navegador apenas as variáveis cujos nomes começam com VITE_, e é por isso que o nome ganha esse prefixo. O resto do arquivo fica como o curso escreveu.

JunoMude uma linha em index.js Em index.js, substitua process.env.MISTRAL_API_KEY por import.meta.env.VITE_MISTRAL_API_KEY e salve o arquivo.

Essa é a única mudança de código que este projeto precisa.

JunoMude uma linha em index.js Quando o Vite serve index.js, ele substitui cada leitura de import.meta.env.VITE_... pelo valor de .env. Um nome sem o prefixo fica oculto do código do navegador, então chega como undefined.

JunoMude uma linha em index.js O construtor do SDK volta a usar process.env.MISTRAL_API_KEY quando recebe undefined. Então uma chave que o Vite não consegue encontrar falha com a mesma mensagem de uma linha inalterada: process is not defined, lançado de dentro do SDK.

Adicione sua chave ao .env

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

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

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

.env
node_modules/

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

Esta chave é visível no navegador

Vite escreve cada valor VITE_ no código que envia para o navegador, então qualquer um que abra esta página consegue ler sua chave. Mantenha esta versão no seu próprio computador: nunca faça deploy 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 ao .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 o Git nunca a salve.

JunoAdicione sua chave ao .env Vite observa .env. Salve uma mudança enquanto o projeto está rodando e Vite imprime .env changed, restarting server..., depois recarrega a página, que pede ao Mistral novamente com a nova chave.

JunoAdicione sua chave ao .env O prefixo VITE_ é uma lista de permissão de exposição, não armazenamento de segredo: a chave fica no módulo que o Vite serve e no cabeçalho Authorization de cada requisição que o navegador envia ao Mistral.

Inicie o app e leia a resposta

Inicie o servidor de desenvolvimento:

$ npm start

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

  VITE v8.3.4  ready in 740 ms

  ➜  Local:   http://localhost:5173/

Abra o endereço Local exato. A página mostra apenas o logo do Mistral, e é tudo que ela vai mostrar. A resposta vai para o console, então abra as ferramentas do desenvolvedor do seu navegador (F12, ou Cmd+Option+J no Chrome em um Mac) e selecione a aba Console.

Em alguns segundos o console imprime a resposta do Mistral para "quando a transação T1001 foi paga?": uma sentença dando a data do pagamento, 5 de outubro de 2021 (armazenada em tools.js como 2021-10-05). A redação é da própria modelo. Essa sentença significa que sua chave, a modelo e a chamada de função funcionaram tudo.

Se nenhuma resposta aparecer, a razão está no console em vermelho. Vite também copia o erro no terminal onde está rodando, em uma linha contendo [vite] (client). A solução de problemas abaixo combina cada mensagem.

Cada vez que a página carrega, incluindo quando o Vite a recarrega depois que você salva um arquivo, ela pede ao Mistral novamente. Pare o projeto com Ctrl+C.

JunoInicie o app e leia a resposta Rode npm start, ignore o aviso de config se aparecer, e abra o endereço Local. Ver apenas o logo está correto.

Abra o Console nas ferramentas do desenvolvedor do seu navegador e espere alguns segundos pela resposta sobre a transação T1001.

JunoInicie o app e leia a resposta O Mistral não sabe a data do pagamento. Ele pede uma das funções em tools.js, como getPaymentDate, a página a executa nos dados lá e envia de volta o resultado, e só então o Mistral escreve sua sentença. A data na resposta vem do seu código.

JunoInicie o app e leia a respostaindex.js aguarda o agente no nível superior do módulo sem try/catch, então uma requisição falhada vira um erro não capturado no console e nada muda na página. Sucesso e falha parecem iguais até você ler o console.

Solução de problemas

O console diz process is not defined: Ou index.js ainda lê process.env, ou o Vite não encontrou a chave. Verifique a terceira linha de index.js primeiro. Se ela já lê import.meta.env.VITE_MISTRAL_API_KEY, verifique que .env está ao lado de package.json e o nome é exatamente VITE_MISTRAL_API_KEY, depois salve .env: Vite reinicia e a página pede ao Mistral novamente.

O console mostra HTTP error! status: 401 e Invalid API Key: A chave chegou ao Mistral, mas o Mistral não a aceitou. Verifique que .env contém a chave inteira, sem espaços ao redor. Se a chave expirou ou foi deletada no console do Mistral, crie uma nova. Salve .env: Vite reinicia e a página pede ao Mistral novamente.

O console mostra outro HTTP error! status:: Leia o texto Response: depois dele. É a própria explicação do Mistral, e diz o que corrigir. Se menciona a modelo, compare mistral-large-latest em index.js com a página de modelos do Mistral e mude apenas o nome da modelo. Mantenha o SDK em 0.1.3.

O console diz Max retries reached, depois de cerca de meio minuto: Mistral continuava respondendo com um limite de taxa ou um erro do servidor. Espere um minuto, depois recarregue a página uma vez.

JunoSolução de problemas Encontre a linha no Console que menciona process, HTTP error ou Max retries e combine com um cabeçalho em negrito acima.

JunoSolução de problemasprocess is not defined significa que nenhuma requisição saiu do seu navegador. Um HTTP error significa que uma saiu e o Mistral respondeu, então o problema é a chave, a modelo ou a conta, não seu código.

JunoSolução de problemas Um 429 ou erro de servidor é retentado até cinco vezes com esperas crescentes, depois termina como Max retries reached. Qualquer outro status falhado é lançado imediatamente como um HTTP error, registrado primeiro como Request failed:, então aparece duas vezes.