web-retrieval-mcp
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@web-retrieval-mcp analyze the design structure of https://example.com"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
🌐 Web Retrieval MCP
一个专门用于解析网页设计结构的 Model Context Protocol (MCP) 工具。通过提供URL,即可获得详细的页面结构分析,包括布局、导航、内容区域、表单、图片等元素的完整信息。
✨ 功能特性
🏗️ 页面布局分析 - 自动识别头部、底部、侧边栏等布局元素
📝 标题结构解析 - 提取并分析H1-H6标题层次结构
🧭 导航结构识别 - 解析网站导航菜单和链接结构
📄 内容区域提取 - 识别主要内容区域和文本内容
📋 表单信息分析 - 解析表单字段、提交方式等信息
🖼️ 图片资源统计 - 统计页面图片资源和属性信息
🔗 链接关系分析 - 区分内部链接和外部链接
🎨 样式特征检测 - 检测响应式设计、字体等样式信息
Related MCP server: Violett MCP Server
🚀 快速开始
安装依赖
npm install构建项目
npm run build启动服务
Stdio 模式(本地开发)
npm startSSE 模式(通过 Supergateway)
# 安装 supergateway
npm install -g supergateway
# 启动 SSE 服务器
npm run sse服务将在 http://localhost:3100 启动。
🔧 Claude 配置
Stdio 模式配置
在 Claude 的 MCP 配置中添加:
{
"mcpServers": {
"web-retrieval-mcp": {
"command": "node",
"args": ["path/to/web-retrieval-mcp/build/index.js"]
}
}
}SSE 模式配置
{
"mcpServers": {
"web-retrieval-mcp": {
"type": "sse",
"url": "http://localhost:3100/sse",
"timeout": 600
}
}
}📖 使用方法
工具:analyze_web_structure
深度解析指定URL网页的前端设计架构与后端交互面。
参数
url(必需): 要解析的网页URL地址
示例
analyze_web_structure({
url: "https://example.com"
})输出示例(节选)
# 🌐 网页结构分析报告
**URL:** https://example.com
**标题:** Example Domain
**描述:** This domain is for use in illustrative examples
---
## 🏗️ 前端架构画像
- 框架候选: React, Next.js
- SPA 判定: ✅ 可能是 SPA
- 路由线索: React Router
- 构建工具线索: Webpack, Next.js build
- CSS 框架: Tailwind
- 微前端线索: 无
## 🔌 后端交互面(可通向后端的触点)
### 表单
- 表单 1: POST -> https://example.com/api/login [CSRF]
- 字段: hidden token(_csrf), text(username), password(password)
### API/HTTP 端点
- https://example.com/api/v1/user
- https://api.example.com/graphql
### WebSocket
- wss://ws.example.com/realtime
...🛠️ 开发
项目结构
src/
├── index.ts # MCP服务器主入口
└── tools/ # 业务工具模块
└── web-structure-analyzer.ts # 网页结构解析工具开发模式
# 监听文件变化并自动重新编译
npm run dev📋 技术栈
TypeScript - 类型安全的JavaScript
@modelcontextprotocol/sdk - MCP SDK
Cheerio - 服务端jQuery实现,用于HTML解析
Axios - HTTP客户端,用于获取网页内容
🔒 安全考虑
请求超时设置为10秒,避免长时间等待
使用标准浏览器User-Agent,提高兼容性
限制链接和内容提取数量,避免内存溢出
URL格式验证,确保输入安全
📄 许可证
Apache License 2.0
👨💻 作者
Xingyu Chen
📧 Email: guangxiangdebizi@gmail.com
🔗 GitHub: guangxiangdebizi
💼 LinkedIn: Xingyu Chen
📦 NPM: xingyuchen
🤝 贡献
欢迎提交 Issue 和 Pull Request!
📝 更新日志
v1.0.0
🎉 初始版本发布
✅ 基础网页结构解析功能
✅ 支持布局、导航、内容、表单、图片、链接分析
✅ 样式特征检测
✅ MCP协议支持
Available Tools
1 toolanalyze_web_structureB
深度解析指定URL网页的前端设计架构与后端交互面(仅需url参数)
Inputs: url (required).
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 1 tool
With only one tool, there is no ambiguity or overlap; the agent can only select that tool.
The single tool name 'analyze_web_structure' follows a clear verb_noun pattern, consistent with good naming conventions.
A single tool for a 'web-retrieval-mcp' server feels too limited; typically web retrieval involves multiple operations like fetching, parsing, or searching, making one tool insufficient for meaningful coverage.
The tool only analyzes web structure, omitting essential retrieval actions such as fetching raw content, extracting text, or handling different content types, leaving significant gaps for the stated domain.
Maintenance
Related MCP Connectors
Real HTML, styles, measurements and brand tokens from any live site, for coding agents.
Turn any public website into an MCP server for agents to search, read and navigate.
Model Context Protocol server for Studex tools, notifications, and profile integrations
DESIGN.md, clone prompts, HTML, screenshots, assets, fonts, colors and tech stack of any website.
Related MCP Servers
- -licenseBqualityNot gradedmaintenanceA Model Context Protocol server that enables AI models to extract structured data from websites through the extract\_structured\_data tool.133 npm-
- AlicenseBqualityDmaintenanceA Model Context Protocol server that provides tools for fetching and posting HTTP data, with built-in prompts for URL summarization and API analysis.2ISC
- AlicenseCqualityDmaintenanceA Model Context Protocol server that extracts webpage creation, modification, and publication timestamps from various sources including HTML meta tags, HTTP headers, and structured data.29 npm1MIT
- AlicenseBqualityDmaintenanceA Model Context Protocol server that enables AI assistants to securely fetch and extract readable text content from web pages through a standardized interface.1MIT