안녕하세요, 오픈소스 전사 여러분! Hacktoberfest 시즌이 다가오고 있는 지금, 귀하의 기여가 좋은 진전을 이루고 있기를 바랍니다. 오늘 저는 Copilotkit의 AI 기능을 사용하여 사용자가 노래 가사를 검색할 수 있는 웹 앱을 개발하는 방법을 여러분과 공유하고 싶습니다. 다음은 이 프로젝트를 구축하는 데 사용할 주요 기술입니다.
먼저 새로운 Next.js 앱을 만들어 보겠습니다. (이 글을 쓰는 시점에서는 Next.js 14를 사용하고 있습니다.)
1 |
|
원하는 옵션을 선택한 후 프로젝트에 CD를 넣고 다음 종속성을 설치합니다.
1 |
|
Groq 콘솔로 이동하여 계정이 없으면 새 계정을 등록한 다음 대시보드에서 API 키를 생성하세요
이제 프로젝트 루트에서 .env.local 파일을 생성하고 API 키와 다음 매개변수를 붙여넣습니다.
1 2 |
|
멋지네요! 프로젝트 작업을 시작하기 전에 ShadcnUI 라이브러리를 빠르게 설치하세요.
1 |
|
원하는 구성을 선택한 후 아래 명령을 사용하여 카드 구성 요소를 가져옵니다
1 |
|
선택적으로 반응 아이콘 라이브러리를 설치할 수도 있습니다
1 |
|
이제 문제가 해결되었으므로 프로젝트 구축에 대해 살펴보겠습니다
우선 앱의 백엔드 부분부터 시작하겠습니다. 앱 폴더 안에 api 폴더를 생성합니다. api 폴더 안에 actions와 copilotkit이라는 두 개의 폴더를 만듭니다. 폴더 구조는 다음과 같아야 합니다.
├── 앱
│ ├── api
│ │ ├── 작업
│ │ └── 부조종사 키트
actions 폴더 안에 lyric.ts라는 파일을 만듭니다. 아래 코드를 복사하세요:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
copilotkit 폴더를 열고 Route.ts 파일을 생성하세요. 아래 코드를 복사하세요:
1 |
|
이제 앱의 백엔드 작업이 완료되었습니다. 프런트엔드의 경우 생성된 구성 요소 폴더를 열고 LyricFinder.tsx라는 파일을 만듭니다. 폴더 구조는 다음과 같아야 합니다.
├── 구성요소
│ ├── ui
│ ├── LyricFinder.tsx
이제 아래 코드를 복사하세요.
1 |
|
앱 폴더 루트에 있는 페이지 파일을 열고 아래 코드를 붙여넣으세요.
1 2 |
|
달콤해요! 앱 구축이 완료되었습니다. 터미널을 열고 개발 서버를 시작하세요
1 |
|
앱을 보려면 브라우저에서 http://localhost:3000을 엽니다.
마감입니다! 이 튜토리얼에서는 CopilotKit을 사용하여 Music Lyric Finder 앱을 구축하고 AI를 애플리케이션에 통합하는 것이 얼마나 쉬운지 보여주었습니다.
이 Github 저장소에서 전체 소스 코드를 볼 수 있습니다
여기에서 프로젝트의 라이브 데모를 확인하세요
질문이 있으신가요? 댓글로 물어보세요
해킹을 즐겨보세요!
위 내용은 CopilotKit 및 Next.js를 사용하여 음악 가사 찾기 앱을 구축하는 방법: 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!