Hallo, meine Open-Source-Krieger! Die Hacktoberfest-Saison neigt sich dem Ende zu und ich hoffe, dass Sie mit Ihren Beiträgen gute Fortschritte machen. Heute möchte ich mit Ihnen teilen, wie wir die KI-Funktionen von Copilotkit nutzen können, um eine Web-App zu entwickeln, mit der Benutzer nach Liedtexten suchen können. Nachfolgend sind die Schlüsseltechnologien aufgeführt, die wir zum Aufbau dieses Projekts verwenden werden:
Zuerst erstellen wir eine neue Next.js-App. (Zum Zeitpunkt des Schreibens dieses Artikels verwende ich Next.js 14)
npx create-next-app@latest
Wählen Sie Ihre bevorzugten Optionen, rufen Sie dann Ihr Projekt auf und installieren Sie die folgenden Abhängigkeiten:
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
Gehen Sie zur Groq-Konsole, registrieren Sie sich für ein neues Konto, falls Sie noch keins haben, und generieren Sie dann in Ihrem Dashboard einen API-Schlüssel
Erstellen Sie nun im Stammverzeichnis Ihres Projekts eine .env.local-Datei und fügen Sie Ihren API-Schlüssel und die folgenden Parameter wie folgt ein:
GROQ_API_KEY="groq api key" GROQ_MODEL="llama3-8b-8192"
Cool! Bevor wir mit der Arbeit am Projekt beginnen, installieren Sie schnell die ShadcnUI-Bibliothek:
npm install npx shadcn@latest init
Wählen Sie Ihre bevorzugte Konfiguration und verwenden Sie dann den folgenden Befehl, um die Kartenkomponente zu erhalten
npx shadcn@latest add card
Optional können Sie auch die React-Icons-Bibliothek installieren
npm install react-icons --save
Da wir das nun geklärt haben, können wir uns an den Aufbau des Projekts machen
Wir beginnen zunächst mit dem Backend-Teil unserer App. Erstellen Sie im App-Ordner einen API-Ordner. Erstellen Sie im API-Ordner zwei Ordner, nämlich „actions“ und „copilotkit“. Ihre Ordnerstruktur sollte so aussehen:
├── App
│ ├── API
│ │ ├── Aktionen
│ │ └── Copilotkit
Erstellen Sie eine Datei namens lyric.ts im Aktionsordner. Kopieren Sie den Code unten:
"use server"; export async function fetchLyrics({ song, artist }: { song: string; artist: string }) { const URL = `https://api.lyrics.ovh/v1/${artist}/${song}`; // url to access the lyrics api try { const response = await fetch(URL); if (!response.ok) { throw new Error("Lyrics not found"); } const data = await response.json(); return data.lyrics || "Lyrics not found."; } catch (error) { console.error("Error fetching lyrics:", error); return "An error occurred while fetching lyrics."; } }
Öffnen Sie den Copilotkit-Ordner und erstellen Sie eine route.ts-Datei. Kopieren Sie den Code unten:
npx create-next-app@latest
Jetzt sind wir mit dem Backend unserer App fertig. Öffnen Sie für das Frontend den für uns erstellten Komponentenordner und erstellen Sie eine Datei namens LyricFinder.tsx. Ihre Ordnerstruktur sollte so aussehen:
├── Komponenten
│ ├── ui
│ ├── LyricFinder.tsx
Kopieren Sie nun den folgenden Code:
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
Öffnen Sie die Auslagerungsdatei im Stammverzeichnis Ihres App-Ordners und fügen Sie den folgenden Code ein:
GROQ_API_KEY="groq api key" GROQ_MODEL="llama3-8b-8192"
Süß! Wir sind mit der Erstellung der App fertig. Öffnen Sie Ihr Terminal und starten Sie den Entwicklungsserver
npm install npx shadcn@latest init
Öffnen Sie http://localhost:3000 in Ihrem Browser, um die App anzuzeigen.
Das ist Schluss! In diesem Tutorial haben wir mit CopilotKit erfolgreich eine Music Lyric Finder-App erstellt und gezeigt, wie einfach es ist, KI in unsere Anwendung zu integrieren.
Sie können den vollständigen Quellcode in diesem Github-Repo ansehen
Hier ist eine Live-Demo des Projekts
Haben Sie Fragen? Fragen Sie in den Kommentaren
Viel Spaß beim Hacken!
Das obige ist der detaillierte Inhalt vonWie ich mit CopilotKit und Next.js eine Music Lyric Finder-App erstellt habe: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!