안녕하세요, 오픈소스 전사 여러분! Hacktoberfest 시즌이 다가오고 있는 지금, 귀하의 기여가 좋은 진전을 이루고 있기를 바랍니다. 오늘 저는 Copilotkit의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!