Documentación

Tutoriales por semana

Semana 3 · Tu primera función con IA

OpenAI con structured outputs — el modelo devuelve datos ordenados que tu app usa directo.

Next.jsOpenAI

Esta semana tu producto deja de ser una página bonita y empieza a hacer algo inteligente: una función real que usa IA y muestra el resultado en tu app. La construye Cursor — tú decides qué hace y verificas que funcione.

Qué vas a tener al final

  • ✅ Tu API key de OpenAI configurada y funcionando.
  • ✅ Una función de tu producto que llama a OpenAI y devuelve datos estructurados (no texto suelto).
  • ✅ Ese resultado renderizado en tu app, usable por tu ICP.
  • ✅ Noción de cuánto cuesta cada llamada (spoiler: centavos).

Lo que debes tener antes

Concepto: structured outputs (2 min)

En vez de pedirle al modelo "responde en formato JSON" (y cruzar los dedos), se le da un molde que describe exactamente qué campos debe traer la respuesta, y la API garantiza que lo cumple. El modelo deja de ser una caja negra que devuelve texto: se vuelve una función confiable de tu producto.

Así se ve por dentro — no lo escribes tú, lo escribe Cursor — pero conviene que lo reconozcas:

JavaScript
import { z } from "zod"
import { generateObject } from "@/lib/openai/structured"
 
const schema = z.object({
  resumen: z.string(),
  puntos_clave: z.array(z.string()),
  sentimiento: z.enum(["positivo", "neutral", "negativo"]),
})
 
const resultado = await generateObject(schema, "Analiza este review: ...")
// resultado.sentimiento === "positivo"  ← garantizado, siempre viene

(Zod es la librería que define el molde; generateObject es un helper que ya viene en el boilerplate, en web/lib/openai/. Cómo funciona por dentro: Features → IA con OpenAI.)

Paso 1 · Consigue tu API key de OpenAI

El paso a paso vive en la guía dedicada. Ahí vas a:

  1. Entrar a tu cuenta de OpenAI (la creaste con saldo en Semana 0).
  2. Crear tu API key y copiarla al momento (solo se muestra una vez).
  3. Pegarla en web/.env.local y reiniciar yarn dev.
  4. Ponerle un límite de gasto mensual para dormir tranquilo.

→ Sigue OpenAI paso a paso (API key) (~10 min; la guía incluye los errores típicos 401 / quota / billing).

Regresa aquí cuando yarn dev reinicie sin errores con la key puesta.

Checkpoint

web/.env.local tiene tu OPENAI_API_KEY y reiniciaste yarn dev sin errores en la terminal.

Paso 2 · Decide qué hará tu primera función IA

La regla: que le sirva a tu ICP, no que sea impresionante. Ejemplos del calibre correcto:

  • Un CRM inmobiliario → "analiza este mensaje de un lead y devuelve: intención de compra (alta/media/baja), presupuesto detectado y respuesta sugerida".
  • Una app de nutrición → "a partir de esta lista de ingredientes devuelve: calorías estimadas, macros y 2 sugerencias de mejora".
  • Un marketplace de servicios → "resume esta solicitud de cliente en: categoría, urgencia y precio estimado".

¿No se te ocurre? Pídeselo a la IA con tu ficha:

Prompt para elegir la función (Cursor o claude.ai)
Mi producto: {describe tu producto en 1 frase}. Mi ICP: {tu cliente ideal}.
Proponme 3 funciones con IA que pueda construir esta semana, donde la IA reciba un texto del usuario y devuelva datos estructurados (campos concretos, no texto libre). Para cada una dime: qué recibe, qué campos devuelve y por qué le sirve a mi ICP. Ordénalas de más a menos valiosa.

Paso 3 · Deja que Cursor la construya

Con la función elegida, este es el prompt. Rellena las llaves:

Prompt para Cursor — construir la función
Construye mi primera feature con IA en este proyecto VibeFast (Next.js, la app vive en web/):La función: recibe {qué escribe o sube el usuario} y devuelve {lista los campos exactos que quieres de vuelta, ej: categoría, urgencia (alta/media/baja), respuesta_sugerida}.Requisitos:
Usa el helper generateObject de web/lib/openai/structured con un schema Zod de esos campos.
La llamada a OpenAI va en el backend (nunca en el navegador) — elige tú el lugar correcto.
Crea una página o sección en la app donde yo pegue el texto de entrada, con un botón, y el resultado se muestre bonito (usa los componentes de UI que ya trae el proyecto).
Usa gpt-4o-mini como modelo.
Al final dime qué archivos creaste y en qué URL pruebo la función.

Si Cursor se equivoca, no arregles tú el código

Descríbele el problema: pega el error exacto o describe lo que ves ("el botón no hace nada", "sale undefined en el resultado"). Iterar con la IA es el flujo de trabajo, no un fracaso.

Paso 4 · Pruébala

Abre la URL que te dijo Cursor y usa la función con un caso real de tu producto.

Checkpoint

✅ Escribes una entrada real y el resultado aparece en pantalla con todos los campos de tu molde. ✅ Lo intentas con una entrada rara (texto vacío, algo fuera de tema) y la app no se rompe. ✅ En platform.openai.com/usage ves las llamadas registradas — cada una debería costar fracciones de centavo con gpt-4o-mini.

Por qué gpt-4o-mini

Es el modelo barato y rápido de OpenAI: perfecto para funciones de producto. Los $5 que cargaste alcanzan para miles de llamadas. Sube de modelo solo cuando una función lo justifique.

Entregable de la semana

Demo de tu función con IA: un video corto (1–2 min) o tu URL mostrando la entrada, el click y el resultado estructurado en pantalla. Mándalo al docente con 1 frase de por qué esta función le sirve a tu ICP.

Si te sobra tiempo

  • Chat con streaming: pídele a Cursor que active features.aiChat en web/config.js y prueba la pantalla de chat que trae el boilerplate (/chat).
  • Segunda función: la runner-up de tu lista del Paso 2 — ahora te va a tomar la mitad del tiempo.
  • Guarda los resultados: pídele a Cursor que persista cada análisis en la tabla ai_conversations de Supabase, y míralos aparecer en el Table Editor.
AnteriorSemana 2 · MVP con auth y core featureSiguiente Semana 4 · Tool use y automatización