如何开发Browser MCP自定义工具与资源扩展：完整指南

如何开发Browser MCP自定义工具与资源扩展：完整指南

【免费下载链接】mcpBrowser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser项目地址: https://gitcode.com/gh_mirrors/mcp16/mcp

Browser MCP（Model Context Provider）是一款允许AI应用控制浏览器的强大服务器，为开发者提供了丰富的自定义工具和资源扩展能力。本文将详细介绍如何利用这一特性打造专属工具，提升AI应用与浏览器交互的灵活性。

自定义工具开发基础

工具定义结构

所有自定义工具需遵循Tool接口规范，包含元数据定义和处理逻辑两部分。基础接口定义位于src/tools/tool.ts，核心结构如下：

• schema：工具元数据，包含名称、描述和输入参数JSON Schema
• handle：核心处理函数，接收上下文和参数并返回处理结果

开发示例：控制台日志获取工具

src/tools/custom.ts中实现了获取浏览器控制台日志的工具，完整展示了开发流程：

1. 导入依赖：引入工具基类和类型定义
2. 定义工具元数据：设置名称、描述和输入参数规范
3. 实现处理逻辑：通过WebSocket与浏览器通信获取日志
4. 格式化输出：将原始日志转换为AI可理解的文本格式

工具开发步骤详解

1. 创建工具文件

在src/tools/目录下创建新的TypeScript文件，建议使用功能相关的命名（如network.ts、dom.ts）。

2. 定义工具结构

遵循src/tools/tool.ts中定义的Tool接口，实现以下内容：

export const customTool: Tool = { schema: { name: "tool_name", description: "工具功能描述", inputSchema: {/* JSON Schema定义 */} }, handle: async (context, params) => { // 实现工具逻辑 return { content: [{ type: "text", text: "处理结果" }] }; } };

3. 集成WebSocket通信

利用context.sendSocketMessage方法与浏览器建立通信，支持的消息类型可参考项目WebSocket协议定义。

4. 注册工具

在工具入口文件中导出新工具，以便系统自动发现和加载。

资源扩展最佳实践

类型安全开发

使用Zod验证库定义输入参数 schema，确保类型安全：

import { z } from "zod"; import { zodToJsonSchema } from "zod-to-json-schema"; const InputSchema = z.object({ url: z.string().url(), timeout: z.number().optional().default(5000) }); // 转换为JSON Schema inputSchema: zodToJsonSchema(InputSchema)

错误处理

在handle函数中实现完善的错误处理，通过isError标记错误结果：

return { content: [{ type: "text", text: "错误信息" }], isError: true };

开始使用自定义工具

1. 克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/mcp16/mcp

2. 安装依赖：

npm install

3. 在src/tools/目录下创建自定义工具文件

4. 运行开发服务器：

npm run dev

通过Browser MCP的自定义工具和资源扩展能力，开发者可以轻松扩展AI应用的浏览器控制功能，实现从简单自动化到复杂交互的各种场景。无论是数据采集、页面操作还是复杂工作流自动化，都能通过自定义工具快速实现。

【免费下载链接】mcpBrowser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser项目地址: https://gitcode.com/gh_mirrors/mcp16/mcp