AgentBoard：开源浏览器扩展，让 AI 代理灵活连接多模型与工具

一、AgentBoard是什么？

AgentBoard是一款开源的浏览器扩展工具，核心定位是“浏览器中的AI交换机”——它像一个灵活的中间层，让用户能在浏览器环境中自由切换不同的AI模型、配置个性化代理规则，并通过工具扩展连接网页内容、外部服务或本地资源，构建专属的AI工作流。

与传统AI工具（如单一模型的聊天插件）不同，AgentBoard的核心优势在于“开放性”和“可控性”：用户无需依赖特定平台，可自行接入任意符合接口规范的AI模型（包括本地部署的模型），并通过自定义脚本或命令控制AI的行为逻辑。无论是简单的对话交互，还是复杂的“AI调用网页数据+分析+生成报告”流程，都能通过AgentBoard实现。

从本质上看，AgentBoard更像一个“AI代理操作系统”：它为不同的AI模型提供了统一的运行环境，为用户提供了可视化的配置界面，为工具扩展提供了标准化的接口，最终让AI的能力能更贴合用户的具体需求。

二、功能特色

AgentBoard的功能设计围绕“灵活集成”“自由定制”“安全可控”三大核心目标，具体特色如下：

1. 多代理管理：一个工具，多个“AI助手”

AgentBoard允许用户创建多个“AI代理配置文件”，每个配置文件可独立设置模型、参数、系统提示词等，相当于在一个工具中拥有多个“专属AI助手”。例如：

• 可创建“写作代理”（使用Anthropic Claude 3，系统提示为“专业文案编辑”，温度0.3）；

• 可创建“代码代理”（使用OpenAI GPT-4，系统提示为“Python开发者”，温度0.1）；

• 可创建“创意代理”（使用Google Gemini，系统提示为“科幻作家”，温度0.8）。

在对话过程中，用户可通过点击切换代理，无需重复打开多个工具，大幅提升多场景切换效率。

2. 全平台模型兼容：主流+本地模型全覆盖

AgentBoard支持几乎所有主流AI提供商的模型，并兼容本地部署的开源模型，具体如下表所示：

这种兼容性意味着用户无需受限于单一平台，可根据成本、功能需求自由选择模型（例如用本地模型处理隐私数据，用云端模型处理复杂任务）。

3. 工具扩展生态：让AI“动手做事”

AgentBoard的核心竞争力之一是其工具扩展能力，通过“WebMCP”（Web Model Control Protocol）协议，让AI能直接与网页内容、外部服务交互，实现“从对话到行动”的闭环。具体包括：

• 网页交互工具：类似“AI版油猴脚本”，通过自定义JavaScript脚本让AI操作当前网页。例如：

• 自动提取网页表格数据并让AI分析；

• 让AI根据邮件内容自动填写回复表单；

• 批量处理网页中的文本（翻译、格式转换等）。

• 远程服务连接：通过连接远程MCP服务器，让AI调用外部API、数据库或服务。例如：

• 让AI调用天气API获取实时数据并生成出行建议；

• 连接企业数据库，让AI查询销售数据并生成报表；

• 调用翻译API实现多语言实时转换。

• 快捷命令模板：用户可定义简短指令（如/analyze /translate）触发预设的复杂提示或工具链。例如，输入/summarize可自动让AI提取当前网页的核心内容并生成摘要。

4. 私有与安全：数据与密钥完全由用户掌控

AgentBoard坚持“用户数据本地优先”原则，核心安全特性包括：

• API密钥本地存储：用户的API密钥仅保存在浏览器本地（通过浏览器扩展存储机制加密），不会上传至任何服务器；

• 无数据追踪：工具本身不记录对话内容或操作日志，所有交互数据仅在当前浏览器会话中临时存储；

• 隐私模式支持：可在浏览器隐私窗口中使用，进一步保障数据不被本地缓存。

对于处理敏感信息（如企业数据、个人隐私内容）的用户，这种“零数据上传”的设计大幅降低了信息泄露风险。

5. 可视化交互：直观呈现AI的“思考过程”

AgentBoard提供了丰富的交互细节展示，帮助用户理解AI的决策逻辑：

• 流式响应：AI回答实时逐字显示，无需等待完整回复；

• 思考模式：部分模型（如Google Gemini的“扩展思考”模型）支持展示“中间思考过程”，用户可看到AI如何一步步推导结论；

• 工具调用日志：当AI使用工具时（如调用网页数据或API），会显示具体的调用参数和返回结果，方便调试和追溯。

三、技术细节

AgentBoard采用模块化架构设计，兼顾浏览器扩展的安全性（沙箱隔离）和功能灵活性，核心技术细节如下：

1. 架构组件

AgentBoard的架构分为三个核心层级，各组件协同工作实现完整功能，具体如下表所示：

2. 技术栈

项目采用现代前端技术栈，确保开发效率和运行性能：

• 开发语言：TypeScript（强类型保障，减少运行时错误）；

• 构建工具：Vite + Rollup（快速热更新，优化扩展打包体积）；

• 测试工具：Vitest（单元测试和集成测试，保障代码质量）；

• 代码规范：ESLint + Prettier（统一代码风格，便于开源协作）；

• 浏览器扩展规范：基于Manifest V3开发（符合现代浏览器安全标准，支持Chrome、Edge等主流浏览器）。

3. 工具调用机制

WebMCP是AgentBoard工具扩展的核心协议，其工作流程如下：

1. 用户或AI触发工具调用指令（如/fetch-page）；

2. 服务工作器从工具注册表中匹配对应的工具脚本；

3. 脚本通过“主世界window.agent”执行（如读取网页DOM、发送HTTP请求）；

4. 执行结果通过“隔离世界中继器”返回给服务工作器；

5. 服务工作器将结果传递给当前AI代理，供其生成后续响应。

这种机制既保障了工具对网页的访问能力，又通过“隔离世界”避免了扩展脚本被网页恶意代码攻击。

4. 多模型适配逻辑

AgentBoard通过“适配器模式”实现多模型兼容：

• 为每个AI提供商定义统一的接口（如generate() stream()）；

• 针对不同提供商的API差异（如请求参数、响应格式）编写适配代码；

• 本地模型通过“OpenAI兼容接口”接入（Ollama等工具默认支持该模式），无需额外适配。

这种设计让新模型的接入成本极低，开发者只需编写对应的适配器即可扩展支持范围。

四、应用场景

AgentBoard的灵活性使其适用于多种场景，以下是典型案例：

1. 开发者：AI工具调试与多模型对比

• 场景需求：开发AI驱动的工具时，需要测试不同模型的响应效果，或验证工具脚本的兼容性。

• AgentBoard应用：

• 创建多个代理（如GPT-4o、Claude 3、本地Llama 3.1），输入相同提示词快速对比输出差异；

• 通过WebMCP脚本模拟工具调用，在浏览器中调试“AI+工具”的交互逻辑，无需搭建复杂测试环境；

• 用快捷命令模板保存常用测试提示（如/test-json），一键触发格式校验。

2. 研究者：小样本模型能力评估

• 场景需求：评估不同模型在特定任务（如代码生成、多语言翻译）中的表现，需要控制变量（如温度、系统提示）。

• AgentBoard应用：

• 为同一模型创建多个代理，仅修改温度参数（如0.1 vs 0.9），对比生成结果的稳定性；

• 用相同系统提示配置不同模型，测试其对任务指令的理解一致性；

• 通过工具脚本自动记录模型输出，生成结构化评估表格。

3. 内容创作者：个性化创作辅助

• 场景需求：撰写文章、制作视频脚本时，需要AI提供风格化建议，同时结合网络实时数据（如热点事件）。

• AgentBoard应用：

• 创建“小红书风格代理”（系统提示+温度0.7），让AI生成符合平台调性的文案；

• 用工具脚本提取知乎热门话题，让AI结合话题生成创作灵感；

• 切换“校对代理”（Claude 3，温度0.1），对初稿进行语法和逻辑检查。

4. 普通用户：隐私友好的AI助手

• 场景需求：希望用AI处理私人信息（如日记、财务数据），但担心云端模型的数据泄露风险。

• AgentBoard应用：

• 部署本地Ollama模型（如Llama 3.1 8B），通过AgentBoard接入，所有对话在本地完成；

• 用工具脚本提取本地文档（通过浏览器访问本地HTML文件），让AI离线分析；

• 配置“隐私模式代理”（关闭所有日志记录），进一步保障数据安全。

5. 企业团队：定制化业务工具

• 场景需求：让AI能调用企业内部API（如客户管理系统），辅助员工快速处理工作。

• AgentBoard应用：

• 开发团队编写WebMCP脚本，连接企业内部MCP服务器，实现AI对客户数据的查询；

• 为销售团队配置“客户沟通代理”，系统提示包含企业话术模板，AI可调用客户历史数据生成个性化沟通内容；

• 通过私有部署AgentBoard，限制模型访问范围，确保企业数据不流出内部网络。

五、使用方法

AgentBoard的使用可分为“基础操作”和“高级配置”，步骤如下：

1. 安装方式

方式一：通过Chrome Web Store安装（推荐）

• 打开Chrome浏览器，访问AgentBoard Chrome商店页面；

• 点击“添加至Chrome”，确认权限后完成安装；

• 安装成功后，浏览器右上角会出现AgentBoard图标（蓝色机器人头像）。

方式二：源码构建本地版本（适合开发者）

• 克隆仓库：git clone https://github.com/igrigorik/AgentBoard.git；

• 安装依赖：npm install；

• 构建扩展：npm run build；

• 浏览器打开“扩展程序”页面（chrome://extensions/），开启“开发者模式”，点击“加载已解压的扩展程序”，选择构建后的dist文件夹。

2. 基础操作：添加代理与对话

步骤1：添加第一个AI代理

• 点击浏览器右上角的AgentBoard图标，打开侧边栏；

• 点击侧边栏顶部的“+”号，选择“新建代理”；

• 填写代理配置（以OpenAI为例）：

• 名称：我的GPT-4o代理；

• 提供商：openai；

• 模型：gpt-4o；

• API密钥：输入你的OpenAI API密钥（仅本地存储）；

• 系统提示：你是一个 helpful 的助手；

• 温度：0.5；

• 点击“保存”，代理添加完成。

步骤2：开始对话

• 在侧边栏输入框中输入问题（如“解释什么是AgentBoard”）；

• 点击发送按钮，AI会实时返回响应（流式显示）；

• 如需切换代理，点击侧边栏顶部的代理名称，选择其他已创建的代理即可。

3. 工具使用：调用网页数据与快捷命令

示例1：用工具提取网页内容

• 打开任意网页（如一篇新闻文章）；

• 在AgentBoard输入框中输入/fetch-page（默认工具命令，提取当前网页文本）；

• AI会调用工具获取网页内容，并可进一步要求分析（如“总结这篇文章的核心观点”）。

示例2：自定义快捷命令

• 点击侧边栏设置图标（齿轮），选择“命令模板”；

• 点击“添加命令”，设置：

• 触发词：/translate-zh；

• 模板内容：将以下内容翻译成中文：{{input}}；

• 保存后，在输入框中输入/translate-zh Hello, world!，AI会自动执行翻译。

4. 高级配置：接入本地模型与工具脚本

示例1：接入Ollama本地模型

• 确保本地已安装Ollama并启动服务（默认地址：http://localhost:11434）；

• 新建代理，配置：

• 提供商：openai（Ollama兼容OpenAI接口）；

• 端点：http://localhost:11434/v1；

• 模型：llama3.1:70b（需提前用Ollama拉取）；

• API密钥：任意字符（Ollama不验证密钥，仅作为占位符）；

• 保存后即可使用本地模型对话。

示例2：编写WebMCP工具脚本

• 点击侧边栏设置图标，选择“WebMCP工具”；

• 点击“新建脚本”，输入以下示例代码（提取网页标题）：

  // 工具名称：提取网页标题
  // 触发词：/get-title
  export async function run() {
   const title = document.title;
   return `当前网页标题：${title}`;
  }

• 保存后，输入/get-title，AI会返回当前网页的标题。

六、常见问题解答（FAQ）

1. AgentBoard支持哪些浏览器？

目前主要支持基于Chromium内核的浏览器，包括Chrome、Edge、Brave等。Firefox浏览器因扩展API差异暂不支持，后续可能通过适配Manifest V3兼容。

2. 本地模型的响应速度慢怎么办？

本地模型的速度取决于电脑硬件（尤其是GPU）和模型大小。建议：

• 选择较小参数的模型（如Llama 3.1 8B）；

• 确保Ollama等工具启用了GPU加速（可通过ollama run --gpu all命令配置）；

• 关闭不必要的浏览器标签页，减少资源占用。

3. 如何备份或迁移代理配置？

AgentBoard的配置存储在浏览器的chrome.storage.local中，可通过以下方式迁移：

• 安装“扩展程序数据导出”类工具，导出AgentBoard的存储数据；

• 在新浏览器中安装AgentBoard后，导入备份数据即可。

4. 为什么调用某些工具时提示“权限不足”？

部分工具需要访问网页敏感数据（如跨域API），浏览器会限制此类操作。解决方法：

• 确保工具脚本符合浏览器安全策略（如不访问跨域资源）；

• 在扩展设置中开启“允许访问文件URL”（如需处理本地文件）。

5. AgentBoard与ChatGPT浏览器扩展有什么区别？

核心区别在于“开放性”：ChatGPT扩展仅支持OpenAI模型，且功能固定；而AgentBoard支持多模型集成、自定义工具和代理配置，更适合需要灵活调整AI行为的用户。

七、相关链接

• 项目GitHub仓库：https://github.com/igrigorik/AgentBoard

• Chrome Web Store页面：https://chromewebstore.google.com/detail/agentboard/jlmajjfiibgnejlndfoboojahlclgoam

八、总结

AgentBoard作为一款开源浏览器AI交换机，通过多模型集成、自定义工具扩展和本地隐私保护，为用户提供了高度灵活的AI代理管理方案。它打破了单一AI平台的限制，让不同模型、工具和服务能无缝协作，既满足了开发者的技术调试需求，也适配了普通用户的个性化场景，是AI工具生态中“以用户为中心”的典型代表。