Learn ReactEjecutar Chef Claude localmente
Usa esta página para ejecutar el proyecto extraído de la receta Chef Claude desde Learn React en tu computadora y obtener una receta con tu propia clave de Anthropic. Tres cosas difieren del editor de Scrimba: la instalación necesita un flag extra, las lecturas de clave en ai.js necesitan la sintaxis de Vite, y el modelo de Anthropic que el proyecto nombra ha sido retirado. Si la parte de React del proyecto es nueva para ti, el manual de React comienza desde el principio.
Qué 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.0También necesitas una clave de API de Anthropic, porque la app solicita recetas a Anthropic. Crea una clave que eliminarás cuando termines, y establece un límite de gasto mensual bajo en la Consola de Anthropic: este proyecto llama a Anthropic directamente desde el navegador, así que la clave termina en la página.
node --version y npm --version ambos impriman una versión. Luego crea una clave de API de Anthropic y establece un límite de gasto bajo en tu cuenta. Esa única clave es todo lo que este proyecto necesita.
Instala los paquetes
Abre una terminal en la carpeta extraída de Chef Claude. Es la que contiene package.json y ai.js:
$ cd path-to-your-extracted-projectUn simple npm install se detiene aquí con un error ERESOLVE, porque el proyecto usa una versión preliminar de React 19 que uno de sus paquetes no acepta. Agrega un flag en su lugar:
$ npm install --legacy-peer-depsnpm termina reportando cuántos paquetes agregó.
package.json, luego ejecuta npm install --legacy-peer-deps. npm termina diciendo cuántos paquetes agregó. El flag suena como una advertencia, pero es la instalación correcta para este proyecto. Si npm dice que no puede encontrar package.json, estás en la carpeta equivocada.
Cambia tres líneas en ai.js
El editor de Scrimba llena process.env.ANTHROPIC_API_KEY y process.env.HF_ACCESS_TOKEN por ti. El navegador no tiene process, y Vite no crea uno, así que ambas lecturas deben cambiar, incluso la de Hugging Face que la app nunca llama: ai.js ejecuta ambas tan pronto como carga.
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)Vite entrega al código del navegador solo las variables cuyos nombres comienzan con VITE_, es por eso que ambos nombres ganan ese prefijo.
La tercera línea es el modelo. En la función getRecipeFromChefClaude, el proyecto solicita claude-3-haiku-20240307, que Anthropic ha retirado. Cambia:
model: "claude-3-haiku-20240307",al reemplazo nombrado de Anthropic:
model: "claude-haiku-4-5-20251001",El resto de la solicitud permanece como el curso lo escribió.
ai.js, cambia ambas lecturas de clave a las formas import.meta.env, luego cambia el nombre del modelo. Cambia ambas lecturas aunque la app solo use Anthropic; una lectura antigua dejada atrás es suficiente para que la página se quede en blanco.
Agrega tu clave a .env
Crea .env junto a package.json y coloca tu clave en él:
VITE_ANTHROPIC_API_KEY=your-anthropic-key-hereCrea .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 ignorar archivos y buenas prácticas.
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 implementes ni la compartas, y nunca hagas commit de .env. Una versión que publiques necesita un backend o función serverless que mantenga la clave en el servidor.
.env junto a package.json con tu clave en una línea, luego lista .env en .gitignore para que Git nunca lo guarde. Inicia la app y obtén una receta
Inicia el servidor de desarrollo:
$ npm startVite puede imprimir primero una advertencia que comience con (!) Your Vite config uses features. No detiene la app. Debajo de ella, Vite imprime la dirección para abrir:
VITE v8.3.4 ready in 92 ms
➜ Local: http://localhost:5173/Abre la dirección exacta de Local. La página comienza con cinco ingredientes ya listados, así que Obtener una receta se muestra de inmediato. Haz clic en él y espera unos segundos: la página no muestra progreso mientras Anthropic escribe. Una receta bajo Chef Claude Recomienda significa que tu clave y el modelo funcionan.
Si nada aparece después de unos 20 segundos, abre las herramientas de desarrollador de tu navegador (F12, o Cmd+Option+J en Chrome en una Mac) y lee la pestaña Console. La razón se imprime allí, no en la página; la solución de problemas abajo coincide con cada mensaje.
Detén el proyecto con Ctrl+C. No necesitas reiniciarlo después de editar .env: Vite nota el cambio y se reinicia a sí mismo.
npm start, ignora la advertencia de config si aparece, y abre la dirección Local. Haz clic en Obtener una receta y espera unos segundos. Si no aparece ninguna receta, abre la Console en las herramientas de desarrollador de tu navegador y busca la primera línea roja.
Solución de problemas
ERESOLVE unable to resolve dependency tree: Ejecuta npm install --legacy-peer-deps en su lugar. No elimines ni reemplaces los paquetes de React para pasar la instalación.
La página está en blanco, y la consola dice process is not defined: Todavía hay una lectura de process.env en ai.js. Reemplaza ambas con las formas import.meta.env.VITE_... mostradas arriba y guarda el archivo.
Nada sucede después de Obtener una receta, y la consola dice Could not resolve authentication method: El navegador no tiene clave. Verifica que .env esté junto a package.json y que el nombre sea exactamente VITE_ANTHROPIC_API_KEY, guarda el archivo, y haz clic en Obtener una receta de nuevo una vez que Vite diga que se reinició.
La consola muestra 401 con invalid x-api-key: La clave llegó, pero Anthropic no la aceptó. Cópiala de nuevo desde tu cuenta de Anthropic y verifica que no haya sido eliminada.
La consola dice que tu saldo de crédito es muy bajo: La clave funciona, pero la cuenta no tiene crédito para gastar. Agrega crédito bajo Billing en la Consola de Anthropic, luego haz clic en Obtener una receta de nuevo.
La consola dice que el modelo no se encontró: Verifica que ai.js solicite claude-haiku-4-5-20251001, no claude-3-haiku-20240307. Si Anthropic luego retira ese modelo también, usa el reemplazo que su página de deprecaciones de modelos nombra.
process.env en ai.js.