OpenAI 실시간 API Next.js: 실시간 음성 대화 AI 애플리케이션을 구축하기 위한 Next.js 템플릿

일반 소개

OpenAI 실시간 API Next.js는 개발자가 실시간 음성 AI 애플리케이션을 빠르게 구축할 수 있도록 설계된 Next.js 프레임워크 기반의 오픈 소스 프로젝트입니다. 이 프로젝트는 OpenAI의 실시간 API와 WebRTC 기술을 통합하여 함수를 호출할 수 있는 최신 UI 구성 요소와 도구를 제공합니다. 이 템플릿을 사용하면 개발자는 다국어 현지화를 통해 실시간 오디오 대화를 지원하는 음성 AI 애플리케이션을 쉽게 만들 수 있습니다. 또한 이 프로젝트에는 코드 품질과 유지보수성을 보장하기 위해 엄격한 TypeScript 유형 안전 및 eslint 규칙이 포함되어 있습니다.

온라인 데모: https://openai-rt-shadcn.vercel.app/

기능 목록

• Next.js 프레임워크Next.js를 사용한 서버 측 렌더링 및 API 라우팅.
• 현대화된 UIshadcn/ui 컴포넌트를 사용한 Tailwind CSS 및 Framer Motion을 사용한 애니메이션 디자인.
• WebRTC 지원실시간 오디오 대화 구현을 간소화하기 위해 WebRTC 처리를 추상화하는 훅을 제공합니다.
• 도구 호출실시간 API와 함께 클라이언트 측 도구의 사용을 보여주는 5가지 샘플 함수가 포함되어 있습니다.
• 다국어 로컬라이제이션문자열 및 음성 에이전트가 적용되는 언어(영어, 스페인어, 프랑스어, 중국어)를 선택할 수 있습니다.
• 유형 안전TypeScript를 사용하고 엄격한 eslint 규칙을 따르세요.

도움말 사용

설치 프로세스

1. 클론 창고

   git clone https://github.com/cameronking4/openai-realtime-api-nextjs.git
cd openai-realtime-api-nextjs

2. 환경 설정 루트 디렉토리에.env파일을 열고 OpenAI API 키를 추가합니다:

   OPENAI_API_KEY=your-openai-api-key

3. 종속성 설치 Node.js를 사용하는 경우

   npm install

Deno를 사용하는 경우:

   deno install

4. 애플리케이션 실행 Node.js를 사용하는 경우

   npm run dev

Deno를 사용하는 경우:

   deno task start

애플리케이션은http://localhost:3000.

사용 지침

1. 애플리케이션 열기 브라우저에서 열기http://localhost:3000.
2. 음성 선택 음성을 선택하고 오디오 세션을 시작합니다.
3. 도구 호출 이 프로젝트는 클라이언트 측에서 도구를 호출하는 방법을 보여주는 다섯 가지 샘플 함수를 제공합니다:
   • getCurrentTime: 현재 시간을 가져옵니다.
   • partyMode파티 모드로 전환합니다.
   • changeBackground: 배경을 변경합니다.
   • launchWebsite: 사이트를 시작합니다.
   • copyToClipboard: 클립보드에 복사합니다.
4. 다국어 지원 애플리케이션 문자열과 음성 에이전트의 다국어 로컬라이제이션은 다양한 언어를 선택하여 수행할 수 있습니다.

Vercel에 배포

1. 원클릭 배포 Vercel 플랫폼을 사용하면 클릭 한 번으로 애플리케이션을 배포할 수 있습니다.
2. 환경 변수 구성 버셀의 프로젝트 설정에서 OpenAI API 키를 추가합니다.

라이선스

이 프로젝트는 MIT 라이선스에 따라 오픈 소스이며, 자세한 내용은 라이선스 파일을 참조하세요.

감사 메모

API와 모델은 OpenAI, Next.js 프레임워크, 스타일링은 Tailwind CSS, 영감을 준 Simon Willison의 블로그에 감사드립니다.