我如何使用 CopilotKit 和 Next.js 建立音樂歌詞查找器應用程式：逐步指南

大家好，我的開源戰士們！隨著 Hacktoberfest 季節接近尾聲，我希望您的貢獻能取得良好進展。今天我想與大家分享如何使用 Copilotkit 的 AI 功能來開發一個允許用戶搜尋歌詞的 Web 應用程式。以下是我們將用於建立此專案的關鍵技術：

• Next.js：一個 React 框架，支援伺服器端渲染和靜態網站生成，以建立快速、可擴展的 Web 應用程式。
• Tailwind CSS：實用程式優先的 CSS 框架，用於快速建立自訂使用者介面。
• Shadcn UI：專為現代 Web 應用程式設計的開源 UI 元件庫。
• CopilotKit：一種開源工具，可以輕鬆地將可用於生產的 Copilot 整合到任何應用程式中。透過 CopilotKit，您可以無縫實現自訂 AI 聊天機器人和 AI 代理，以增強應用程式的功能。

項目設定

首先，我們將建立一個新的 Next.js 應用程式。 （在撰寫本文時，我正在使用 Next.js 14）

npx create-next-app@latest

選擇您的首選選項，然後 cd 進入您的專案並安裝以下依賴項：

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime 

前往 Groq Console，如果您沒有帳戶，請註冊一個新帳戶，然後在儀表板中產生 API 金鑰

現在在專案的根目錄中，建立一個 .env.local 檔案並貼上您的 API 金鑰和以下參數，如下所示：

GROQ_API_KEY="groq api key"
GROQ_MODEL="llama3-8b-8192"

酷！ ，在我們開始專案之前，快速安裝 ShadcnUI 庫：

npm install npx shadcn@latest init

選擇您喜歡的配置，然後使用以下指令取得 Card 元件

npx shadcn@latest add card

您也可以選擇安裝react-icons庫

npm install react-icons --save

現在我們已經解決了這個問題，讓我們開始建立專案

---

建設項目

我們首先從應用程式的後端部分開始。在 app 資料夾內建立一個 api 資料夾。在 api 資料夾中，建立兩個資料夾，即：actions 和 copilotkit。您的資料夾結構應如下所示：

├── 應用程式
│ ├── api
│ │ ├── 行動
│ │ └── 副駕駛套件

在 actions 資料夾中建立一個名為 lyric.ts 的檔案。複製以下程式碼：

"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.";
    }
}

開啟copilotkit資料夾並建立一個route.ts檔案。複製以下程式碼：

npx create-next-app@latest

現在我們已經完成了應用程式的後端。對於前端，打開為我們建立的元件資料夾並建立一個名為 LyricFinder.tsx 的檔案。您的資料夾結構應如下所示：

├── 組件
│ ├── ui
│ ├── LyricFinder.tsx

現在複製以下程式碼：

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime 

開啟應用程式資料夾根目錄中的頁面檔案並貼上以下程式碼：

GROQ_API_KEY="groq api key"
GROQ_MODEL="llama3-8b-8192"

甜甜的！我們已經完成了應用程式的建置。開啟終端機並啟動開發伺服器

npm install npx shadcn@latest init

在瀏覽器中開啟 http://localhost:3000 查看應用程式。

結論

這是一個包裝！在本教程中，我們成功使用 CopilotKit 建立了音樂歌詞查找器應用程序，展示了將 AI 整合到我們的應用程式中是多麼容易。

您可以在此 Github 儲存庫中查看完整的原始程式碼

這裡是該專案的現場演示

有任何問題嗎？評論裡提問

駭客快樂！

以上是我如何使用 CopilotKit 和 Next.js 建立音樂歌詞查找器應用程式：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！