我如何使用 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中文网其他相关文章！