Ejecutar Chef Claude localmente

Usa esta página para ejecutar el proyecto de recetas de Chef Claude extraído de Learn React en tu computadora. Adaptas la clave del proveedor que usa su app de Vite, instalas las dependencias antiguas de React que declara, y generas una receta localmente. Si el lado de React del proyecto es nuevo para ti, el manual de React comienza desde el principio.

Qué necesitas primero

Instala una versión LTS soportada 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 del 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 actuales de cuenta del proveedor. Sea cual sea la ruta que elijas, usa una clave temporal con un límite de gasto bajo; el proyecto llama al proveedor desde código del navegador.

JunoQué necesitas primero Instala la versión LTS de Node.js, que incluye npm, y 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. Configurar ese límite toma un minuto y me ha salvado de mis propios errores de escritura más de una vez.

JunoQué 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 confía en las instrucciones actuales del proveedor en lugar de la grabación. Decidir la ruta primero significa configurar exactamente una credencial en lugar de dos.

JunoQué necesitas primero Este es un proyecto de Vite y React con dos clientes de proveedor opcionales, y la página se inicia y se ve normal incluso cuando la clave es un marcador de posición. Una receta renderizada es la única prueba real: clave válida, cuenta activa, modelo disponible. Espera que estos tres fallen independientemente, porque lo hacen, aunque raramente el mismo día.

Abre la carpeta del proyecto

Abre una terminal en la carpeta de 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 snapshot.

JunoAbre la carpeta del proyecto Trabaja en la carpeta extraída que contiene package.json; cada comando y archivo en esta página pertenece allí. Si un comando reporta que falta un archivo, verifica en qué carpeta está la terminal antes de cambiar cualquier otra cosa. Los errores causados por la carpeta incorrecta me mantuvieron atrapado durante horas cuando comencé.

JunoAbre la carpeta del proyecto El proyecto se ejecuta en npm y Vite. Sus llamadas de proveedor extraídas aún esperan las variables de entorno de Scrimba, que cambias en la siguiente sección; hasta entonces el código lee claves de un entorno que solo existe dentro del editor de Scrimba.

JunoAbre la carpeta del proyecto Lee package.json antes de cambiar cualquier archivo: scripts es lo que npm start resuelve, y dependencies registra las versiones exactas con las que se construyó esta snapshot, incluida la versión previa de React. Esa lectura de treinta segundos predice el indicador de instalación y las claves del proveedor antes de que ninguno de los dos te sorprenda. Me la salto aproximadamente una vez al año, y el arrepentimiento llega alrededor de diez minutos después.

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 app de 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 con prefijo especial al código del navegador.

Reemplaza el modelo de Anthropic retirado

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

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

al reemplazo documentado de Anthropic:

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

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

Agrega tus claves a .env

Crea .env junto a package.json. Agrega 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 que no uses. El proyecto llama a getRecipeFromChefClaude de forma predeterminada, así que si dejas esa función como está, necesitas el valor de Anthropic y el cambio de modelo anterior. 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 aún está disponible.

Crea .gitignore junto a package.json y agrega:

.env
node_modules/

Mantener .env fuera de Git es tan importante como la exposición del navegador descrita en la advertencia de abajo, porque una clave que llega al historial del repositorio se queda allí incluso después de que elimines el archivo. El manual 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 aprendizaje local. 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 sin servidor que mantenga las credenciales del proveedor en el servidor.

JunoHaz que las variables de entorno funcionen en Vite Cambia las lecturas de clave y el modelo de Anthropic retirado en ai.js, agrega la clave que uses a .env, y mantén ese archivo fuera de Git. La clave permanece visible en el navegador.

JunoHaz que las variables de entorno funcionen en Vite El código cliente de Vite lee import.meta.env y expone solo valores con prefijo. Configura la variable que coincida con la función del proveedor que la app llama, y usa el reemplazo de Haiku actual para la ruta de Anthropic predeterminada.

JunoHaz que las variables de entorno funcionen en Vite El prefijo VITE_ es una lista de permiso de exposición, no almacenamiento de secretos. Una versión desplegable mueve el tráfico del proveedor detrás de un límite de servidor.

Instala y ejecuta el proyecto

El proyecto extraído usa una versión previa de React 19 junto con una dependencia cuyo rango de pares no acepta esa versión previa. Una npm install normal por lo tanto se detiene con un error ERESOLVE. Instala esta snapshot 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. Agrega suficientes ingredientes para solicitar una receta. Una receta renderizada confirma dos cosas: la página local funciona, y la clave y el modelo del proveedor seleccionado 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. Presiona Ctrl+C cuando quieras detenerlo. El indicador suena como una advertencia, y es aún la opción correcta para este proyecto, así que úsalo sin pensar que has roto algo.

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

JunoInstala y ejecuta el proyecto--legacy-peer-deps omite la ejecución de restricción de rango de dependencia de pares que npm aplica de forma predeterminada desde la versión 7, instalando el árbol de dependencias como está escrito en lugar de rechazarlo. Eso es seguro para una snapshot del curso fijada a una versión previa de React, y es el mismo indicador que oculta una incompatibilidad real en un proyecto que mantienes, así que úsalo aquí y trátalo con sospecha en cualquier otro lugar.

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 superar 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é junto a package.json, y reinicia el proyecto. Confirma que la credencial está activa en la cuenta del proveedor.

Anthropic dice que el modelo no se encontró 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 obsolescencia 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 esta página: No publiques esta versión solo de frontend. Mueve la solicitud de IA y la credencial a un backend primero.

JunoSolución de problemas Usa el indicador 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 describen la solución dentro del mensaje mismo. Lee todo el mensaje antes de cambiar cualquier cosa, lo que me tomó demasiado tiempo aprender.

JunoSolución de problemas Separa el conflicto de dependencias de pares de la sustitución de Vite y la disponibilidad del modelo del proveedor. Una página que se abre aún necesita una solicitud de proveedor exitosa antes de poder mostrar una receta, así que trata un resultado en blanco como una pregunta del proveedor en lugar de una de compilación.

JunoSolución de problemas Verifica instalación, sustitución de clave de Vite y disponibilidad del modelo del proveedor por separado, porque los tres fallan con una página que se carga y no hace nada. Un modelo retirado y una clave rechazada se ven idénticos en la interfaz y bastante diferentes en la respuesta de la red. Antes de desplegar cualquier cosa, mueve la solicitud y la clave a un backend, porque ningún nombre de variable en código frontend puede mantener un valor en secreto.