Ejecutar Intro to Mistral AI localmente

Usa esta página para ejecutar el proyecto extraído de Intro to Mistral AI en tu computadora y obtener una respuesta de Mistral con tu propia clave. Dos cosas difieren del editor de Scrimba: una línea en index.js debe leer la clave a la manera de Vite, y la respuesta aparece en la consola del navegador, no en la página. El proyecto le hace su pregunta a Mistral apenas carga la página, así que no hay botón que presionar.

Lo que necesitas primero

Instala una versión LTS compatible de Node.js. Se recomienda Node 24 e incluye npm.

Verifica que ambos comandos funcionen. Tus números de versión pueden ser diferentes:

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

También necesitas una clave de API de Mistral, porque el proyecto le pide una respuesta a Mistral. Crea una en la consola de Mistral siguiendo los pasos de clave de API de Mistral. Dale una fecha de expiración unos días adelante y cópiala inmediatamente: Mistral muestra la clave completa solo una vez. Este proyecto llama a Mistral desde el navegador, así que la clave termina en la página.

JunoLo que necesitas primero Instala la versión LTS de Node.js, que incluye npm, y verifica que node --version y npm --version impriman una versión.

Luego crea una clave de API de Mistral con una expiración corta y cópiala en un lugar seguro antes de cerrar el diálogo. No puedes verla de nuevo después.

JunoLo que necesitas primero Tu navegador hace todo el trabajo aquí: carga la página, luego envía tu clave y la pregunta a Mistral directamente. Node y npm solo son necesarios para instalar los paquetes y ejecutar Vite, que sirve la página.

JunoLo que necesitas primero Cada carga de página envía una solicitud, luego una más por cada función que Mistral solicita, hasta cinco, así que cada recarga gasta solicitudes de tu clave.

Instala los paquetes

Abre una terminal en la carpeta del proyecto extraído. Es la que contiene package.json, index.js y tools.js:

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

npm termina reportando cuántos paquetes agregó:

added 20 packages, and audited 21 packages in 9s

JunoInstala los paquetes Abre la terminal en la carpeta que contiene package.json y ejecuta npm install. Debe terminar diciendo cuántos paquetes agregó.

Si npm dice que no puede encontrar package.json, estás en la carpeta equivocada.

JunoInstala los paquetes npm instala dos paquetes y lo que necesitan: el SDK de JavaScript de Mistral, que envía las solicitudes de chat, y Vite, que sirve la página y después coloca tu clave en ella.

JunoInstala los paquetes El SDK está fijado a 0.1.3, la versión con la que se grabó el curso, mientras que Vite es latest. Mantén la versión del SDK: las versiones principales más nuevas exportan un cliente diferente y el código del curso dejaría de funcionar.

Cambia una línea en index.js

El editor de Scrimba completa process.env.MISTRAL_API_KEY por ti. El navegador no tiene process, y Vite no crea uno, así que la lectura de la clave debe cambiar.

Abre index.js y cambia la tercera línea de:

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

a:

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

Vite solo entrega al código del navegador las variables cuyos nombres comienzan con VITE_, por eso el nombre gana ese prefijo. El resto del archivo se mantiene como lo escribió el curso.

JunoCambia una línea en index.js En index.js, reemplaza process.env.MISTRAL_API_KEY con import.meta.env.VITE_MISTRAL_API_KEY y guarda el archivo.

Esa línea es el único cambio de código que este proyecto necesita.

JunoCambia una línea en index.js Cuando Vite sirve index.js, reemplaza cada lectura de import.meta.env.VITE_... con el valor de .env. Un nombre sin el prefijo se oculta del código del navegador, así que llega como undefined.

JunoCambia una línea en index.js El constructor del SDK vuelve a process.env.MISTRAL_API_KEY cuando se le da undefined. Entonces una clave que Vite no puede encontrar falla con el mismo mensaje que una línea sin cambios: process is not defined, lanzado desde dentro del SDK.

Agrega tu clave a .env

Crea .env junto a package.json y pon tu clave en ella:

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

Crea .gitignore junto a package.json y agrega:

.env
node_modules/

Una clave que llega a un repositorio de Git permanece en su historial incluso después de que elimines el archivo. El manual de Git cubre el hábito en ignoring files and good habits.

Esta clave es visible en el navegador

Vite escribe cada valor de VITE_ en el código que envía al navegador, así que cualquiera que abra esta página puede leer tu clave. Mantén esta versión en tu propia computadora: nunca la despliegues o compartas, y nunca hagas commit de .env. Una versión que publiques necesita un backend o una función serverless que mantenga la clave en el servidor.

JunoAgrega tu clave a .env Haz un archivo llamado .env junto a package.json con tu clave en una línea, luego lista .env en .gitignore para que Git nunca la guarde.

JunoAgrega tu clave a .env Vite observa .env. Guarda un cambio mientras el proyecto se ejecuta y Vite imprime .env changed, restarting server..., luego recarga la página, que le pregunta a Mistral de nuevo con la nueva clave.

JunoAgrega tu clave a .env El prefijo VITE_ es una lista de exposición permitida, no almacenamiento de secretos: la clave se encuentra en el módulo que Vite sirve y en el encabezado Authorization de cada solicitud que el navegador envía a Mistral.

Inicia la aplicación y lee la respuesta

Inicia el servidor de desarrollo:

$ npm start

Vite puede imprimir primero una advertencia que comienza con (!) Your Vite config uses features. No detiene la aplicación. Debajo de ella, Vite imprime la dirección a abrir:

  VITE v8.3.4  ready in 740 ms

  ➜  Local:   http://localhost:5173/

Abre la dirección exacta de Local. La página muestra solo el logo de Mistral, y eso es todo lo que mostrará. La respuesta va a la consola, así que abre las herramientas de desarrollador de tu navegador (F12, o Cmd+Option+J en Chrome en una Mac) y selecciona la pestaña Console.

En unos pocos segundos, la consola imprime la respuesta de Mistral a "¿cuándo se pagó la transacción T1001?": una oración que da la fecha de pago, 5 de octubre de 2021 (guardada en tools.js como 2021-10-05). La redacción es propia del modelo. Esa oración significa que tu clave, el modelo y la llamada de función funcionaron.

Si no aparece respuesta, la razón está en la consola en rojo. Vite también copia el error en la terminal donde se ejecuta, en una línea que contiene [vite] (client). La solución de problemas a continuación coincide con cada mensaje.

Cada vez que carga la página, incluso cuando Vite la recarga después de que guardes un archivo, le pregunta a Mistral de nuevo. Detén el proyecto con Ctrl+C.

JunoInicia la aplicación y lee la respuesta Ejecuta npm start, ignora la advertencia de configuración si aparece, y abre la dirección Local. Ver solo el logo es correcto.

Abre la Console en las herramientas de desarrollador de tu navegador y espera unos segundos la respuesta sobre la transacción T1001.

JunoInicia la aplicación y lee la respuesta Mistral no conoce la fecha de pago. Solicita una de las funciones en tools.js, como getPaymentDate, la página la ejecuta en los datos allí y envía el resultado de vuelta, y solo entonces Mistral escribe su oración. La fecha en la respuesta proviene de tu código.

JunoInicia la aplicación y lee la respuestaindex.js espera el agente en el nivel superior del módulo sin try/catch, así que una solicitud fallida se convierte en un error no capturado en la consola y nada en la página cambia. El éxito y el fracaso se ven iguales hasta que lees la consola.

Solución de problemas

La consola dice process is not defined: O bien index.js aún lee process.env, o Vite no encontró clave. Verifica primero la tercera línea de index.js. Si ya lee import.meta.env.VITE_MISTRAL_API_KEY, verifica que .env esté junto a package.json y el nombre sea exactamente VITE_MISTRAL_API_KEY, luego guarda .env: Vite se reinicia y la página pregunta a Mistral de nuevo.

La consola muestra HTTP error! status: 401 e Invalid API Key: La clave llegó a Mistral, pero Mistral no la aceptó. Verifica que .env contenga la clave completa, sin espacios alrededor. Si la clave ha expirado o ha sido eliminada en la consola de Mistral, crea una nueva. Guarda .env: Vite se reinicia y la página pregunta a Mistral de nuevo.

La consola muestra otro HTTP error! status:: Lee el texto de Response: después de él. Es la propia explicación de Mistral y dice qué arreglar. Si nombra el modelo, compara mistral-large-latest en index.js con la página de modelos de Mistral y cambia solo el nombre del modelo. Mantén el SDK en 0.1.3.

La consola dice Max retries reached, después de aproximadamente medio minuto: Mistral siguió respondiendo con un límite de velocidad o un error del servidor. Espera un minuto, luego recarga la página una vez.

JunoSolución de problemas Encuentra la línea en la Console que menciona process, HTTP error o Max retries y coincide con un encabezado en negrita arriba.

JunoSolución de problemasprocess is not defined significa que ninguna solicitud salió de tu navegador. Un HTTP error significa que una sí y Mistral la respondió, así que el problema es la clave, el modelo o la cuenta, no tu código.

JunoSolución de problemas Un error 429 o del servidor se reintenta hasta cinco veces con esperas crecientes, luego termina como Max retries reached. Cualquier otro estado fallido se lanza de inmediato como un HTTP error, registrado primero como Request failed:, así que aparece dos veces.