十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Page Assist 接入 OpenAI 兼容 API 完整指南:Provider 配置、模型拉取与源码原理

Page Assist 接入 OpenAI 兼容 API 完整指南:Provider 配置、模型拉取与源码原理 Page Assist 接入 OpenAI 兼容 API 完整指南Provider 配置、模型拉取与源码原理【免费下载链接】page-assistUse your locally running AI models to assist you in your web browsing项目地址: https://gitcode.com/GitHub_Trending/pa/page-assist本文是 Page Assist浏览器 AI 助手扩展接入 OpenAI 兼容 API 的技术指南。全文以 docs/providers/openai.md 为骨架结合仓库源码Provider 清单、配置 UI、模型拉取与请求链路深度展开。读完你将掌握Page Assist 内置了哪些 OpenAI 兼容端点、如何在设置页添加与自定义 Provider、聊天模型与嵌入模型如何拉取与管理以及 API 请求在浏览器端是如何被组装和发送的。OpenAI 兼容 API 是什么Page Assist 的核心能力是把本地运行的 AI 模型与网页浏览场景结合起来而这一切都建立在统一的OpenAI Compatible API之上。只要某个服务端暴露了符合 OpenAI Chat Completions 风格的 HTTP 接口Page Assist 就可以直接调用它无需为每个厂商单独开发集成逻辑。/v1/chat/completions、/v1/models、/v1/embeddings这类标准端点就是兼容性的分界线。正因为接口规范统一Page Assist 才能用一个配置表单同时管理本地推理服务如 LLaMA.cpp、LM Studio、Ollama、vLLM和云端厂商如 OpenAI、DeepSeek、Groq、OpenRouter。默认支持的 Provider 与预置端点Page Assist 在 src/utils/oai-api-providers.ts 中维护了一份内置 Provider 清单每个 Provider 都预置了label、唯一标识value和默认baseUrl。文档中列出的默认支持列表对应关系如下Provider预置 Base URL说明Custom空需手填通用自定义端点LLaMA.cpphttp://localhost:8080/v1本地推理服务LM Studiohttp://localhost:1234/v1本地推理服务Llamafilehttp://127.0.0.1:8080/v1本地推理服务Ollamahttp://localhost:11434/v1本地推理服务vLLMhttp://localhost:8000/v1本地推理服务OpenAIhttps://api.openai.com/v1云端DeepSeekhttps://api.deepseek.com云端Fireworkshttps://api.fireworks.ai/inference/v1云端Novita AIhttps://api.novita.ai/v3/openai云端Hugging Facehttps://router.huggingface.co/v1云端Groqhttps://api.groq.com/openai/v1云端Togetherhttps://api.together.xyz/v1云端OpenRouterhttps://openrouter.ai/api/v1云端聚合路由Google AIhttps://generativelanguage.googleapis.com/v1beta/openaiGemini 兼容端点Gemini Enterprise Agent Platform (Vertex AI)动态构建见下文Google Cloud 企业版Mistralhttps://api.mistral.ai/v1云端Infinigence AIhttps://cloud.infini-ai.com/maas/v1云端SiliconFlowhttps://api.siliconflow.cn/v1云端VolcEnginehttps://ark.cn-beijing.volces.com/api/v3火山方舟TencentCloudhttps://api.lkeap.cloud.tencent.com/v1腾讯云AliBaBaCloudhttps://dashscope.aliyuncs.com/compatible-mode/v1阿里云百炼Moonshothttps://api.moonshot.ai/v1月之暗面xAIhttps://api.x.ai/v1云端Vercel AI Gatewayhttps://ai-gateway.vercel.sh/v1网关聚合Chuteshttps://llm.chutes.ai/v1云端Anthropic (Claude)https://api.anthropic.com/v1Claude 兼容端点CanopyWavehttps://inference.canopywave.io/v1云端BigModel (Zhipu)https://open.bigmodel.cn/api/paas/v4智谱清言MiniMaxhttps://api.minimax.io/v1云端XiaomiMimohttps://token-plan-sgp.xiaomimimo.com/v1小米 MiMoEvolinkhttps://direct.evolink.ai/v1云端说明源码清单中还包含 Atlas Cloud、llmman、OrcaRouter、UnoRouter、z.ai 等条目实际可用列表以设置页下拉框展示为准。所有http://localhost端点都要求你的浏览器与本机推理服务在同一台机器上运行。两个容易混淆的细节Ollama 的双重身份Page Assist 对 Ollama 有两种接入方式——一是通过专用的 Ollama 设置页走http://localhost:11434原生接口可管理模型拉取二是作为 OpenAI 兼容 Provider 走http://localhost:11434/v1。两者在配置入口上不同文档中的提示Ollama 无需手动添加模型针对的是兼容 API 接入方式。Vertex AI 无固定 URL它的端点由项目 ID 和区域动态拼装详见下文特殊 Provider一节。添加 OpenAI 兼容 API Provider按照 docs/providers/openai.md 的操作步骤完整的添加流程如下点击浏览器工具栏上的 Page Assist 图标打开扩展面板点击面板中的Settings设置图标进入设置页切换到OpenAI Compatible API标签页对应设置路由 option-settings-openai.tsx页面主体由 openai.tsx 中的OpenAIApp组件渲染点击Add Provider添加 Provider按钮打开弹窗在 Provider 下拉框中选择一个 API。如果默认列表中不存在你需要的服务选择Custom自定义手动填写 API URL 和 API Key如该服务需要鉴权在API Key字段填入密钥点击Save保存按钮Provider 即被写入本地数据库。添加后的两类行为差异从源码 openai.tsx 的addMutation逻辑可以看到保存成功后 Page Assist 会判断当前 Provider 是否属于动态拉取模型的名单const noPopupProvider [lmstudio, llamafile, ollama2, llamacpp, vllm, llmman]对于名单内的本地服务LM Studio、Llamafile、Ollama、LLaMA.cpp、vLLM、llmman保存后不会弹出模型选择框模型会在使用时自动从 API 拉取对于名单外的云端服务OpenAI、DeepSeek、Groq 等保存后会自动弹出模型列表弹窗OpenAIFetchModel让你勾选要使用的模型并写入本地库。这正对应原文档末尾的提示对于 Ollama、LM Studio 和 Llamafile你不需要手动添加任何模型因为 Page Assist 会自动从 API 获取它们。配置项详解添加/编辑 Provider 的表单见 openai.tsx 与英文文案 openai.json包含以下字段基础字段字段是否必填说明Provider Name必填自定义显示名称仅用于列表展示Base URL必填OpenAI 兼容 API 的根地址如http://localhost:1234/v1API Key可选鉴权密钥本地服务通常留空即可选完下拉框后表单会自动把该 Provider 的baseUrl和name填入对应输入框。对于Custom类型源码中还有一个贴心逻辑如果你手填的 Base URL 与某个内置 Provider 完全一致会自动帮你把 Provider 类型切换过去见 openai.tsx。高级字段Fix CORS issues开关部分云端 API 不支持浏览器跨域请求时开启后 Page Assist 会通过扩展侧的后台逻辑见 services/chrome.ts 等代理请求以绕过 CORS 限制。自定义 Headers键值对列表当服务需要特殊请求头如组织 ID、自定义鉴权头时可逐个添加key/value。这些头最终会与Authorization: Bearer apiKey一起附加到请求上组装逻辑见 libs/openai.ts 中的getCustomHeaders调用。Provider 列表的后续管理保存成功后Provider 会以表格形式展示在页面上每一行支持四种操作启用/禁用开关通过 db/dexie/providerState.ts 持久化开关状态关闭后该 Provider 的模型会从模型列表刷新中排除对应queryClient.invalidateQueries触发的fetchModel/fetchAllModels失效逻辑。编辑铅笔图标修改名称、URL、Key 等字段。拉取模型下载图标打开模型选择弹窗重新拉取该 Provider 的模型列表名单内的本地服务此按钮不可用。删除垃圾桶图标确认后删除配置同时级联删除该 Provider 下已保存的所有模型见 db/dexie/openai.ts 的deleteOpenAIConfig先删配置、再deleteAllModelsByProviderId。数据存储方式配置通过 db/dexie/openai.ts 存入浏览器的 IndexedDBDexie表名为openaiConfigs。每条记录包含id、name、baseUrl存入前会经过cleanUrl清洗、apiKey、provider、headers、fix_cors等字段并标记db_type: openai。Firefox 版本则通过addOpenAICofigFB同步到db/openai.ts中。注意事项源码中检测到 Firefox 隐私窗口时添加 Provider 按钮会被拦截并提示Firefox Private Mode 不支持将数据保存到 IndexedDB请在普通窗口添加。因此请勿在 Firefox 隐私模式下配置 Provider。模型拉取机制从/v1/models到本地模型库模型列表的获取逻辑集中在 libs/openai.ts 的getAllOpenAIModels函数中它会针对不同 Provider 走不同的分支标准分支对绝大多数 Provider直接请求${baseUrl}/models若配置了 API Key 则携带Authorization: Bearer apiKey请求头。请求带 10 秒超时AbortController失败返回空数组。特殊分支Anthropic当 Base URL 为https://api.anthropic.com/v1时改用x-api-key请求头而非 Bearer并附加anthropic-dangerous-direct-browser-access: true与anthropic-version: 2023-06-01调用/v1/models获取 Claude 模型。OpenRouter根据所选模型类型构造 URL——聊天模型请求${baseUrl}/models嵌入模型请求${baseUrl}/models?output_modalitiesembeddings。Google AIGemini如果 OpenAI 兼容端点拉取失败会回退到https://generativelanguage.googleapis.com/v1beta/models?keyapiKey并对返回的models/xxx前缀做归一化。Together返回结构特殊顶层为数组且字段为display_name单独做字段映射。Vertex AI走 libs/vertex-auth.ts 的getVertexModels返回内置的 Gemini 模型清单因为 Vertex 的 OpenAI 兼容端点没有可靠的/models列表接口模型 ID 带google/前缀如google/gemini-2.5-pro。聊天模型与嵌入模型的区分在模型选择弹窗openai-fetch-model.tsx中可以通过Chat Model/Embedding Model单选切换拉取类型Chat Model用于对话补全与内容生成请求走/v1/chat/completionsEmbedding Model用于 RAG 知识库检索等语义搜索场景请求走/v1/embeddings。勾选模型后点击保存模型记录通过createManyModels写入本地模型库db/dexie/models.ts字段包括model_id、name、provider_id关联到对应 Provider与model_type。之后在侧边栏聊天时就可以在模型选择器里看到这些模型了。特殊 Provider 配置Vertex AIGemini 企业版Vertex AI 不使用普通的 API Key而是需要短时效的 OAuth2 Access Token。Page Assist 的做法是完全在浏览器内完成令牌签发无需代理服务器实现位于 libs/vertex-auth.ts表单需要填写Google Cloud Project ID、Location / Regionglobal、us-central1、europe-west1等以及Service Account JSON也可直接粘贴已获取的原始 Access Token有效期约 1 小时Service Account JSON 支持直接上传文件上传后会自动解析并回填project_id端点 URL 由buildVertexBaseUrl动态拼接全局https://aiplatform.googleapis.com/v1beta1/projects/{projectId}/locations/global/endpoints/openapi区域https://{loc}-aiplatform.googleapis.com/v1beta1/projects/{projectId}/locations/{loc}/endpoints/openapi每次请求前getGoogleCloudAccessToken会先用 Web Crypto API 以 RS256 算法对 JWT 签名再向 Google OAuth 端点换取 Access Token并按 service account 缓存、提前 1 分钟刷新避免每次聊天都重复签名。底层请求链路CustomChatOpenAI配置完成后聊天请求最终由 models/CustomChatOpenAI.ts 这个基于 LangChainBaseChatModel的自定义实现发出。它包装了 OpenAI 官方 Node SDK并将baseURL指向你在设置页填写的 Provider 地址。几个值得注意的实现细节流式输出_streamResponseChunks逐 token 解析 SSE 流并额外透传reasoning_content深度求索等推理模型与reasoning_details字段让思考过程能在界面上展示配合 ReasoningSection.tsx工具调用流式响应中的tool_callsdelta 会被转换为tool_call_chunks由 LangChain 合并为完整的工具调用从而支持 MCP、网页搜索等扩展能力Provider 差异适配isDeepSeekProvider判定后会把上一轮 assistant 的reasoning_content原样回传DeepSeek 推理模式要求如此isGeminiProvider判定后会把 Gemini 的thought_signature等extra_content附加到工具调用上其余 Provider 不会收到这些未知字段避免报错Token 统计非流式模式直接读取响应中的usage字段流式模式下则按消息内容估算 token 用量getEstimatedTokenCountFromPrompt。常见问题与排查要点拉取不到模型No model found界面文案提示请确认已添加正确的 Base URL 和 API Key。优先核对/v1/models是否能在浏览器直接访问、返回是否符合 OpenAI 的{ data: [...] }结构自定义服务若返回结构不同需要先做兼容适配。模型列表为空但配置正确请求存在 10 秒超时网络慢或服务端响应慢会被判定失败对 OpenRouter、Together、Vertex 等特殊结构服务Page Assist 已有专门适配请确认选择的下拉项与实际服务一致。CORS 报错开启表单中的Fix CORS issues开关或改用扩展侧代理能力。本地服务连不上确认服务实际监听端口与预置 Base URL 一致如 LM Studio 为 1234、vLLM 为 8000且浏览器与本机服务同源可访问。Firefox 隐私窗口无法保存隐私模式下 IndexedDB 不可用请切换到普通窗口添加 Provider。小结通过统一的 OpenAI 兼容协议Page Assist 把本地推理服务与数十家云端模型厂商收敛到一个配置入口内置 Provider 预设端点开箱即用Custom模式支持任意符合规范的端点聊天/嵌入两类模型按需拉取Vertex AI 等特殊服务则有专门的认证与模型清单适配。配合 docs/providers/llamacpp.md、docs/providers/lmstudio.md、docs/providers/ollama.md 等文档可以进一步了解各本地服务的具体部署要求。【免费下载链接】page-assistUse your locally running AI models to assist you in your web browsing项目地址: https://gitcode.com/GitHub_Trending/pa/page-assist创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表