Ejecutar Chef Claude localmente

Usa esta página para ejecutar el proyecto extraído de Chef Claude de Learn React en tu computadora y generar una receta con tu propia clave de proveedor. Antes de que se ejecute, el proyecto necesita que cambies sus lecturas de claves para Vite, que reemplaces el modelo de Anthropic retirado, e instalar aceptando las dependencias antiguas de React que declara. Si el lado React del proyecto es nuevo para ti, el handbook de React comienza desde el principio.

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:

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

También necesitas una clave de API para el proveedor que uses. El código del curso incluye una ruta de Anthropic y una ruta de Hugging Face. El registro de proveedores, la disponibilidad de modelos y los precios pueden cambiar, así que usa las instrucciones de cuenta actuales del proveedor. Sea cual sea la ruta que elijas, usa una clave temporal con un límite de gasto bajo, porque el proyecto llama al proveedor desde código del navegador.

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 obtén una clave para la ruta del proveedor que planeas usar. Hazla una clave temporal con un límite de gasto bajo, porque este proyecto llama al proveedor directamente desde el navegador.

JunoLo que necesitas primero Elige la ruta de Anthropic o Hugging Face antes de configurar credenciales. Necesitas ambas claves solo si planeas ejecutar ambas implementaciones.

Los flujos de registro, la disponibilidad de modelos y los precios cambian con el tiempo, así que sigue las instrucciones actuales del proveedor en lugar de la grabación.

JunoLo que necesitas primero Este es un proyecto Vite y React con dos clientes de proveedor opcionales. La página se inicia y se ve normal incluso con una clave marcador de posición, así que solo una receta renderizada prueba que la clave es válida, la cuenta está activa y el modelo está disponible. Cada uno de esos puede fallar por separado.

Abre la carpeta del proyecto

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

$ cd path-to-your-downloaded-project

Antes de ejecutar cualquier cosa, abre package.json. Su bloque scripts muestra los comandos que el proyecto espera, y dependencies registra los paquetes exactos de React y del proveedor con los que se construyó esta instantánea.

JunoAbre la carpeta del proyecto Trabaja en la carpeta extraída que contiene package.json; cada comando y archivo en esta página pertenece ahí.

Si un comando reporta que falta un archivo, verifica en qué carpeta está la terminal antes de cambiar nada más.

JunoAbre la carpeta del proyecto El proyecto se ejecuta en npm y Vite. Sus llamadas de proveedor aún leen claves del entorno de Scrimba, que existe solo dentro del editor de Scrimba, así que la siguiente sección cambia esas lecturas.

JunoAbre la carpeta del proyecto Lee package.json antes de cambiar cualquier archivo. scripts es lo que npm start resuelve, y dependencies fija las versiones con las que se construyó esta instantánea, incluyendo React prerelease. Esa lectura explica la bandera de instalación y las claves del proveedor antes de que cualquiera te sorprenda.

Haz que las variables de entorno funcionen en Vite

El editor de Scrimba entiende process.env.ANTHROPIC_API_KEY y process.env.HF_ACCESS_TOKEN. Una aplicación Vite local no proporciona ese objeto process.env en el navegador.

Abre ai.js y cambia el valor de Anthropic de:

apiKey: process.env.ANTHROPIC_API_KEY,

a:

apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,

Cambia el valor de Hugging Face de:

const hf = new HfInference(process.env.HF_ACCESS_TOKEN)

a:

const hf = new HfInference(import.meta.env.VITE_HF_ACCESS_TOKEN)

El prefijo VITE_ es obligatorio porque Vite expone solo variables de entorno especialmente prefijadas al código del navegador.

Reemplaza el modelo de Anthropic retirado

La función de Anthropic descargada utiliza el modelo retirado claude-3-haiku-20240307. En la función getRecipeFromChefClaude, cambia:

model: "claude-3-haiku-20240307",

por el reemplazo documentado de Anthropic:

model: "claude-haiku-4-5-20251001",

El resto de la solicitud del curso puede permanecer sin cambios.

Añade tus claves a .env

Crea .env al lado de package.json. Añade el valor para la ruta que uses:

VITE_ANTHROPIC_API_KEY=your-anthropic-key-here
VITE_HF_ACCESS_TOKEN=your-hugging-face-token-here

Puedes omitir el valor sin usar. El proyecto llama a getRecipeFromChefClaude por defecto, así que si dejas esa función como está, necesitas el valor de Anthropic y el cambio de modelo arriba. Para usar la ruta de Hugging Face, que llama un modelo Mistral, sigue la lección de cambio de proveedor del curso y confirma que su modelo de Hugging Face sigue disponible.

Crea .gitignore al lado de package.json y añade:

.env
node_modules/

Mantener .env fuera de Git es tan importante como la exposición del navegador descrita en la advertencia abajo, porque una clave que llega al historial del repositorio permanece ahí incluso después de que elimines el archivo. El handbook de Git cubre el hábito más amplio en ignorar archivos y buenas prácticas.

Estas claves son visibles en el navegador

El prefijo VITE_ deliberadamente pone cada valor en el bundle del frontend. Usa credenciales temporales y restringidas solo para aprender localmente. Nunca despliegues ni compartas esta versión, y nunca hagas commit de .env. Una versión de producción necesita un backend o una función serverless que mantenga credenciales de proveedor en el servidor.

JunoHaz que las variables de entorno funcionen en Vite En ai.js, cambia ambas lecturas de claves a las formas import.meta.env y reemplaza el modelo de Anthropic retirado. Luego pon la clave que uses en .env e incluye ese archivo en .gitignore.

La clave sigue siendo visible en el navegador, así que mantén esta versión en tu propia computadora.

JunoHaz que las variables de entorno funcionen en Vite El código cliente de Vite lee import.meta.env y expone solo valores cuyos nombres comienzan con VITE_. Establece la variable que coincida con la función de proveedor que la aplicación llama, y usa el reemplazo de Haiku actual para la ruta de Anthropic por defecto.

JunoHaz que las variables de entorno funcionen en Vite El prefijo VITE_ es una lista de exposición permitida, no almacenamiento secreto: Vite escribe cada valor en el bundle. Una versión desplegable mueve el tráfico de proveedor detrás de un límite de servidor.

Instala y ejecuta el proyecto

El proyecto extraído usa una versión prerelease de React 19 junto a una dependencia cuyo rango de pares no acepta esa prerelease. Una instalación normal de npm install por lo tanto se detiene con un error ERESOLVE. Instala esta instantánea del curso con su verificación de pares relajada:

$ npm install --legacy-peer-deps
$ npm start

Vite imprime una dirección local similar a:

  VITE ready

  Local: http://localhost:5173/

Abre la URL exacta de Local. Si 5173 está ocupado, Vite elige otro puerto e lo imprime. Añade suficientes ingredientes para solicitar una receta. Una receta renderizada confirma dos cosas: que la página local funciona y que la clave del proveedor seleccionado y el modelo funcionan. Detén el proyecto con Ctrl+C.

Reinicia Vite después de cambiar .env.

JunoInstala y ejecuta el proyecto Ejecuta npm install --legacy-peer-deps, luego npm start, y abre la URL Local que imprime. Añade ingredientes y pide una receta; una receta en la página significa que todo funciona. Presiona Ctrl+C para detener.

La bandera suena como una advertencia, pero es la instalación correcta para este proyecto.

JunoInstala y ejecuta el proyecto La verificación de pares relajada maneja el desajuste conocido de prerelease de React sin reemplazar dependencias del curso. Reinicia el servidor después de cada cambio en .env, ya que Vite lee esos valores al iniciar.

JunoInstala y ejecuta el proyecto--legacy-peer-deps omite la aplicación de dependencia de pares que npm ha aplicado por defecto desde la versión 7 e instala el árbol como se declara. Eso es seguro para una instantánea de curso fijada a una prerelease de React. No reemplaces ni actualices los paquetes de React en su lugar, porque eso crea un proyecto diferente del del curso.

Solución de problemas

ERESOLVE unable to resolve dependency tree: Usa npm install --legacy-peer-deps para este proyecto extraído. No elimines ni reemplaces paquetes de React para pasar la instalación.

process is not defined: Uno o ambos valores de estilo Scrimba process.env permanecen en ai.js. Reemplázalos con los formularios import.meta.env.VITE_... mostrados arriba, luego reinicia Vite.

La clave es undefined o la autenticación falla: Verifica el nombre exacto de la variable VITE_, asegúrate de que .env está al lado de package.json, y reinicia el proyecto. Confirma que la credencial está activa en la cuenta del proveedor.

Anthropic dice que el modelo no se encuentra o está retirado: Confirma que ai.js usa claude-haiku-4-5-20251001, no claude-3-haiku-20240307. Si Anthropic posteriormente retira el reemplazo, usa el sucesor nombrado en su documentación actual de depreciación de modelos.

Hugging Face rechaza el modelo Mistral: Confirma que el modelo en ai.js está disponible a través del proveedor de inferencia conectado a tu cuenta. Una página de modelo puede permanecer descargable incluso cuando no está disponible a través de tu proveedor de inferencia alojada elegido.

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

JunoSolución de problemas Usa la bandera de instalación cuando veas ERESOLVE, reemplaza cada lectura de clave antigua cuando veas process is not defined, y reinicia el proyecto después de editar .env.

La mayoría de estos errores nombran la solución en el mensaje mismo, así que lee el mensaje completo antes de cambiar algo.

JunoSolución de problemas Mantén tres problemas separados: el conflicto de dependencia de pares, la sustitución de claves de Vite, y la disponibilidad del modelo de proveedor. Una página que se abre aún necesita una solicitud de proveedor exitosa antes de mostrar una receta, así que trata una receta faltante como una pregunta de proveedor en lugar de una de compilación.

JunoSolución de problemas Verifica la instalación, la sustitución de claves de Vite, y la disponibilidad del modelo de proveedor por separado. Antes del despliegue, mueve la solicitud de proveedor y la clave a un backend; ningún nombre de variable en código frontend puede mantener un valor secreto.

Toma Learn React en ScrimbaChef Claude es uno de los proyectos que construyes en el curso gratuito Learn React de Scrimba.→