此项目实现了符合MCP规范的客户端和服务器,用于AI助手与外部工具之间的通信。
fetch-mcp/
├── src/ # 源代码目录
│ ├── lib/ # 库文件
│ │ ├── fetchers/ # 网页抓取实现
│ │ │ ├── browser/ # 基于浏览器的抓取
│ │ │ │ ├── BrowserFetcher.ts # 浏览器抓取实现
│ │ │ │ ├── BrowserInstance.ts # 浏览器实例管理
│ │ │ │ └── PageOperations.ts # 页面交互操作
│ │ │ ├── node/ # 基于Node.js的抓取
│ │ │ └── common/ # 共享抓取工具
│ │ ├── utils/ # 工具模块
│ │ │ ├── ChunkManager.ts # 内容分块
│ │ │ ├── ContentProcessor.ts # HTML到文本转换
│ │ │ ├── ContentExtractor.ts # 智能内容提取
│ │ │ ├── ContentSizeManager.ts # 内容大小限制
│ │ │ └── ErrorHandler.ts # 错误处理
│ │ ├── server/ # 服务器相关模块
│ │ │ ├── index.ts # 服务器入口
│ │ │ ├── browser.ts # 浏览器管理
│ │ │ ├── fetcher.ts # 网页抓取逻辑
│ │ │ ├── tools.ts # 工具注册和处理
│ │ │ ├── resources.ts # 资源处理
│ │ │ ├── prompts.ts # 提示模板
│ │ │ └── types.ts # 服务器类型定义
│ │ ├── i18n/ # 国际化支持
│ │ └── types.ts # 公共类型定义
│ ├── client.ts # MCP客户端实现
│ └── mcp-server.ts # MCP服务器主入口
├── index.ts # 服务器入口点
├── tests/ # 测试文件
└── dist/ # 编译文件
模型上下文协议(MCP)定义了两种主要传输方法:
此项目实现了标准输入/输出(Stdio)传输方法。
要通过Smithery自动安装Mult Fetch MCP Server:
npx -y @smithery/cli install @lmcc-dev/mult-fetch-mcp-server --client claude
pnpm install
pnpm add -g @lmcc-dev/mult-fetch-mcp-server
或者直接使用npx运行(无需安装):
npx @lmcc-dev/mult-fetch-mcp-server
要将此工具与Claude桌面集成,您需要添加服务器配置:
~/Library/Application Support/Claude/claude_desktop_config.json这种方法最简单,不需要指定完整路径,适用于全局安装或直接使用npx:
{
"mcpServers": {
"mult-fetch-mcp-server": {
"command": "npx",
"args": ["@lmcc-dev/mult-fetch-mcp-server"],
"env": {
"MCP_LANG": "en" // 设置语言为英语,选项:"zh" 或 "en"
}
}
}
}
如果您需要使用特定安装位置,可以指定完整路径:
{
"mcpServers": {
"mult-fetch-mcp-server": {
"command": "path-to/bin/node",
"args": ["path-to/@lmcc-dev/mult-fetch-mcp-server/dist/index.js"],
"env": {
"MCP_LANG": "en" // 设置语言为英语,选项:"zh" 或 "en"
}
}
}
}
请将path-to/bin/node替换为您系统上Node.js可执行文件的路径,并将path-to/@lmcc-dev/mult-fetch-mcp-server替换为此项目的实际路径。
以下是Claude桌面客户端中使用此工具的示例:

该图显示了Claude如何使用抓取工具来获取网页内容并根据您的指令进行处理。
配置完成后,重启Claude桌面,您可以在对话中使用以下工具:
fetch_html:获取网页的HTML内容fetch_json:获取JSON数据fetch_txt:获取纯文本内容fetch_markdown:获取Markdown格式的内容fetch_plaintext:获取从HTML转换而来的纯文本内容(去除HTML标签)pnpm run build
pnpm run server
# 或
node dist/index.js
# 如果是全局安装,可以直接运行
@lmcc-dev/mult-fetch-mcp-server
# 或使用npx
npx @lmcc-dev/mult-fetch-mcp-server
注意:以下客户端.js功能仅用于演示和测试目的。当与Claude或其他AI助手一起使用时,MCP服务器由AI驱动,自动管理分块过程。
该项目包括一个用于测试和开发的命令行客户端:
pnpm run client <method> <params_json>
# 示例
pnpm run client fetch_html '{"url": "https://example.com", "debug": true}'
在使用命令行客户端进行测试时,您可以使用这些参数来演示内容分块能力:
--all-chunks:命令行标志,自动按顺序获取所有分块(仅用于演示目的)--max-chunks:命令行标志,限制要获取的最大分块数(可选,默认为10)客户端.js演示工具提供实时输出能力:
node dist/src/client.js fetch_html '{"url":"https://example.com", "startCursor": 0, "contentSizeLimit": 500}' --all-chunks --debug
演示客户端将自动按顺序获取所有分块并立即显示,展示了如何实时处理大量内容。
# 运行MCP功能测试
npm run test:mcp
# 运行mini4k.com网站测试
npm run test:mini4k
# 运行直接客户端调用测试
npm run test:direct
此项目支持中文和英文双语国际化。您可以使用环境变量设置语言:
设置MCP_LANG环境变量以控制语言:
# 设置为英语
export MCP_LANG=en
npm run server
# 设置为中文
export MCP_LANG=zh
npm run server
# Windows系统
set MCP_LANG=zh
npm run server
使用环境变量确保所有相关进程(包括MCP服务器)使用相同的语言设置。
默认情况下,系统将按照以下优先级选择语言:
MCP_LANG环境变量此项目遵循MCP协议规范,默认情况下不会输出任何日志以避免干扰JSON-RPC通信。调试信息通过调用参数控制:
在调用工具时设置debug: true参数:
{
"url": "https://example.com",
"debug": true
}
调试消息使用以下格式发送到标准错误流(stderr):
[MCP-SERVER] MCP服务器启动中...
[CLIENT] 正在抓取URL: https://example.com
启用调试模式时,所有调试消息也会写入位于以下位置的日志文件:
~/.mult-fetch-mcp-server/debug.log
可以通过MCP资源API访问此日志文件:
// 访问调试日志文件
const result = await client.readResource({ uri: "file:///logs/debug" });
console.log(result.contents[0].text);
// 清除调试日志文件
const clearResult = await client.readResource({ uri: "file:///logs/clear" });
console.log(clearResult.contents[0].text);
此工具支持多种方法配置代理设置:
proxy参数最直接的方法是在请求参数中指定代理:
{
"url": "https://example.com",
"proxy": "http://your-proxy-server:port",
"debug": true
}
工具会自动检测并使用来自标准环境变量的代理设置:
# 设置代理环境变量
export HTTP_PROXY=http://your-proxy-server:port
export HTTPS_PROXY=http://your-proxy-server:port
# 运行服务器
npm run server
工具尝试根据您的操作系统检测系统代理设置:
set命令从环境变量读取代理设置env命令从环境变量读取代理设置如果您遇到代理检测问题:
debug: true参数查看关于代理检测的详细日志proxy参数http://host:port或https://host:portuseBrowser: true以使用浏览器模式使用浏览器模式(useBrowser: true)时,工具会:
浏览器模式特别适用于实施反爬虫措施或需要JavaScript执行的网站。
此项目以如下方式处理参数:
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
import path from 'path';
import { fileURLToPath } from 'url';
// 获取当前文件的目录路径
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// 创建客户端传输层
const transport = new StdioClientTransport({
command: 'node',
args: [path.resolve(__dirname, 'dist/index.js')],
stderr: 'inherit',
env: {
...process.env // 传递所有环境变量,包括MCP_LANG
}
});
// 创建客户端
const client = new Client({
name: "example-client",
version: "1.0.0"
});
// 连接到传输层
await client.connect(transport);
// 使用客户端
const result = await client.callTool({
name: 'fetch_html',
arguments: {
url: 'https://example.com',
debug: true // 通过参数控制调试输出
}
});
if (result.isError) {
console.error('抓取失败:', result.content[0].text);
} else {
console.log('抓取成功!');
console.log('内容预览:', result.content[0].text.substring(_0, 500));
}
fetch_html:获取网页的HTML内容fetch_json:获取JSON数据fetch_txt:获取纯文本内容fetch_markdown:获取Markdown格式的内容fetch_plaintext:获取从HTML转换而来的纯文本内容(去除HTML标签)服务器包括对resources/list和resources/read方法的支持,但目前实现中没有定义任何资源。资源系统旨在提供对项目文件和文档的访问,但此功能尚未完全实现。
// 示例:列出可用资源
const resourcesResult = await client.listResources({});
console.log('可用资源:', resourcesResult);
// 注意:目前这将返回空列表的资源和resourceTemplates
服务器提供了以下提示模板:
fetch-website:获取网站内容,支持不同格式和浏览器模式extract-content:从网站中提取特定内容,支持CSS选择器和数据类型指定debug-fetch:调试网站抓取问题,分析可能原因并提供解决方案prompts/list获取可用提示模板列表