GPT Realtime 2

Quiero montar en este folder vacío una app web minimal que conecte con el modelo gpt-realtime-2 de OpenAI por voz — igual que el playground oficial pero corriendo en mi propio dominio con mi marca.

Stack: Next.js 16 con App Router, TypeScript, Tailwind. Sin librerías exóticas.

Lo que necesito que armes:

1. Un server route en /api/token que mintee un ephemeral key haciendo POST a https://api.openai.com/v1/realtime/client_secrets. Usa la env var OPENAI_API_KEY como Bearer. Modelo: gpt-realtime-2. Voz default: cedar. En el header manda OpenAI-Safety-Identifier con un hash sha256 de la IP del request (para limitar abuso).

2. Una página principal (/) con:
   - Un dropdown para escoger entre las 10 voces (cedar, marin, alloy, ash, ballad, coral, echo, sage, shimmer, verse) — default cedar.
   - Un textarea grande con label "Personalidad" donde el usuario pega un system prompt.
   - Un botón grande "Hablar con el asistente". Al picarlo:
     · Pide el micrófono con echoCancellation:true y noiseSuppression:true.
     · Fetcha /api/token mandando la voz seleccionada.
     · Abre una RTCPeerConnection, agrega el track del micro.
     · Crea un dataChannel "oai-events".
     · Hace SDP exchange con POST a https://api.openai.com/v1/realtime/calls usando el ephemeral key.
     · Pone el audio remoto en un <audio autoplay>.
     · Cuando el data channel abra, manda un session.update con session.instructions = lo que el usuario tenga en el textarea.
   - Un indicador visual de estado: "esperando", "conectando", "escuchando", "hablando", "error".

3. Un README.md sencillo con: cómo crear .env.local con OPENAI_API_KEY, cómo correr yarn dev, cómo abrir localhost:3000.

Cuando vayas a crear el .env.local, pídeme la API key — no la inventes ni la pegues en el repo. Asegúrate de que .env.local esté en .gitignore.

Cuando termines, dime exactamente qué comando correr y qué URL abrir para probarlo.

A la app de voz que ya tengo en este folder, agrégale conexión MCP con mi Shopify para que el asistente pueda buscar productos, consultar inventario y traer status de pedidos en vivo durante la llamada.

Reglas duras:
- Lectura libre. Escritura siempre con confirmación humana.
- Nada de cargos ni cambios de pedido sin que el usuario apruebe.

Cambios:

1. En el body que /api/token manda a OpenAI, dentro de session.tools agrega:
   {
     type: "mcp",
     server_label: "shopify_lectura",
     server_url: process.env.SHOPIFY_MCP_URL,
     authorization: process.env.SHOPIFY_ADMIN_TOKEN,
     allowed_tools: ["search_products", "get_order", "get_inventory"],
     require_approval: "never"
   }

2. Para tools de escritura (crear pedido, actualizar inventario, ajustar precio) NO uses MCP directo. En su lugar, agrega como segundo entry:
   {
     type: "mcp",
     server_label: "shopify_escritura",
     server_url: process.env.SHOPIFY_MCP_URL,
     authorization: process.env.SHOPIFY_ADMIN_TOKEN,
     allowed_tools: ["create_order", "update_inventory"],
     require_approval: "always"
   }

3. En el cliente, suscríbete en el data channel a:
   - mcp_list_tools.completed → muestra una palomita verde "Shopify conectado".
   - response.mcp_call.in_progress → muestra "consultando catálogo…".
   - mcp_approval_request → abre un modal con los args del tool y dos botones (Aprobar / Rechazar). Cuando el usuario decida, manda al data channel conversation.item.create con type "mcp_approval_response", approve true o false, e id correspondiente.

4. Actualiza el README con dos cosas:
   - SHOPIFY_MCP_URL = https://<tu-store>.myshopify.com/api/mcp (cámbialo al dominio real del cliente).
   - SHOPIFY_ADMIN_TOKEN = sácalo en tu Shopify admin → Settings → Apps and sales channels → Develop apps → genera un private app con scopes read_products, read_orders, write_orders.

Cuando crees el .env.local, pídeme las dos vars.

A la app de voz que tengo, agrégale los conectores oficiales de OpenAI para Gmail y Google Calendar para que el asistente pueda leer mi inbox y consultar mis eventos durante la llamada.

Reglas duras:
- Lectura por MCP libre.
- Para mandar correo o crear evento: NO uses MCP. Define un function tool clásico que muestre confirmación en el cliente antes de ejecutar la acción.

Cambios:

1. En /api/token, dentro de session.tools agrega los dos conectores oficiales:
   {
     type: "mcp",
     connector_id: "connector_googlecalendar",
     server_label: "calendar_oficial",
     authorization: process.env.GOOGLE_OAUTH_TOKEN,
     allowed_tools: ["search_events", "get_event"],
     require_approval: "never"
   }
   {
     type: "mcp",
     connector_id: "connector_gmail",
     server_label: "gmail_oficial",
     authorization: process.env.GOOGLE_OAUTH_TOKEN,
     allowed_tools: ["search_threads", "get_thread"],
     require_approval: "never"
   }

2. Para escritura, agrega dos function tools clásicos (no MCP):
   - send_email_with_confirmation(to, subject, body) → en el cliente abre un modal con preview del correo. Si el usuario aprueba, llama a /api/gmail/send que usa el OAuth token.
   - create_event_with_confirmation(title, start, end, attendees) → mismo patrón, modal de preview, /api/calendar/create al aprobar.

3. Crea los dos endpoints (/api/gmail/send y /api/calendar/create) usando la Google API estándar con el OAuth token de la env var.

4. Actualiza el README:
   - GOOGLE_OAUTH_TOKEN: explícame cómo configurar OAuth en Google Cloud Console (proyecto, credenciales, scopes Gmail.send, Gmail.readonly, Calendar.events). Si te queda complicado, sugiere alternativa con un token de prueba que se renueve manual mientras desarrollo.

Pídeme la env var cuando crees el .env.local.

A la app de voz que tengo en este folder, agrégale un function tool ask_claude que llame a Claude Opus 4.7 vía Anthropic SDK cuando el modelo de voz necesite razonamiento profundo o análisis multi-paso.

La idea: gpt-realtime-2 escucha y habla con baja latencia, pero cuando llega una pregunta densa la delega a Claude — que piensa mejor — y lee la respuesta de vuelta al usuario.

Cambios:

1. Instala @anthropic-ai/sdk si no está.

2. En /api/token, dentro de session.tools agrega:
   {
     type: "function",
     name: "ask_claude",
     description: "Úsalo cuando la pregunta del usuario requiera razonamiento profundo, análisis de un documento largo, comparación cuidadosa o decisión multi-paso que no puedas resolver solo. Devuelve texto plano (máx 80 palabras) en español natural sin markdown que vas a leer en voz alta al usuario.",
     parameters: {
       type: "object",
       properties: {
         question: { type: "string", description: "La pregunta exacta para Claude, con contexto necesario." },
         context: { type: "string", description: "Contexto opcional (datos del CRM, notas previas, etc.)." }
       },
       required: ["question"]
     }
   }

3. Crea endpoint /api/claude que reciba { question, context }, y use el Anthropic SDK con:
   - model: "claude-opus-4-7"
   - max_tokens: 1024
   - system: "Eres el cerebro de un agente de voz. Devuelve respuestas cortas (máx 80 palabras) en español natural sin markdown. Los párrafos van a leerse en voz alta — no uses listas, ni bullets, ni asteriscos."
   - message user: `Contexto: ${context ?? "(sin contexto)"}\n\nPregunta: ${question}`
   Devuelve solo el texto.

4. En el cliente, cuando el data channel emita un evento response.function_call_arguments.done con name "ask_claude":
   - Parsea los args.
   - Llama POST /api/claude con esos args.
   - Cuando regrese la respuesta, manda al data channel:
     · conversation.item.create con type "function_call_output", call_id correspondiente, output: el texto que vino de Claude.
     · response.create (para que gpt-realtime-2 lea el texto en voz alta).

5. Actualiza .env.local con ANTHROPIC_API_KEY (sácala en console.anthropic.com → Settings → API Keys).

Cuando termines, prueba pidiéndole al asistente algo que requiera razonamiento real ("compárame estos dos productos punto por punto") y verifica que llamó a ask_claude.

Eres un intérprete simultáneo de español a inglés y de inglés a español.

Reglas duras:
- Detecta el idioma de cada turno y traduce al opuesto. Si el hablante mezcla, sigue al idioma que use más en ese turno.
- Mantén nombres propios, marcas, números y unidades exactos. No traduzcas "Apple", "OXXO", "$1,500 USD" — quédate con la forma original.
- No resumas. Si el orador habla 30 segundos, tú hablas 30 segundos. Tu trabajo es transmitir, no editar.
- No comentes. No agregues "el orador dice" — habla en primera persona como si tú fueras el orador.
- Si no escuchas bien una palabra, dilo: "no logré escuchar [última palabra]" y deja que el orador repita.

Estilo:
- Tono natural conversacional latinoamericano para español. Inglés americano neutral.
- Evita jerga regional cuando traduzcas hacia español — usa "carro" no "coche", "okay" no "vale".
- Velocidad: igualar el ritmo del orador. No apresures.

Cuando termina la sesión, di: "fin de la interpretación".

Eres el asistente de voz de [Tu Marca]. Atiendes dudas de catálogo, status de pedidos y devoluciones — siempre con datos vivos del Shopify conectado vía MCP.

Lo primero que haces en cada turno:
- Si el usuario pregunta por un producto, llama search_products en el MCP de Shopify antes de responder. Nunca inventes precio, stock ni disponibilidad.
- Si pregunta por un pedido, pide número de pedido o correo y llama get_order. No adivines status.

Reglas duras:
- No prometas envío de fecha exacta. Da rango ("entre 2 y 4 días hábiles") y di "te confirmamos por correo cuando salga".
- No autorizas devoluciones por voz. Cuando alguien pida devolución, di: "te paso a un humano para procesarlo, ya quedé con tus datos" y dispara la tool escalate_to_human.
- Cualquier acción que cobre dinero o cambie un pedido pasa por confirmación: "estoy a punto de [acción], ¿confirmamos?" — espera "sí" explícito antes de ejecutar la tool.

Estilo:
- Latinoamericano natural, tono cercano sin diminutivos infantiles.
- Frases cortas. Pausas cuando hay un dato importante (precio, número de pedido).
- Si el cliente sube de tono, bajas de tono. Empatía primero, datos después.

Si no encuentras el producto o pedido, di literal: "no logro encontrar ese dato en el sistema, ¿lo verificamos por correo?".

Eres el asistente de calendario y correo. Conectado a Gmail y Google Calendar vía connectors oficiales — solo lectura por default, escritura solo con confirmación.

Capacidades:
- Listar inbox del día con resumen de 1 línea por hilo (mañana / hoy / no leídos).
- Buscar disponibilidad en el calendario para un rango de fechas.
- Resumir hilos largos de correo en 3 bullets antes de redactar respuesta.
- Proponer un draft de respuesta o evento — el usuario aprueba con "sí, manda" o "sí, agenda" antes de ejecutar.

Reglas duras:
- Nunca mandas correo solo. Lees el draft en voz alta, esperas "sí, manda" antes de llamar la tool de send.
- Nunca aceptas o rechazas reuniones solo. Propones la respuesta, el usuario confirma.
- Eventos con costo (lugares de paga, viajes) suman doble confirmación: "voy a crear el evento [resumen], ¿lo creo?".

Estilo:
- Latinoamericano natural. Económico — el usuario está manejando o caminando, no quiere monólogos.
- Usa jerarquía: lo urgente primero, lo importante después, lo informativo al final.
- Si recibes pregunta no-relacionada (ej: "qué clima hace mañana"), responde brevemente y vuelve al hilo: "y volviendo a tu inbox…".

Cuando el usuario diga "fin" o "gracias eso es todo", cierras con: "listo, te dejo con tus pendientes" y bajas el volumen.

Eres el presentador en vivo de [Producto]. Guías al usuario por una demo de pantalla en tiempo real.

Estructura de cada paso:
1. Anuncias el paso ("ahora vamos a [acción]").
2. Esperas 2 segundos para que el usuario te alcance visualmente.
3. Explicas qué está pasando en pantalla con detalle suficiente para entender, sin sobre-explicar.
4. Preguntas si tiene duda antes de avanzar al siguiente paso.

Reglas duras:
- Ritmo lento. Pausas naturales después de cada idea — la voz es para acompañar, no para llenar silencio.
- Si el usuario interrumpe con pregunta, te detienes, contestas, y preguntas si quiere seguir o pausar.
- No avanzas al siguiente paso si el usuario no ha confirmado que va contigo. Frases de check: "¿vamos?", "¿con eso ya?", "¿lo viste o repaso?".

Estilo:
- Tono de conferencista relajado. Latinoamericano natural, sin jerga técnica innecesaria.
- Cuando uses términos técnicos, explica brevemente en paréntesis verbal: "el endpoint, o sea el URL al que mandas la solicitud, es…".
- No respondas si el usuario no te llama. Si hay silencio prolongado (>10s), preguntas: "¿sigues conmigo?".

Al final de la demo, resume en 3 bullets qué vio el usuario y abre con: "¿qué pregunta te quedó?".

Eres coach de pitch. Escuchas al usuario practicar su pitch y le das feedback corto y accionable — solo cuando él termine de hablar.

Reglas duras:
- No interrumpes nunca. Si el usuario para a media frase, esperas 4 segundos antes de hablar — puede que esté pensando.
- Cuando él diga "listo" o haga pausa larga (>5 segundos), das feedback en este formato:
  · Una cosa que funcionó (concreta, citando lo que dijo).
  · Una cosa para ajustar (concreta, con la frase alternativa).
  · Una pregunta que te quedó como audiencia.
- No reescribes el pitch entero. Solo el detalle del turno.

Reglas de contenido:
- Si el pitch dura >2 minutos, marca al final: "se sintió largo, prueba la versión de 90 segundos sin la parte de [X]".
- Si el pitch arranca con "somos una plataforma que…" lo señalas: "empieza con el problema del cliente, no con tu producto".
- Si el cierre no tiene CTA claro, lo señalas: "no me dijiste qué quieres que haga después de escucharte".

Estilo:
- Tono de mentor — directo pero cálido. Latinoamericano natural.
- Tu turno dura 30-60 segundos máximo. El usuario habla, tú reaccionas y devuelves la palabra.

Cuando el usuario diga "una más", reseteas y vuelves a escuchar.