Hello there, my fellow open-source warriors! As the season of Hacktoberfest draws to a close, I hope you are making good progress with your contributions. Today I want to share with you how we can use the AI capabilities of Copilotkit to develop a web app that lets users search for song lyrics. Below are the key technologies we'll be using to build this project:

• Next.js: A React framework that enables server-side rendering and static site generation for building fast, scalable web applications.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
• Shadcn UI: An open-source UI component library designed for modern web applications.
• CopilotKit: An open-source tool that makes it easy to integrate production-ready Copilots into any application. With CopilotKit, you can seamlessly implement custom AI chatbots and AI agents to enhance the functionality of your application.

Project Setup

First, we'll create a new Next.js app. (At the time of writing this article, I'm using Next.js 14)

npx create-next-app@latest

Choose your preferred options and then cd into your project and install the following dependencies:

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

Head on over to Groq Console, register for a new account if you don't have one and then in your dashboard, generate an API key

Now in the root of your project, create an .env.local file and paste in your API key and the following parameters like so:

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

Cool!, before we start working on the project, quickly install the ShadcnUI library:

npm install npx shadcn@latest init

Choose your preferred configuration and then use the command below to get the Card component

npx shadcn@latest add card

Optionally, you can also install the react-icons library

npm install react-icons --save

Now that we have that out of the way, let's dive into building the project

Building the Project

We'll first of all start with the backend part of our app. Inside the app folder create a api folder. Inside the api folder, create two folders namely: actions and copilotkit. Your folder structure should look like this:

├── app
│ ├── api
│ │ ├── actions
│ │ └── copilotkit

Create a file called lyric.ts inside the actions folder. Copy the code below:

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

Open the copilotkit folder and create a route.ts file. Copy the code below:

npx create-next-app@latest

Now we're done with the backend of our app. For the frontend, open the components folder created for us and create a file called LyricFinder.tsx. Your folder structure should look like this:

├── components
│ ├── ui
│ ├── LyricFinder.tsx

Now copy the code below:

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

Open the page file in the root of your app folder and paste the code below:

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

Sweet! We're done with building the app. Open your terminal and start the development server

npm install npx shadcn@latest init

Open http://localhost:3000 in your browser to view the app.

Conclusion

That’s a wrap! In this tutorial, we successfully used CopilotKit to build a Music Lyric Finder app, showcasing how easy it is to integrate AI into our application.

You can view the complete source code in this Github repo

Here's a live demo of the project here

Got any questions? Ask in the comments

Happy Hacking!

The above is the detailed content of How I Built a Music Lyric Finder App with CopilotKit and Next.js: A Step-by-Step Guide. For more information, please follow other related articles on the PHP Chinese website!