Ejecutar Intro to Mistral AI localmente

Usa esta página para ejecutar el proyecto Intro to Mistral AI extraído en tu computadora. Adaptarás la búsqueda de clave de API exclusiva de Scrimba para Vite, iniciarás el proyecto y encontrarás el resultado de la llamada de función en la consola del navegador. El manejo de claves aquí sigue el mismo patrón que en Ejecutar Chef Claude localmente, así que ambas páginas resuelven el mismo problema para diferentes proveedores.

Lo que necesitas primero

Instala una versión LTS compatible de Node.js. Se recomienda Node 24 e 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 configuración de clave de Studio de Mistral, crea una clave y cópiala cuando se muestre. La agregará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 en el momento en que Studio la muestre, porque es la única vez que ves el valor completo. ¡He cerrado ese diálogo demasiado rápido y tuve que crear una segunda clave más de una vez!

JunoLo que necesitas primero Studio muestra una clave nueva una sola vez y después almacena solo su nombre, así que pégala en algún lugar seguro antes de cerrar la página. Verifica que tu cuenta pueda acceder al modelo que tu lección descargada nombra, ya que la creación de claves y el acceso al modelo son cosas separadas. Una clave de nivel gratuito permite suficientes solicitudes para este proyecto.

JunoLo que necesitas primero El proyecto se ejecuta con Vite e instala con npm, así que la página puede comenzar con una clave de marcador de posición y verse completamente normal. Solo el bucle de llamada de función prueba que la clave y el modelo funcionan juntos, por lo que un servidor de desarrollo que comienza sin errores no te dice nada sobre tu cuenta de Mistral. Confirma que la credencial funciona antes de empezar a 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 todos los comandos npm desde ahí. El archivo de entorno que creas más adelante pertenece a esa misma carpeta. La razón más común por la que una configuración falla en este punto es ejecutar los comandos desde la carpeta equivocada, y un comando confirma en qué carpeta estás.

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

JunoAbre la carpeta del proyecto Lee los scripts en el proyecto extraído en lugar de asumir los comandos npm usuales. Esta descarga no incluye lockfile, así que npm install resuelve versiones contra el registro cada vez y escribe el resultado localmente. Dos personas configurando en días diferentes pueden obtener diferentes versiones de parche, lo que vale la pena recordar antes de culpar a tu propia 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 de navegador Vite 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 al lado de package.json:

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

Crea .gitignore al lado y agrega:

.env
node_modules/

El prefijo VITE_ es obligatorio porque Vite expone solo variables de entorno con prefijo especial al código del navegador. Agregar una clave a Git por accidente no se deshace eliminando el archivo, porque el valor permanece en el historial del repositorio, y 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_ deliberadamente pone la clave de API en el bundle del frontend. Usa una clave temporal y restringida solo para aprender localmente. Nunca despliegues ni compartas esta versión, y nunca hagas commit de .env. Una aplicación de producción necesita un backend o función sin servidor que mantenga la clave en el servidor.

JunoHaz que la clave de API funcione en Vite Cambia la búsqueda de clave anterior, 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 clave que estés dispuesto a eliminar después. Esta 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 lo que el cambio de nombre importa. Reinicia el servidor después de editar .env, porque esos valores se leen al iniciarse.

JunoHaz que la clave de API funcione en Vite Vite inserta la cadena de clave literal en el JavaScript servido, así que puedes abrir DevTools, buscar en Sources y encontrar tu propia credencial allí en texto plano. Verla una vez hace que la regla sea concreta. El límite del backend para este proyecto tiene que cubrir todo el bucle de llamada de función, no solo la clave: el servidor sostiene la credencial, ejecuta las llamadas de herramienta y devuelve solo la respuesta terminada.

Instala y ejecuta el proyecto

Instala las dependencias descargadas e inicia Vite:

$ npm install
$ npm start

Abre la URL Local exacta que Vite imprime, generalmente 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 representa 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. Después abre la Console del navegador, porque la lección de llamada de función imprime su respuesta ahí en lugar de en la página. Una página que parece 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 de llamada de función reporta a la Console, así que mantén DevTools abierto mientras lo pruebas.

JunoInstala y ejecuta el proyecto Un servidor Vite en ejecución prueba que los paquetes se instalaron y tu fuente editada se compiló, y no prueba nada más allá de eso. 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 considerar la configuración terminada. El inicio y una credencial que funciona fallan en lugares completamente diferentes.

Solución de problemas

process is not defined: La lectura de entorno de 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 de variable VITE_ exacto, asegúrate de que .env esté al lado de 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 ZIP descargado fija una SDK de Mistral más antigua y pide mistral-large-latest. Los SDKs del proveedor 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 fija de 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 representativa registra su respuesta final ahí en lugar de representarla en la página.

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

JunoSolución de problemas Verifica el nombre de VITE_, dónde está .env, el ID del modelo y la Console del navegador, luego reinicia. Trabaja a través de esos uno por uno en lugar de cambiar varios cosas a la vez. No publiques esta versión, sin importar qué tan bien se ejecute en tu máquina.

JunoSolución de problemas Separa una lectura de process.env sin resolver de la autorización del proveedor y la disponibilidad del modelo, ya que cada una produce un error diferente. Compilar y completar una solicitud son puntos de control diferentes, y una página que llega a tu navegador confirma solo el primero.

JunoSolución de problemas Verifica en este orden: la variable de Vite primero, luego el inicio de SDK, luego el acceso al modelo, luego el bucle de llamada de función. Un modelo renombrado y una clave rechazada ambos aparecen como una solicitud fallida y necesitan arreglos opuestos, así que lee el cuerpo de la respuesta antes de editar nada. Antes del despliegue las solicitudes se mueven a un backend, lo que elimina toda esta clase de problema junto con la clave expuesta.