meta-glasses-api 开源贡献指南5 步提交 PR 扩展新的 AI 提供商【免费下载链接】meta-glasses-apiHey Meta send a message to ChatGPT Mai: A Hacky Messenger browser extension pseudo API for the Meta Glasses :eyeglasses:项目地址: https://gitcode.com/gh_mirrors/me/meta-glasses-apimeta-glasses-api 是一个能让 Meta 智能眼镜通过 Messenger 直接调用 ChatGPT、Claude、Gemini 等大模型的开源浏览器扩展。本指南专为开源贡献新手打造手把手教你如何扩展新的 AI 提供商并成功提交 Pull Request。跟着这篇完整的开源贡献教程你将学会从克隆仓库、搭建开发环境到修改源码、验证测试、提交 PR 的全流程迈出你的第一次开源贡献。认识 meta-glasses-api你的第一次贡献从哪开始简单来说meta-glasses-api 在 Messenger 网页端注入了一个「AI 机器人」面板。你只需要对眼镜说一句 Hey Meta, send a message to ChatGPT它就会把消息转发给你配置的大模型再把 AI 的回答送回聊天窗口——甚至连语音回复TTS都能自动生成。项目目前已经内置了 6 个聊天 AI 提供商OpenAI、AnthropicClaude、Perplexity、GoogleGemini、DeepSeek、xAIGrok以及 ElevenLabs、Minimax 等语音合成提供商。那么问题来了如果你喜欢的模型不在列表里怎么办—— 自己动手提交一个 PR 把它加进去为什么扩展 AI 提供商是新手的最佳切入点很多人第一次接触开源项目会感到无从下手。但在 meta-glasses-api 中扩展 AI 提供商恰恰是难度最低、收益最直观的贡献方式改动集中只需要动几个明确的文件不涉及复杂的消息监听、截图、视频监控逻辑模式现成项目基于 Vercel AI SDKai-sdk/*系列包大多数主流模型都有官方 SDK照着已有代码抄即可反馈即时改完立刻能在浏览器扩展的设置下拉框里看到新选项成就感满满。下面我们按 5 个步骤走完「从克隆到合并」的完整流程。第一步克隆仓库并搭建本地开发环境在开始写代码之前先把项目跑起来。打开终端执行git clone https://gitcode.com/gh_mirrors/me/meta-glasses-api cd meta-glasses-api bun install bun run dev:chrome小提示项目使用bun作为包管理器见 package.json如果你的机器还没安装 bun需要先安装它。dev:chrome会启动 WXT 开发服务器并自动打开浏览器扩展装好后登录你的备用 Messenger 账号打开任意会话就能看到右下角的 Mai 控制面板了。第二步注册新的 Provider 类型项目的所有提供商都是强类型枚举定义在 src/types/index.ts 中。比如要新增mistral就在Provider枚举里加上一行MISTRAL: mistral,这一步的作用是让 TypeScript 编译器在后续所有用到 Provider 的地方都认识这个新值——改错一处类型检查就会立刻报错提醒你非常贴心。第三步在常量文件登记提供商信息和模型列表接下来打开 src/lib/constants.ts这里有三处需要同步更新providerInformationconstants.ts登记新提供商的名称、官网、模型文档页、API Key 获取页以及 Logo 组件aiChatProviders数组constants.ts把新提供商的 key 加进去它决定了设置面板下拉框里会出现哪个选项providerToModelsconstants.ts列出该提供商支持的模型列表比如[{ title: Mistral Large, value: mistral-large-latest }]。好消息是只要这里配置好了设置界面会自动渲染新选项无需改动任何 UI 代码。提供商下拉框和模型下拉框分别由 chat-provider-settings.tsx 和 chat-model-settings.tsx 动态读取这些配置生成。第四步在 AI 核心模块创建客户端这是最关键的一步。所有聊天请求最终都会走到 src/lib/ai.ts 的createAiProvider函数ai.ts它根据当前选择的 provider 创建对应的 AI SDK 客户端。现有的写法非常统一例如case Provider.PERPLEXITY: return createPerplexity({ apiKey });照着同样的模式为你的新提供商加一个case分支即可。别忘了先在package.json中安装对应的 SDK 依赖如ai-sdk/mistral这样createAiProvider的返回类型联合中也要把新类型加进去。如果你要扩展的是语音合成TTS提供商则参考 ai.ts 中的aiTtsRequest分发逻辑并仿照 ElevenLabs、Minimax 的 fetch 实现写一个请求函数。第五步更新存储配置让 API Key 有地方可存最后一步是让扩展知道这个新提供商的 API Key 存在哪。打开 src/lib/storage.ts在API_KEYS的 fallback 中为你的提供商补一个空字符串字段同时在 settings.store.ts 和 storage.ts 的默认模型配置里为它指定一个默认模型。这样用户在设置面板填入 Key 后就能正常持久化到浏览器存储中。验证与测试提交前必过的三关代码写完了别急着提交。在本地依次跑完这三条命令确保零错误bun run lint # 代码规范检查biome bun run typecheck # TypeScript 类型检查 bun run dev:chrome # 手动验证切到新提供商实际发一条消息项目还内置了 vitest 测试框架见 utils.test.ts如果你为新增逻辑写了单元测试运行bun test确认全部通过。手动验证时记得真的调用一次 API确认返回结果正常。提交 PR 的最佳实践清单一切就绪提交你的 Pull Request参考这份清单能让维护者一眼看懂你的改动✅ 从最新的主干分支切出功能分支命名如feat/add-mistral-provider✅ 提交信息写清楚做了什么例如feat: add Mistral as a new AI provider✅ PR 标题直接点明新增的提供商名称描述里附上配置截图和验证结果✅ 说明你添加的模型名称、API Key 获取方式方便维护者快速审查。常见问题FAQQ项目为什么用 bun 而不是 npmAREADME 和 package.json 中约定使用 bun 作为包管理器bun.lock是锁文件。为了保持依赖一致建议跟随项目约定。Q我要加的模型没有对应的 ai-sdk 官方包怎么办A可以在 ai.ts 中直接使用 fetch 调用该模型的 HTTP 接口参考已有的 ElevenLabs、Minimax TTS 实现ai.ts照样能接入。QTTS 提供商和聊天提供商是一回事吗A不是。聊天提供商管文字回答TTS 提供商管语音播报二者在 types/index.ts 中是分开定义的接入时注意区分。开始你的第一次开源贡献吧从一行枚举到一次成功的 PR扩展一个新的 AI 提供商其实就这么简单。meta-glasses-api 的架构把「接入新模型」这件看似复杂的事拆解成了清晰、可复制的小步骤——这正是优秀开源项目该有的样子。现在就去克隆仓库、动手试试吧期待在 Contributors 列表里看到你的名字 【免费下载链接】meta-glasses-apiHey Meta send a message to ChatGPT Mai: A Hacky Messenger browser extension pseudo API for the Meta Glasses :eyeglasses:项目地址: https://gitcode.com/gh_mirrors/me/meta-glasses-api创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/20 20:12:50 · 阅读 1.2k meta-glasses-api 开源贡献指南：5 步提交 PR 扩展新的 AI 提供商
meta-glasses-api 开源贡献指南5 步提交 PR 扩展新的 AI 提供商【免费下载链接】meta-glasses-apiHey Meta send a message to ChatGPT Mai: A Hacky Messenger browser extension pseudo API for the Meta Glasses :eyeglasses:项目地址: https://gitcode.com/gh_mirrors/me/meta-glasses-apimeta-glasses-api 是一个能让 Meta 智能眼镜通过 Messenger 直接调用 ChatGPT、Claude、Gemini 等大模型的开源浏览器扩展。本指南专为开源贡献新手打造手把手教你如何扩展新的 AI 提供商并成功提交 Pull Request。跟着这篇完整的开源贡献教程你将学会从克隆仓库、搭建开发环境到修改源码、验证测试、提交 PR 的全流程迈出你的第一次开源贡献。认识 meta-glasses-api你的第一次贡献从哪开始简单来说meta-glasses-api 在 Messenger 网页端注入了一个「AI 机器人」面板。你只需要对眼镜说一句 Hey Meta, send a message to ChatGPT它就会把消息转发给你配置的大模型再把 AI 的回答送回聊天窗口——甚至连语音回复TTS都能自动生成。项目目前已经内置了 6 个聊天 AI 提供商OpenAI、AnthropicClaude、Perplexity、GoogleGemini、DeepSeek、xAIGrok以及 ElevenLabs、Minimax 等语音合成提供商。那么问题来了如果你喜欢的模型不在列表里怎么办—— 自己动手提交一个 PR 把它加进去为什么扩展 AI 提供商是新手的最佳切入点很多人第一次接触开源项目会感到无从下手。但在 meta-glasses-api 中扩展 AI 提供商恰恰是难度最低、收益最直观的贡献方式改动集中只需要动几个明确的文件不涉及复杂的消息监听、截图、视频监控逻辑模式现成项目基于 Vercel AI SDKai-sdk/*系列包大多数主流模型都有官方 SDK照着已有代码抄即可反馈即时改完立刻能在浏览器扩展的设置下拉框里看到新选项成就感满满。下面我们按 5 个步骤走完「从克隆到合并」的完整流程。第一步克隆仓库并搭建本地开发环境在开始写代码之前先把项目跑起来。打开终端执行git clone https://gitcode.com/gh_mirrors/me/meta-glasses-api cd meta-glasses-api bun install bun run dev:chrome小提示项目使用bun作为包管理器见 package.json如果你的机器还没安装 bun需要先安装它。dev:chrome会启动 WXT 开发服务器并自动打开浏览器扩展装好后登录你的备用 Messenger 账号打开任意会话就能看到右下角的 Mai 控制面板了。第二步注册新的 Provider 类型项目的所有提供商都是强类型枚举定义在 src/types/index.ts 中。比如要新增mistral就在Provider枚举里加上一行MISTRAL: mistral,这一步的作用是让 TypeScript 编译器在后续所有用到 Provider 的地方都认识这个新值——改错一处类型检查就会立刻报错提醒你非常贴心。第三步在常量文件登记提供商信息和模型列表接下来打开 src/lib/constants.ts这里有三处需要同步更新providerInformationconstants.ts登记新提供商的名称、官网、模型文档页、API Key 获取页以及 Logo 组件aiChatProviders数组constants.ts把新提供商的 key 加进去它决定了设置面板下拉框里会出现哪个选项providerToModelsconstants.ts列出该提供商支持的模型列表比如[{ title: Mistral Large, value: mistral-large-latest }]。好消息是只要这里配置好了设置界面会自动渲染新选项无需改动任何 UI 代码。提供商下拉框和模型下拉框分别由 chat-provider-settings.tsx 和 chat-model-settings.tsx 动态读取这些配置生成。第四步在 AI 核心模块创建客户端这是最关键的一步。所有聊天请求最终都会走到 src/lib/ai.ts 的createAiProvider函数ai.ts它根据当前选择的 provider 创建对应的 AI SDK 客户端。现有的写法非常统一例如case Provider.PERPLEXITY: return createPerplexity({ apiKey });照着同样的模式为你的新提供商加一个case分支即可。别忘了先在package.json中安装对应的 SDK 依赖如ai-sdk/mistral这样createAiProvider的返回类型联合中也要把新类型加进去。如果你要扩展的是语音合成TTS提供商则参考 ai.ts 中的aiTtsRequest分发逻辑并仿照 ElevenLabs、Minimax 的 fetch 实现写一个请求函数。第五步更新存储配置让 API Key 有地方可存最后一步是让扩展知道这个新提供商的 API Key 存在哪。打开 src/lib/storage.ts在API_KEYS的 fallback 中为你的提供商补一个空字符串字段同时在 settings.store.ts 和 storage.ts 的默认模型配置里为它指定一个默认模型。这样用户在设置面板填入 Key 后就能正常持久化到浏览器存储中。验证与测试提交前必过的三关代码写完了别急着提交。在本地依次跑完这三条命令确保零错误bun run lint # 代码规范检查biome bun run typecheck # TypeScript 类型检查 bun run dev:chrome # 手动验证切到新提供商实际发一条消息项目还内置了 vitest 测试框架见 utils.test.ts如果你为新增逻辑写了单元测试运行bun test确认全部通过。手动验证时记得真的调用一次 API确认返回结果正常。提交 PR 的最佳实践清单一切就绪提交你的 Pull Request参考这份清单能让维护者一眼看懂你的改动✅ 从最新的主干分支切出功能分支命名如feat/add-mistral-provider✅ 提交信息写清楚做了什么例如feat: add Mistral as a new AI provider✅ PR 标题直接点明新增的提供商名称描述里附上配置截图和验证结果✅ 说明你添加的模型名称、API Key 获取方式方便维护者快速审查。常见问题FAQQ项目为什么用 bun 而不是 npmAREADME 和 package.json 中约定使用 bun 作为包管理器bun.lock是锁文件。为了保持依赖一致建议跟随项目约定。Q我要加的模型没有对应的 ai-sdk 官方包怎么办A可以在 ai.ts 中直接使用 fetch 调用该模型的 HTTP 接口参考已有的 ElevenLabs、Minimax TTS 实现ai.ts照样能接入。QTTS 提供商和聊天提供商是一回事吗A不是。聊天提供商管文字回答TTS 提供商管语音播报二者在 types/index.ts 中是分开定义的接入时注意区分。开始你的第一次开源贡献吧从一行枚举到一次成功的 PR扩展一个新的 AI 提供商其实就这么简单。meta-glasses-api 的架构把「接入新模型」这件看似复杂的事拆解成了清晰、可复制的小步骤——这正是优秀开源项目该有的样子。现在就去克隆仓库、动手试试吧期待在 Contributors 列表里看到你的名字 【免费下载链接】meta-glasses-apiHey Meta send a message to ChatGPT Mai: A Hacky Messenger browser extension pseudo API for the Meta Glasses :eyeglasses:项目地址: https://gitcode.com/gh_mirrors/me/meta-glasses-api创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考