Web Content MCP

网页内容 MCP 服务

一个功能强大的模型上下文协议（MCP）服务，提供智能网页搜索和内容提取功能。此服务可让 AI 助手搜索 Google 并获取网页内容，自动将所有内容转换为简洁易读的 Markdown 格式。

🚀 功能

• Google 搜索集成：执行 Google 搜索，并可自定义结果数量
• 内容提取：自动提取网页中的主要内容
• Markdown 转换：将 HTML 内容转换为简洁易读的 Markdown
• 智能内容筛选：移除广告、导航栏和无关元素
• 多种内容策略：使用智能选择器查找主要内容
• 错误处理：完善的错误处理和备用机制
• 类型安全：使用 TypeScript 和 Zod 验证构建

🛠️ 可用工具

1. 网页搜索（web_search）

搜索 Google 并返回经过格式化且已提取内容的结果。

参数：

• query（字符串，必需）：要执行的搜索查询
• numResults（数字，可选）：要返回的结果数量（1–20，默认值：5）

示例：

{
  "name": "web_search",
  "arguments": {
    "query": "TypeScript best practices",
    "numResults": 3
  }
}

2. 获取网页（fetch_webpage）

获取并提取指定网页 URL 中的内容。

参数：

• url（字符串，必需）：要获取的网页 URL

示例：

{
  "name": "fetch_webpage",
  "arguments": {
    "url": "https://example.com/article"
  }
}

📋 前置条件

• Node.js 18+
• SerpAPI 密钥（用于 Google 搜索功能）

🔧 安装

1. 克隆仓库：

   git clone <repository-url>
   cd web-content-mcp
   

2. 安装依赖：

   npm install
   

3. 设置环境变量： 在根目录中创建 .env 文件：

   SERPAPI_KEY=your_serpapi_key_here
   

   从 https://serpapi.com/ 获取 SerpAPI 密钥

🚀 使用方法

运行服务

直接使用 npx tsx 运行服务：

npx tsx --env-file=.env src/index.ts

此命令会：

• 使用 tsx 直接运行 TypeScript，无需编译
• 从 .env 文件加载环境变量
• 立即启动 MCP 服务

作为 MCP 服务使用

此服务专为兼容 MCP 的客户端设计。配置 MCP 客户端，通过 stdio 传输连接到此服务。

MCP 客户端配置示例：

{
  "mcpServers": {
    "web-content": {
      "command": "npx",
      "args": [
        "tsx",
        "--env-file=/path/to/web-content-mcp/.env",
        "/path/to/web-content-mcp/src/index.ts"
      ],
      "env": {
        "SERPAPI_KEY": "your_api_key"
      }
    }
  }
}

🏗️ 架构

此服务采用简洁的模块化架构：

src/
├── index.ts      # Main server setup and request handling
├── tools.ts      # Tool implementations (WebSearch, FetchWebpage)
├── types.ts      # TypeScript types and Zod schemas
└── env.ts        # Environment variable configuration

主要组件

• 服务：使用 stdio 传输的主要 MCP 服务实例
• 工具：基于抽象基类的模块化工具类
• 内容提取：智能的 HTML 到 Markdown 转换
• 类型安全：全面的 Zod 验证模式
• 错误处理：通过明确的消息优雅地处理错误

🔍 内容提取策略

此服务采用智能的内容提取方法：

1. 内容选择器：尝试多个选择器来查找主要内容：

   • main、article、.content、.main-content
   • .post-content、.entry-content、#content
   • .container（作为备用选项）

2. 内容清理：移除不需要的元素：

   • 脚本、样式、导航栏
   • 页眉、页脚、侧边栏
   • 广告和推广内容

3. Markdown 转换：

   • 将 HTML 转换为简洁的 Markdown
   • 保留带有替代文本的图片
   • 保持正确的标题结构
   • 限制内容长度以防止溢出

⚙️ 配置

服务在 tools.ts 中包含多个可配置选项：

const config = {
  serpApiKey: env.SERPAPI_KEY,
  timeout: 10000, // Request timeout (ms)
  maxContentLength: 5000, // Max content length per page
  userAgent: "Mozilla/5.0 (compatible; WebContentMCP/1.0)",
};

🔒 环境变量

变量	描述	必需
SERPAPI_KEY	用于 Google 搜索的 SerpAPI 密钥	是

📄 输出格式

两个工具均以 Markdown 格式返回内容：

网页搜索结果

# Web Search Results for: "query"

Found X results:

## 1. Page Title

**URL:** https://example.com
**Snippet:** Brief description...
**Content:**
Main page content in markdown...

---

网页内容

# Webpage Content

**URL:** https://example.com
**Content:**
Extracted page content in markdown...

🛡️ 错误处理

该服务包含全面的错误处理：

• 网络错误：超时和连接失败
• API 错误：SerpAPI 速率限制和身份验证
• 内容错误：无效 URL 和解析失败
• 验证错误：无效的输入参数

📞 支持

如果遇到任何问题或有疑问：

1. 查看 问题 页面
2. 创建新问题并提供详细信息
3. 附上错误消息和环境详情

---

使用 TypeScript 和 Model Context Protocol 倾心打造 ❤️