OpenAI Realtime API Next.js: una plantilla Next.js para crear aplicaciones de IA con diálogo de voz en tiempo real

Introducción general

OpenAI Realtime API Next.js es un proyecto de código abierto basado en el framework Next.js, diseñado para ayudar a los desarrolladores a construir rápidamente aplicaciones de IA de voz en tiempo real. El proyecto integra la API en tiempo real de OpenAI y la tecnología WebRTC , proporcionando modernos componentes de interfaz de usuario y herramientas para llamar a la función . Utilizando esta plantilla, los desarrolladores pueden crear fácilmente aplicaciones de IA de voz que admitan conversaciones de audio en tiempo real con localización multilingüe. El proyecto también incluye estrictas reglas de seguridad de tipos TypeScript y eslint para garantizar la calidad y la mantenibilidad del código.

Demostración en línea: https://openai-rt-shadcn.vercel.app/

Lista de funciones

• Marco Next.js: Renderizado del lado del servidor y enrutamiento de la API utilizando Next.js.
• Interfaz de usuario modernizada: Diseño de animaciones con Tailwind CSS y Framer Motion, utilizando componentes shadcn/ui.
• Compatibilidad con WebRTCProporciona un gancho que abstrae el procesamiento WebRTC para simplificar la implementación de diálogos de audio en tiempo real.
• Llamada a la herramientaContiene cinco funciones de ejemplo que demuestran el uso de herramientas del lado del cliente junto con la API en tiempo real.
• Localización multilingüe: Soporte para seleccionar el idioma (inglés, español, francés, chino) en el que se aplican las cadenas y los agentes de voz.
• seguridad de tipo: Utiliza TypeScript y sigue estrictamente las reglas de eslint.

Utilizar la ayuda

Proceso de instalación

1. almacén de clones

   git clone https://github.com/cameronking4/openai-realtime-api-nextjs.git
cd openai-realtime-api-nextjs

2. Entorno En el directorio raíz cree un.envy añade tu clave de API de OpenAI:

   OPENAI_API_KEY=your-openai-api-key

3. Instalación de dependencias Si utiliza Node.js:

   npm install

Si utiliza Deno:

   deno install

4. Ejecutar la aplicación Si utiliza Node.js:

   npm run dev

Si utiliza Deno:

   deno task start

La aplicación se ejecutará en elhttp://localhost:3000.

Instrucciones de uso

1. Abrir la aplicación Abrir en el navegadorhttp://localhost:3000.
2. Seleccionar voz Selecciona una voz e inicia una sesión de audio.
3. Llamada a la herramienta El proyecto proporciona cinco funciones de ejemplo que muestran cómo llamar a la herramienta en el lado del cliente:
   • getCurrentTime: Obtiene la hora actual.
   • partyModeCambia al modo fiesta.
   • changeBackground: Cambia el fondo.
   • launchWebsiteInicio del sitio.
   • copyToClipboard: Copiar al portapapeles.
4. Soporte multilingüe La localización multilingüe de cadenas de aplicaciones y agentes de voz puede lograrse seleccionando diferentes idiomas.

Despliegue en Vercel

1. Despliegue en un clic Con la plataforma Vercel, la aplicación puede desplegarse con un solo clic.
2. Configuración de variables de entorno En la configuración del proyecto de Vercel, añade tu clave de API de OpenAI.

licencias

El proyecto es de código abierto bajo la licencia MIT, véase el archivo LICENSE para más detalles.

una nota de agradecimiento

Gracias a OpenAI por la API y los modelos, al framework Next.js, a Tailwind CSS por el estilo y al blog de Simon Willison por la inspiración.