meta-glasses-api 开源贡献指南：5 步提交 PR 扩展新的 AI 提供商-开发者社区

meta-glasses-api 开源贡献指南：5 步提交 PR 扩展新的 AI 提供商

【免费下载链接】meta-glasses-api"Hey 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

meta-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、Anthropic（Claude）、Perplexity、Google（Gemini）、DeepSeek、xAI（Grok），以及 ElevenLabs、Minimax 等语音合成提供商。那么问题来了：如果你喜欢的模型不在列表里，怎么办？—— 自己动手，提交一个 PR 把它加进去！

为什么扩展 AI 提供商是新手的最佳切入点？

很多人第一次接触开源项目会感到无从下手。但在 meta-glasses-api 中，扩展 AI 提供商恰恰是难度最低、收益最直观的贡献方式：

改动集中：只需要动几个明确的文件，不涉及复杂的消息监听、截图、视频监控逻辑；
模式现成：项目基于 Vercel AI SDK（@ai-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，这里有三处需要同步更新：

providerInformation（constants.ts）：登记新提供商的名称、官网、模型文档页、API Key 获取页，以及 Logo 组件；
aiChatProviders数组（constants.ts）：把新提供商的 key 加进去，它决定了设置面板下拉框里会出现哪个选项；
providerToModels（constants.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 获取方式，方便维护者快速审查。

常见问题（FAQ）

Q：项目为什么用 bun 而不是 npm？A：README 和 package.json 中约定使用 bun 作为包管理器，bun.lock是锁文件。为了保持依赖一致，建议跟随项目约定。

Q：我要加的模型没有对应的 @ai-sdk 官方包怎么办？A：可以在 ai.ts 中直接使用 fetch 调用该模型的 HTTP 接口，参考已有的 ElevenLabs、Minimax TTS 实现（ai.ts），照样能接入。

Q：TTS 提供商和聊天提供商是一回事吗？A：不是。聊天提供商管"文字回答"，TTS 提供商管"语音播报"，二者在 types/index.ts 中是分开定义的，接入时注意区分。

开始你的第一次开源贡献吧

从一行枚举到一次成功的 PR，扩展一个新的 AI 提供商其实就这么简单。meta-glasses-api 的架构把「接入新模型」这件看似复杂的事，拆解成了清晰、可复制的小步骤——这正是优秀开源项目该有的样子。现在就去克隆仓库、动手试试吧！期待在 Contributors 列表里看到你的名字 👋

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

meta-glasses-api 开源贡献指南：5 步提交 PR 扩展新的 AI 提供商