OpenAI Realtime API Next.js: eine Next.js-Vorlage für die Entwicklung von Echtzeit-KI-Anwendungen mit Sprachdialog

Allgemeine Einführung

OpenAI Realtime API Next.js ist ein Open-Source-Projekt, das auf dem Next.js-Framework basiert und Entwicklern helfen soll, schnell Echtzeit-Sprach-KI-Anwendungen zu erstellen. Das Projekt integriert die Echtzeit-API von OpenAI und die WebRTC-Technologie und bietet moderne UI-Komponenten und Werkzeuge zum Aufrufen der Funktion. Mithilfe dieser Vorlage können Entwickler auf einfache Weise Sprach-KI-Anwendungen erstellen, die Echtzeit-Audiogespräche mit mehrsprachiger Lokalisierung unterstützen. Das Projekt umfasst auch strenge TypeScript-Typsicherheit und eslint-Regeln, um Codequalität und Wartbarkeit zu gewährleisten.

Online-Demo: https://openai-rt-shadcn.vercel.app/

Funktionsliste

• Next.js FrameworkServer-seitiges Rendering und API-Routing mit Next.js.
• Modernisierte UIAnimationsdesign mit Tailwind CSS und Framer Motion, unter Verwendung von shadcn/ui Komponenten.
• WebRTC-UnterstützungHook: Bietet einen Hook, der die WebRTC-Verarbeitung abstrahiert, um die Implementierung von Echtzeit-Audiodialogen zu vereinfachen.
• Werkzeug AufrufEnthält fünf Beispielfunktionen, die die Verwendung von clientseitigen Tools in Verbindung mit der Echtzeit-API demonstrieren.
• Mehrsprachige LokalisierungUnterstützung für die Auswahl der Sprache (Englisch, Spanisch, Französisch, Chinesisch), in der die Strings und Voice-Agents angewendet werden.
• TypensicherheitTypeScript verwenden und strenge eslint-Regeln befolgen.

Hilfe verwenden

Einbauverfahren

1. Klon-Lager

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

2. Umgebungseinstellungen Erstellen Sie im Stammverzeichnis eine.envDatei und fügen Sie Ihren OpenAI-API-Schlüssel hinzu:

   OPENAI_API_KEY=your-openai-api-key

3. Installation von Abhängigkeiten Bei Verwendung von Node.js:

   npm install

Bei Verwendung von Deno:

   deno install

4. Ausführen der Anwendung Bei Verwendung von Node.js:

   npm run dev

Bei Verwendung von Deno:

   deno task start

Die Anwendung läuft auf demhttp://localhost:3000.

Anweisungen für den Gebrauch

1. Öffnen Sie die Anwendung In Ihrem Browser öffnenhttp://localhost:3000.
2. Stimme auswählen Wählen Sie eine Stimme aus und starten Sie eine Audiositzung.
3. Werkzeug Aufruf Das Projekt enthält fünf Beispielfunktionen, die zeigen, wie das Tool auf der Client-Seite aufgerufen werden kann:
   • getCurrentTimeAbfrage der aktuellen Uhrzeit.
   • partyModeIn den Partymodus wechseln.
   • changeBackground: Ändern Sie den Hintergrund.
   • launchWebsite: Starten Sie die Website.
   • copyToClipboardIn die Zwischenablage kopieren.
4. Unterstützung mehrerer Sprachen Die mehrsprachige Lokalisierung von Anwendungsstrings und Sprachagenten kann durch die Auswahl verschiedener Sprachen erreicht werden.

Entsendung nach Vercel

1. Ein-Klick-Bereitstellung Mit der Vercel-Plattform lässt sich die Anwendung mit einem einzigen Klick bereitstellen.
2. Umgebungsvariablen konfigurieren Fügen Sie in den Projekteinstellungen von Vercel Ihren OpenAI-API-Schlüssel hinzu.

Lizenzen

Das Projekt ist quelloffen und steht unter der MIT-Lizenz, siehe die LICENSE-Datei für Details.

ein Dankeschön-Schreiben

Dank an OpenAI für die API und die Modelle, das Next.js-Framework, Tailwind CSS für das Styling und Simon Willisons Blog für die Inspiration.