CopilotKit 및 Next.js를 사용하여 음악 가사 찾기 앱을 구축하는 방법: 단계별 가이드

안녕하세요, 오픈소스 전사 여러분! 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!