【免费下载链接】openai-chatkit-advanced-samplesStarter app to build with OpenAI ChatKit SDK项目地址https://gitcode.com/gh_mirrors/op/openai-chatkit-advanced-samples点击查看免费下载本文基于开源项目openai-chatkit-advanced-samples详解ChatKit 听写语音转文字功能的完整实现前端如何用一行配置开启麦克风输入服务端又如何调用gpt-4o-transcribe把语音实时转成文字填入输入框。读完你即可在自己的 ChatKit 应用中复刻这套「开口说、不用打字」的体验。听写功能在哪里Customer Support 示例仓库收录了 4 个 ChatKit 场景示例其中Customer Support航空客服是唯一启用听写的示例聊天输入框内置麦克风按钮点击即可开口说话应用会先把语音转写为文字再发送。官方在仓库 README 的功能索引中也专门列出了这项能力README.md前端通过composer.dictation开启服务端通过实现ChatKitServer.transcribe()完成转写。下面逐层拆解。前端一键开启composer.dictation 配置听写的前端开关只有一个配置项。在 Customer Support 的聊天面板组件 ChatKitPanel.tsx 中useChatKit的composer选项里声明composer: { placeholder: Ask the concierge a question, attachments: { enabled: true, maxSize: MAX_UPLOAD_BYTES, accept: IMAGE_ATTACHMENT_ACCEPT }, dictation: { enabled: true }, },就这么一行dictation: { enabled: true }openai/chatkit-reactSDK 会自动在输入框里渲染出麦克风按钮并接管录音、上传等交互。你无需自己处理MediaRecorder、音频分片或 WebSocket 细节——这正是 ChatKit SDK「把复杂留给 SDK」的价值所在。体验路径参考 customer-support/README.md点击输入框的麦克风按钮 → 授予浏览器麦克风权限 → 说出你的请求例如“帮我把 OA476 航班换到 14C 座”→ 转写完成的文字会填入输入框确认后即可发送。服务端语音转文字实现 ChatKitServer.transcribe()前端录制的音频最终会发送到后端的/support/chatkit入口main.py由ChatKitServer统一路由。而真正决定「能不能转、用哪个模型转」的是服务端是否实现了transcribe()钩子。在 server.py 中CustomerSupportServer覆写了该方法async def transcribe(self, audio_input: AudioInput, context: dict[str, Any]) - TranscriptionResult: ext { audio/webm: webm, audio/mp4: m4a, audio/ogg: ogg, }.get(audio_input.media_type) if not ext: raise HTTPException(status_code400, detailUnexpected audio format) audio_file io.BytesIO(audio_input.data) audio_file.name faudio.{ext} transcription client.audio.transcriptions.create( modelgpt-4o-transcribe, fileaudio_file ) return TranscriptionResult(texttranscription.text)这段不到 15 行的代码包含 3 个关键决策格式白名单SDK 传入的AudioInput带有media_type这里只放行webm / m4a / ogg三种浏览器常见录音格式遇到未知格式直接返回 400避免把脏数据喂给转写模型文件命名技巧OpenAI 的audio.transcriptions接口需要依据文件名后缀识别格式所以代码给内存流临时命名为audio.{ext}这是不少初学者的踩坑点返回TranscriptionResult只需把transcription.text包进 SDK 定义的TranscriptionResult返回前端输入框就会自动填入文本。完整调用链路一次听写的旅程把前后端串起来一次语音输入经历如下流程步骤发生位置关键动作1浏览器输入框点击麦克风按钮dictation开始录音2前端 →/support/chatkit音频流webm发送到 ChatKit 服务端点3server.pytranscribe()校验格式并调用gpt-4o-transcribe4浏览器输入框转写文本回填用户确认或编辑5ChatKit 对话流消息作为普通文本消息发送进入 Agent 推理值得注意的一点听写只负责「语音 → 文本」这一步转写完成后走的就是普通消息通道与手打消息完全等价。因此 Agent 的工具调用、侧边栏状态同步等能力对语音输入天然可用零额外适配。本地运行3 步跑起来# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/op/openai-chatkit-advanced-samples # 2. 准备环境变量需安装 uv export OPENAI_API_KEYsk-... export VITE_SUPPORT_CHATKIT_API_DOMAIN_KEY任意非空占位值 # 3. 仓库根目录一键启动 npm run customer-support启动后访问http://localhost:5171在输入框点击麦克风即可体验。前后端分工可对照 customer-support/README.md 中的 Quickstart 章节逐步排查。复刻到你自己项目要点清单️ 想在其他示例Cat Lounge、News Guide、Metro Map中加入听写只需两步前端在对应ChatKitPanel.tsx的composer配置中加上dictation: { enabled: true }服务端让ChatKitServer子类实现transcribe()转写模型可沿用gpt-4o-transcribe也按需替换为你自己的 ASR 服务只需返回TranscriptionResult。两个小提醒生产环境部署时前端域名需登记到 OpenAI 平台的域名白名单并把正式 domain key 配入VITE_SUPPORT_CHATKIT_API_DOMAIN_KEY开发阶段任意非空占位值即可配置细节见 config.ts听写依赖浏览器麦克风权限务必在支持 HTTPS或 localhost的环境下测试否则浏览器会直接拒绝录音。总结ChatKit 的听写能力把「语音转文字」拆成了极简的前后端契约前端一行dictation配置负责开启体验服务端一个transcribe()方法负责落地转写中间的音频采集、上传、回填全部由 SDK 托管。以 Customer Support 示例为模板你几乎可以零成本地为任何 ChatKit 应用加上「开口说不用打字」的交互能力。赞分享【免费下载链接】openai-chatkit-advanced-samplesStarter app to build with OpenAI ChatKit SDK项目地址https://gitcode.com/gh_mirrors/op/openai-chatkit-advanced-samples点击查看免费下载相关推荐ChatKit Widgets 组件体系通关从 .widget 模板到交互卡片openai-chatkit-advanced-samples 深度实践ChatKit Widgets 组件体系通关从 .widget 模板到交互卡片openai chatkit advanced samples 深度实践 op打造 AI 航空客服系统openai-chatkit-advanced-samples Customer Support 场景全流程实战打造 AI 航空客服系统openai chatkit advanced samples Customer Support 场景全流程实战 openai chaopenai-chatkit-advanced-samples 实体标注完全指南让站点名、文章引用可点击直达openai chatkit advanced samples 实体标注完全指南让站点名、文章引用可点击直达 openai chatkit advanced上一篇TinyKVM协作式多线程实现Python和Node.js支持详解下一篇5 分钟摸清 Windows 系统安全家底OpenArk 零依赖上手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考