Skip to main content
Usa esta página si quieres una aplicación de chat pequeña con Next.js que parezca real y mantenga tu clave de API de Phaseo en el servidor. Objetivo: Ejecutar una aplicación de chat en el navegador que descubra modelos y envíe respuestas mediante rutas del servidor. Resultado: Una interfaz de chat local funcional que no expone las credenciales de Phaseo al navegador.

Crea una aplicación de chat web con Next.js sobre Phaseo Gateway.

Abrir en Cursor

​
Proyecto de ejemplo

​
Qué hace esta aplicación

    • obtiene los modelos disponibles mediante GET /v1/models
    • envía los turnos de chat mediante POST /v1/responses
  • mantiene la clave de API en el servidor
  • te ofrece un punto de partida sencillo para un producto real sin la complejidad de OAuth

​
Archivos principales

  • app/api/models/route.ts
  • app/api/responses/route.ts
  • app/components/ChatClient.tsx
  • lib/gateway.ts

​
Por qué el ejemplo está estructurado así

​
1. El navegador no llama directamente a Phaseo

La interfaz se comunica primero con tus propias rutas de Next.js. Esas rutas llaman a Phaseo desde el servidor. Esto te permite:
  • gestionar los secretos en el servidor
  • centralizar la administración de encabezados y cargas de solicitud
  • facilitar una futura ampliación si añades autenticación, límites de solicitudes o registros

​
2. La búsqueda de modelos está separada de la generación

Mantén las rutas para listar modelos y generar chats separadas para que cada parte sea fácil de entender:
  • una ruta para listar los modelos
  • una ruta para ejecutar la solicitud de chat

​
3. La interfaz solo administra el estado de interacción

El cliente de React se ocupa de:
  • el estado de la entrada
  • el estado de carga
  • la presentación de errores
  • los mensajes renderizados
La ruta del servidor se ocupa de la llamada a la IA. El navegador solo administra la experiencia del usuario.

​
Requisitos previos

    • Node.js y un administrador de paquetes compatible
  • una clave de API de Phaseo

​
Ejecuta el ejemplo

Configura:
  • PHASEO_API_KEY
  • NEXT_PUBLIC_GATEWAY_URL
Luego, ejecuta:
Abre http://localhost:3000.

​
Comprueba el resultado

  • El selector de modelos carga los modelos desde la ruta del servidor.
  • Al enviar un mensaje, se genera una respuesta del asistente.
  • El panel de red del navegador no expone PHASEO_API_KEY.
  • Si falla una solicitud al gateway, la interfaz muestra un estado de error útil.

​
Adapta la aplicación

  • cambia el modelo predeterminado por el que quieras usar en producción
  • añade streaming si tu experiencia requiere mostrar la salida token por token
  • añade autenticación más adelante si la aplicación admite varios usuarios
  • cambia después la implementación interna de la ruta por el SDK de TypeScript si quieres un cliente de nivel superior

​
Cuándo elegir otro punto de partida

  • usa la guía rápida de Node si quieres un script o una prueba del backend, no una interfaz
  • usa la guía rápida de Python si la primera integración se ejecuta en un worker, CLI o servicio de backend

​
Guías relacionadas

Última modificación el 2 de octubre de 2026