OpenAI Realtime API Next.js : un modèle Next.js pour construire des applications d'IA de dialogue vocal en temps réel

Introduction générale

OpenAI Realtime API Next.js est un projet open source basé sur le framework Next.js , conçu pour aider les développeurs à créer rapidement des applications d'IA vocale en temps réel . Le projet intègre l'API en temps réel d'OpenAI et la technologie WebRTC, fournissant des composants d'interface utilisateur modernes et des outils pour appeler la fonction . En utilisant ce modèle, les développeurs peuvent facilement créer des applications d'IA vocale qui prennent en charge les conversations audio en temps réel avec localisation multilingue. Le projet inclut également une sécurité de type TypeScript stricte et des règles eslint pour garantir la qualité du code et la maintenabilité.

Démonstration en ligne : https://openai-rt-shadcn.vercel.app/

Liste des fonctions

• Cadre Next.jsLes services d'assistance technique : Rendu côté serveur et routage de l'API à l'aide de Next.js.
• Interface utilisateur moderniséeConception d'animations avec Tailwind CSS et Framer Motion, en utilisant les composants shadcn/ui.
• Prise en charge de WebRTCFournir un crochet qui fait abstraction du traitement WebRTC pour simplifier la mise en œuvre de dialogues audio en temps réel.
• Appel d'outilLe site contient cinq exemples de fonctions qui démontrent l'utilisation d'outils côté client en conjonction avec l'API en temps réel.
• Localisation multilingueLes agents vocaux peuvent être sélectionnés en fonction de la langue (anglais, espagnol, français, chinois) dans laquelle les chaînes de caractères et les agents vocaux sont appliqués.
• type de sécuritéLes règles de l'eslint : Utiliser TypeScript et suivre les règles strictes de l'eslint.

Utiliser l'aide

Processus d'installation

1. entrepôt de clones

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

2. Paramètres environnementaux Dans le répertoire racine, créez un fichier.envet ajoutez votre clé API OpenAI :

   OPENAI_API_KEY=your-openai-api-key

3. Installation des dépendances Si vous utilisez Node.js :

   npm install

Si vous utilisez Deno :

   deno install

4. Exécution de l'application Si vous utilisez Node.js :

   npm run dev

Si vous utilisez Deno :

   deno task start

L'application fonctionnera sur lehttp://localhost:3000.

Mode d'emploi

1. Ouvrir l'application Ouvrir dans votre navigateurhttp://localhost:3000.
2. Sélectionner la voix Sélectionnez une voix et démarrez une session audio.
3. Appel d'outil Le projet fournit cinq exemples de fonctions qui montrent comment appeler l'outil du côté client :
   • getCurrentTime: Obtenir l'heure actuelle.
   • partyMode: Passez en mode fête.
   • changeBackground: Modifier l'arrière-plan.
   • launchWebsite: Lancer le site.
   • copyToClipboardCopier dans le presse-papiers.
4. Prise en charge multilingue La localisation multilingue des chaînes d'application et des agents vocaux peut être réalisée en sélectionnant différentes langues.

Déploiement à Vercel

1. Déploiement en un clic Avec la plateforme Vercel, l'application peut être déployée en un seul clic.
2. Configuration des variables d'environnement Dans les paramètres du projet Vercel, ajoutez votre clé API OpenAI.

licences

Le projet est open source sous la licence MIT, voir le fichier LICENSE pour plus de détails.

une note de remerciement

Merci à OpenAI pour l'API et les modèles, au framework Next.js, à Tailwind CSS pour le style, et au blog de Simon Willison pour l'inspiration.