Composer ejecuta el spec 01 en Cursor

Platzi DayPlatzi Day

Todos los cursos GRATIS

Se acaba en:
:::

Resumen

Cursor no solo trae un editor de código y un editor de agentes: también incluye Composer, su propio modelo de inteligencia artificial para programar. En esta práctica lo usamos para poner en marcha el spec número uno de un proyecto real y validar que todo quede corriendo. Es ideal para quienes empiezan a programar con agentes de IA dentro de Cursor.

Qué hace Composer al ejecutar comandos

Cuando le pides al agente que ejecute los comandos, Composer no actúa a ciegas. Te pide aprobación mediante un cuadro de diálogo, tal como se solicitó en la configuración inicial.

Ahí tienes dos opciones claras:

  • Run: ejecuta ese comando una sola vez.
  • Allow: otorga permisos recurrentes durante la sesión para que el agente no vuelva a preguntar por el mismo comando.

Una vez validas un comando con allow, el agente deja de interrumpirte con ese permiso. Por ejemplo, primero pidió permiso para ejecutar los comandos y luego para verificar la versión instalada del package manager. Al aprobarlos, empezó a instalar todas las dependencias del proyecto sin fricción.

¿Qué es Composer en Cursor? Es el modelo de inteligencia artificial propio de Cursor para programar. Funciona como un agente que ejecuta comandos, instala dependencias y verifica criterios de un spec, siempre pidiéndote aprobación antes de correr acciones.

Cómo verificar que el spec 01 se completó correctamente

Cuando el agente termina, no basta con confiar: hay que revisar los criterios de verificación que venían definidos en el spec. En este caso, el spec 01 apareció marcado como completado con su checklist cumplido.

Estos fueron los criterios que pasaron sus pruebas:

  • Instalación correcta con pnpm install.
  • Criterios dos y tres validados con estado ok.
  • Configuración de TypeScript en los criterios cinco y seis.

Lo interesante viene después de la instalación. En la parte inferior aparece una pestaña que dice dos terminales, señal de que el agente dejó procesos corriendo.

¿Cómo sé si un spec quedó bien ejecutado? Revisa que todos los criterios de verificación del spec marquen estado ok y confirma en el navegador que los servicios levantados respondan, como el frontend en localhost y un endpoint de salud en la API.

Qué corre en el puerto 3000 y en el 3001

Al abrir las dos terminales encuentras dos procesos activos en puertos distintos, cada uno con una función específica dentro de la arquitectura del proyecto.

  • Puerto 3000: aquí corre Next.js, es decir, el frontend de la aplicación.
  • Puerto 3001: aquí corre Hono, que funciona como el motor de la API.

Para comprobarlo, entramos al navegador. En localhost:3000 aparece un error de Next.js, pero es simplemente porque aún no existe una página. Ese mensaje confirma que el framework está funcionando y que las dependencias se instalaron bien.

Cómo confirmar que la API responde

La mejor forma de validar una API recién levantada es consultar su endpoint de salud. En el puerto 3001 solemos tener un health endpoint justo para eso.

Al darle clic, la respuesta fue status ok. Con eso queda demostrado que tanto la API como la instalación del frontend en Next.js están funcionando perfecto.

Por qué comparar Composer con otro modelo

Aquí viene la parte práctica. No todos los modelos generan el mismo código ni resuelven un spec con la misma calidad, y probarlo tú mismo es la mejor forma de decidir cuál te conviene.

El reto de esta práctica es concreto:

  1. Ejecuta el spec 01 con Composer 2.5.
  2. Repite el mismo spec con el modelo de tu preferencia.
  3. Evalúa cuál genera mejor código.

Esa comparación directa te da criterio propio en lugar de quedarte con la recomendación de moda. ¿Con cuál modelo obtuviste mejores resultados? Cuéntalo en los comentarios.

Conceptos y herramientas clave de la práctica

Estos son los elementos técnicos que aparecen y conviene tener claros al replicar el flujo:

  • Composer [00:05]: modelo de IA de Cursor para programar y ejecutar specs.
  • Aprobación de comandos con Run y Allow [00:18]: control de permisos por comando durante la sesión.
  • pnpm install [01:05]: instalación de dependencias del proyecto validada como criterio.
  • TypeScript [01:20]: configuración verificada en los criterios cinco y seis.
  • Next.js en el puerto 3000 [01:55]: frontend de la aplicación.
  • Hono en el puerto 3001 [02:05]: motor de la API.
  • Health endpoint con status ok [02:35]: verificación de que la API responde.
  • Composer 2.5 [02:50]: versión del modelo usada en el reto comparativo.