Ejecutar Intro to Mistral AI localmente

Usa esta página para ejecutar el proyecto Intro to Mistral AI extraído en tu computadora. El proyecto lee su clave API de la manera que Scrimba la proporciona, así que una línea cambia antes de que se ejecute en Vite, y el resultado de la llamada de función aparece en la consola del navegador. El manejo de la clave sigue el mismo patrón que Ejecutar Chef Claude localmente, que resuelve el mismo problema para un proveedor diferente.

Lo que necesitas primero

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

Verifica que Node y npm estén disponibles:

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

También necesitas una clave de API de Mistral. Si no tienes una, sigue la guía de configuración de clave en Studio de Mistral, crea una clave y cópiala cuando se muestre. La añadirás al archivo de entorno local más adelante en esta página.

JunoLo que necesitas primero Instala la versión LTS de Node.js, que trae npm con ella, y crea una clave de API de Mistral.

Copia la clave apenas Studio la muestre, y guárdala en algún lugar seguro hasta que la añadas a .env.

JunoLo que necesitas primero Crear una clave y tener acceso a un modelo son cosas separadas, así que verifica que tu cuenta de Mistral pueda usar el modelo que menciona tu lección descargada.

JunoLo que necesitas primero La página puede comenzar con una clave provisional y verse completamente normal. Solo el ciclo de llamada de función prueba que la clave y el modelo funcionan juntos, así que confirma que la credencial funciona antes de depurar código que no está roto.

Abre la carpeta del proyecto

Abre una terminal en la carpeta extraída que contiene package.json:

$ cd path-to-your-downloaded-project

JunoAbre la carpeta del proyecto Trabaja en la carpeta extraída que contiene package.json, y ejecuta cada comando npm desde ahí. El archivo .env que crearás después pertenece a esa misma carpeta también.

JunoAbre la carpeta del proyecto Este es un proyecto de npm y Vite, así que package.json te dice qué ejecuta npm start. El próximo paso cambia su búsqueda de clave solo-Scrimba para que la aplicación lea tu archivo de entorno local en su lugar.

JunoAbre la carpeta del proyecto La descarga no tiene archivo de bloqueo, así que npm install resuelve versiones contra el registro y las registra localmente. Dos configuraciones en días diferentes pueden obtener versiones de parche diferentes, lo que vale la pena descartar antes de culpar a tu máquina por una diferencia.

Haz que la clave de API funcione en Vite

El index.js descargado lee la clave con la sintaxis de entorno de Scrimba:

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

Un proyecto Vite de navegador estándar no proporciona ese valor process.env. Cambia la línea a:

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

Crea .env junto a package.json:

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

Crea .gitignore junto a él y añade:

.env
node_modules/

El prefijo VITE_ es obligatorio porque Vite expone solo variables de entorno con prefijo especial al código del navegador. Ignorar .env importa porque una clave añadida a Git por accidente no se elimina borrando el archivo: el valor se queda en el historial del repositorio. El manual de Git cubre el hábito más amplio en ignorar archivos y buenas prácticas.

Esta clave es visible en el navegador

El prefijo VITE_ pone deliberadamente la clave de API en el paquete del frontend. Usa una clave temporal y restringida solo para aprendizaje local. Nunca publiques ni compartas esta versión, y nunca hagas commit de .env. Una aplicación de producción necesita un backend o función serverless que mantenga la clave en el servidor.

JunoHaz que la clave de API funcione en Vite Cambia la búsqueda de clave antigua, pon una clave temporal en .env, y mantén ese archivo fuera de Git.

El navegador aún puede leer esta clave, así que usa una que estés dispuesto a eliminar después. Esa exposición es una limitación de proyectos solo-frontend, no un error en tu configuración.

JunoHaz que la clave de API funcione en Vite El código cliente de Vite lee import.meta.env y expone solo variables con prefijo VITE_, por eso el cambio de nombre importa. Reinicia el servidor después de editar .env, porque los valores se leen al inicio.

JunoHaz que la clave de API funcione en Vite Vite incluye la cadena de clave en el JavaScript servido, así que una búsqueda en DevTools Sources la encuentra en texto plano. Una versión con backend tiene que ejecutar todo el ciclo de llamada de función en el servidor, no solo mantener la clave.

Instala y ejecuta el proyecto

Instala las dependencias descargadas e inicia Vite:

$ npm install
$ npm start

Abre la URL exacta Local que Vite imprime, usualmente http://localhost:5173/. En la lección de llamada de función, abre las herramientas de desarrollo de tu navegador y selecciona Console. Una respuesta de Mistral devuelta ahí es el resultado de éxito visible; la lección no renderiza ese resultado en la página.

Reinicia Vite después de cambiar .env. Detente con Ctrl+C.

JunoInstala y ejecuta el proyecto Ejecuta npm install, luego npm start, y abre la URL Local que imprime. Luego abre la Console del navegador, porque la lección de llamada de función imprime su respuesta ahí.

Una página que se ve vacía es el resultado esperado, no un fallo.

JunoInstala y ejecuta el proyecto Usa la dirección exacta que Vite imprime en lugar de un puerto recordado, y reinicia después de cambios de entorno. La lección reporta a la Console, así que mantén DevTools abierto mientras la pruebas.

JunoInstala y ejecuta el proyecto Un servidor Vite ejecutándose prueba que los paquetes se instalaron y el código fuente editado se compiló, y nada más. Solo una solicitud real confirma que Mistral acepta tu clave y el modelo de la lección, así que ejecuta el ejemplo de llamada de función antes de dar la configuración por terminada.

Solución de problemas

process is not defined: La lectura de entorno estilo Scrimba permanece en index.js. Reemplázala con la forma import.meta.env.VITE_MISTRAL_API_KEY de arriba y reinicia Vite.

La clave es undefined o la autenticación falla: Confirma el nombre exacto de la variable VITE_, asegúrate de que .env esté junto a package.json, y reinicia el proyecto. Verifica que la clave aún esté activa en tu cuenta de Mistral.

El modelo no está disponible o la solicitud del SDK falla: El proyecto descargado fija una versión antigua del SDK de Mistral y solicita mistral-large-latest. Los SDK de proveedores y los catálogos de modelos cambian. Compara el ID del modelo en index.js contra los modelos listados en la documentación de Mistral, y cambia el ID antes de cambiar la versión fijada del SDK, ya que un modelo renombrado es la causa más común.

Nada aparece en la página: Abre la consola del navegador. La lección de llamada de función registra su respuesta final ahí en lugar de renderizarla en la página.

Si quieres publicar este proyecto: No publiques esta versión solo-frontend. Mueve la llamada a Mistral y la credencial a un backend primero.

JunoSolución de problemas Verifica el nombre VITE_, dónde está .env, el ID del modelo y la Console del navegador, luego reinicia. Cambia una cosa a la vez.

No publiques esta versión, por bien que se ejecute en tu máquina.

JunoSolución de problemas Separa una lectura sin resolver de process.env de la autorización del proveedor y disponibilidad del modelo, ya que cada una produce un error diferente. Una página que llega a tu navegador confirma solo que el código se compiló, no que una solicitud tuvo éxito.

JunoSolución de problemas Verifica primero la variable de Vite, luego el inicio del SDK, acceso al modelo y el ciclo. Un modelo renombrado y una clave rechazada ambos se muestran como una solicitud fallida pero necesitan correcciones diferentes, así que lee el cuerpo de la respuesta antes de editar algo.