大家好，我的开源战士们！随着 Hacktoberfest 季节接近尾声，我希望您的贡献取得良好进展。今天我想与大家分享如何使用 Copilotkit 的 AI 功能来开发一个允许用户搜索歌词的 Web 应用程序。以下是我们将用于构建此项目的关键技术：
首先，我们将创建一个新的 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中文网其他相关文章！
