?????, ???? ?? ???! Hacktoberfest ??? ???? ?? ??, ??? ??? ?? ??? ??? ??? ????. ?? ?? Copilotkit? AI ??? ???? ???? ?? ??? ??? ? ?? ? ?? ???? ??? ???? ???? ????. ??? ? ????? ???? ? ??? ?? ?????.

• Next.js: ??? ?? ??? ? ??????? ???? ?? ?? ? ??? ? ?? ??? ??? ???? React ????????.
• Tailwind CSS: ??? ??? ?????? ??? ???? ?? ???? ?? CSS ????????.
• Shadcn UI: ?? ? ????????? ??? ?? ?? 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 ??? ???? ??? ??? ? ??? ??? ?? ?????? API ?? ?????

?? ???? ???? .env.local ??? ???? API ?? ?? ????? ??????.

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

????! ???? ??? ???? ?? ShadcnUI ?????? ??? ?????.

npm install npx shadcn@latest init

??? ??? ??? ? ?? ??? ???? ?? ?? ??? ?????

npx shadcn@latest add card

????? ?? ??? ?????? ??? ?? ????

npm install react-icons --save

?? ??? ??????? ???? ??? ?? ???????

---

???? ??

?? ?? ??? ???? ???????. ? ?? ?? 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? ???? Music Lyric Finder ?? ???? AI? ??????? ???? ?? ??? ??? ???????.

? Github ????? ?? ?? ??? ? ? ????

???? ????? ??? ??? ?????

??? ?????? ??? ?????

??? ?????!

? ??? CopilotKit ? Next.js? ???? ?? ?? ?? ?? ???? ??: ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!