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

Ablauf der Installation

1. Klon-Lager

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

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

   OPENAI_API_KEY=Ihr-openai-api-schlüssel

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

   npm-Installation

Bei Verwendung von Deno:

   Deno-Installation

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

   npm run dev

Bei Verwendung von Deno:

   Start der Deno-Aufgabe

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.
   • StartWebsite: Starten Sie die Website.
   • copyToClipboardIn die Zwischenablage kopieren.
4. Mehrsprachige Unterstützung Die mehrsprachige Lokalisierung von Anwendungsstrings und Sprachagenten kann durch die Auswahl verschiedener Sprachen erreicht werden.

Entsendung nach Vercel

1. Bereitstellung mit einem Klick 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.