Erstelle eine GPT-3-gestützte App mit NextJS und Replit in 20 Minuten

Warum sollten Sie eine von GPT-3 unterstützte App erstellen?

Tauchen Sie ein in die revolutionäre Welt der Künstlichen Intelligenz mit OpenAI's GPT-3. In weniger als 20 Minuten lernen Sie, wie Sie die enormen Fähigkeiten eines 175 Milliarden Parameter Texttransformators nutzen können, um Ihre eigene Anwendung zu entwickeln. Dieses Tutorial richtet sich an Personen mit grundlegenden Kenntnissen in React und NextJS und führt Sie Schritt für Schritt durch den einfachen Prozess der Erstellung und Bereitstellung einer Webanwendung.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie die Grundlagen von React und NextJS verstehen. Wenn Sie neu in diesen Technologien sind, machen Sie sich keine Sorgen – es stehen zahlreiche Ressourcen online zur Verfügung, um Ihnen zu helfen, schnell zu lernen.

Einrichten von Replit und Importieren Ihres Projekts von GitHub

Der erste Schritt besteht darin, ein Konto bei Replit zu erstellen, das es Ihnen ermöglicht, Ihr Projekt reibungslos zu importieren und zu initialisieren. Diese Einrichtung ermöglicht es Ihnen, Updates in Echtzeit zu sehen, während Sie entwickeln.

Erste Schritte mit Replit

Loggen Sie sich bei Replit ein oder erstellen Sie ein neues Konto.
Klicken Sie auf das +-Zeichen in der oberen rechten Ecke, um ein neues Projekt zu erstellen.
Importieren Sie die GPT-3-Vorlage von GitHub, um Ihr Projekt zu starten. Verwenden Sie den folgenden Link:

GitHub-URL: GPT-3 NextJS Tailwind Starter

Klicken Sie auf die Schaltfläche Von GitHub importieren.

Installieren von Abhängigkeiten & Konfigurieren Ihres Projekts

Um zu beginnen, benötigen Sie Ihren GPT-3 API-Schlüssel von OpenAI. Wenn Sie noch keinen haben, besuchen Sie die Website von OpenAI, um sich anzumelden.

Integration Ihres API-Schlüssels

Klicken Sie auf das Schloss-Symbol auf der rechten Seite und erstellen Sie einen neuen Schlüssel.
Geben Sie im Schlüssel-Feld OPENAI_API_KEY ein und fügen Sie im Werte-Feld Ihren API-Schlüssel ein, der etwa so aussieht: sk-tKyMX1XbOS***Agaa5qx89UToRCy.
Ändern Sie den Ausführungsbefehl von npm run start zu npm run dev und klicken Sie auf die Schaltfläche Fertig.

Installieren von Abhängigkeiten

Nachdem Sie auf die große grüne SCHALTFLÄCHE KLICKEN geklickt haben, warten Sie, bis die Umgebung installiert und gestartet wurde. Dies zeigt Ausgaben im Konsolenfenster an, die Ihre Paketinstallationen und den Serverstart bestätigen.

Erstellen Ihrer von GPT-3 unterstützten Anwendung

Jetzt, wo Sie ein grundlegendes Frontend haben, das mit Ihrem GPT-3-unterstützten Backend verbunden ist, testen wir es!

Geben Sie Text in das Textfeld ein und klicken Sie auf die Schaltfläche Erstellen.
Ihr Eingabe erzeugt eine Antwort von GPT-3.

Anpassen Ihrer von GPT-3 unterstützten Anwendung

Mit einer funktionierenden GPT-3-Anwendung besteht der nächste Schritt darin, sie an Ihre spezifischen Bedürfnisse anzupassen. Beispielsweise möchten Sie möglicherweise ein Tool erstellen, das Artikel für soziale Medien zusammenfasst.

Konfigurieren des API-Endpunkts

Navigieren Sie zu /pages/api/openai.js. Diese Datei ermöglicht es Ihnen, die an GPT-3 gesendeten Aufforderungen zu ändern, indem Sie Variablen wie $beforePrompt und $afterPrompt verwenden.

Bearbeiten Sie /pages/index.js, um das <H1>-Tag und andere Tags anzupassen, die die Funktionen Ihrer Anwendung widerspiegeln.

Testen der Ergebnisse Ihrer Anwendung

Zum Testen kopieren Sie einen kurzen Artikel wie diesen von TechCrunch: Instagram hat gerade ein neues Feature angekündigt, das es Unternehmen ermöglicht, ihre Reels zu promoten...

Fazit

Herzlichen Glückwunsch zum Abschluss dieses kurzen GPT-3-Tutorials! Sie haben erfolgreich die Grundlagen gelegt, um verschiedene Anwendungen zu entwickeln. Warum nicht einen Schritt weitergehen? Nehmen Sie an unseren AI Hackathons teil, bei denen Sie in nur sieben Stunden mit einer globalen Gemeinschaft von über 52.000 Enthusiasten zusammenarbeiten können, um einen funktionierenden AI-App-Prototyp zu erstellen.

Lasst uns die Zukunft mit KI gestalten!

Für ein detaillierteres Verständnis lesen Sie unsere Artikel über NextJS-Grundlagen und Verstehen von KI-Technologien.