Wie ich mit CopilotKit und Next.js eine Music Lyric Finder-App erstellt habe: Eine Schritt-für-Schritt-Anleitung

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:

• Next.js: Ein React-Framework, das serverseitiges Rendering und statische Site-Generierung zum Erstellen schneller, skalierbarer Webanwendungen ermöglicht.
• Tailwind CSS: Ein Utility-First-CSS-Framework zum schnellen Erstellen benutzerdefinierter Benutzeroberflächen.
• Shadcn UI: Eine Open-Source-UI-Komponentenbibliothek, die für moderne Webanwendungen entwickelt wurde.
• CopilotKit: Ein Open-Source-Tool, das die einfache Integration produktionsbereiter Copiloten in jede Anwendung ermöglicht. Mit CopilotKit können Sie benutzerdefinierte KI-Chatbots und KI-Agenten nahtlos implementieren, um die Funktionalität Ihrer Anwendung zu verbessern.

Projekt-Setup

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

---

Aufbau des Projekts

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.

Abschluss

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!