OpenAI Realtime API Next.js：构建实时语音对话AI应用的Next.js模板

综合介绍

OpenAI Realtime API Next.js 是一个基于Next.js框架的开源项目，旨在帮助开发者快速构建实时语音AI应用。该项目集成了OpenAI的实时API和WebRTC技术，提供了现代化的UI组件和工具调用功能。通过使用这个模板，开发者可以轻松创建支持实时音频对话的语音AI应用，并实现多语言本地化。项目还包含严格的TypeScript类型安全和eslint规则，确保代码质量和可维护性。

在线演示：https://openai-rt-shadcn.vercel.app/

功能列表

• Next.js框架：使用Next.js进行服务器端渲染和API路由。
• 现代化UI：采用Tailwind CSS和Framer Motion进行动画设计，使用shadcn/ui组件。
• WebRTC支持：提供一个抽象WebRTC处理的hook，简化实时音频对话的实现。
• 工具调用：包含五个示例函数，展示客户端工具与实时API的结合使用。
• 多语言本地化：支持选择应用字符串和语音代理的语言（英语、西班牙语、法语、中文）。
• 类型安全：使用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. 配置环境变量 在Vercel的项目设置中，添加你的OpenAI API密钥。

许可证

该项目基于MIT许可证开源，详细信息请参阅LICENSE文件。

致谢

感谢OpenAI提供的API和模型，Next.js框架，Tailwind CSS的样式设计，以及Simon Willison的博客提供的灵感。