内容
# mdn-mcp
MDN Web 文档的 MCP 服务器 - 直接从您的 AI 助手搜索文档、获取页面并检查浏览器兼容性。
## 功能
| 工具 | 描述 | 数据源 |
|------|-------------|-------------|
| `mdn_search` | 按关键词搜索 MDN | MDN 搜索 API（远程） |
| `mdn_doc` | 获取页面的完整文档 | MDN JSON API（远程） |
| `mdn_compat` | 检查浏览器兼容性 | `@mdn/browser-compat-data`（离线） |
| `mdn_list` | 按命名空间浏览和发现 BCD 功能 | `@mdn/browser-compat-data`（离线） |
| `mdn_css` | CSS 属性的正式定义 | `mdn-data`（离线） |
| `mdn_http` | HTTP 头部、状态码、方法参考 | `@mdn/browser-compat-data`（离线） |
## 设置
无需安装 - 只需配置您的 MCP 客户端：
<details>
<summary>VS Code / Copilot</summary>
添加到 `.vscode/mcp.json`：
```json
{
"servers": {
"mdn": {
"command": "npx",
"args": ["-y", "mdn-mcp"]
}
}
}
```
</details>
<details>
<summary>Cursor</summary>
添加到 `.cursor/mcp.json`：
```json
{
"mcpServers": {
"mdn": {
"command": "npx",
"args": ["-y", "mdn-mcp"]
}
}
}
```
</details>
<details>
<summary>Windsurf</summary>
添加到 `~/.codeium/windsurf/mcp_config.json`：
```json
{
"mcpServers": {
"mdn": {
"command": "npx",
"args": ["-y", "mdn-mcp"]
}
}
}
```
</details>
<details>
<summary>Claude Desktop</summary>
添加到 `claude_desktop_config.json`：
```json
{
"mcpServers": {
"mdn": {
"command": "npx",
"args": ["-y", "mdn-mcp"]
}
}
}
```
</details>
<details>
<summary>Claude Code</summary>
```bash
claude mcp add --transport stdio mdn -- npx -y mdn-mcp
```
或添加到 `.mcp.json`（与团队共享）：
```json
{
"mcpServers": {
"mdn": {
"command": "npx",
"args": ["-y", "mdn-mcp"]
}
}
}
```
</details>
<details>
<summary>Zed</summary>
添加到 `settings.json`：
```json
{
"context_servers": {
"mdn": {
"command": "npx",
"args": ["-y", "mdn-mcp"]
}
}
}
```
</details>
<details>
<summary>JetBrains IDEs</summary>
打开 **设置 → 工具 → AI 助手 → MCP**，点击 **+**，然后粘贴：
```json
{
"mcpServers": {
"mdn": {
"command": "npx",
"args": ["-y", "mdn-mcp"]
}
}
}
```
</details>
<details>
<summary>Gemini CLI</summary>
```bash
gemini mcp add mdn -- npx -y mdn-mcp
```
或添加到 `~/.gemini/settings.json`：
```json
{
"mcpServers": {
"mdn": {
"command": "npx",
"args": ["-y", "mdn-mcp"]
}
}
}
```
</details>
<details>
<summary>其他 MCP 客户端</summary>
任何支持 **stdio** 传输的 MCP 客户端都可以使用此服务器。命令是：
```
npx -y mdn-mcp
```
参见 [MCP 客户端完整列表](https://modelcontextprotocol.io/clients)。
</details>
### 本地开发
```bash
git clone https://github.com/anvme/mdn-mcp.git
cd mdn-mcp
npm install
node index.js
```
## 工具参考
### `mdn_search`
按关键词搜索 MDN Web 文档。
| 参数 | 类型 | 必需 | 默认值 | 描述 |
|-----------|------|----------|---------|-------------|
| `query` | 字符串 | 是 | — | 搜索查询 |
| `limit` | 数字 | 否 | 5 | 最大结果数（1-20） |
**示例：** `{ "query": "Array.map", "limit": 3 }`
### `mdn_doc`
获取特定 MDN 页面的完整文档。支持大型页面的分页。
| 参数 | 类型 | 必需 | 默认值 | 描述 |
|-----------|------|----------|---------|-------------|
| `path` | 字符串 | 是 | — | MDN 文档路径或完整 URL |
| `sections` | 字符串数组 | 否 | — | 过滤部分：`syntax`、`description`、`parameters`、`return_value`、`examples`、`see_also` |
| `max_length` | 数字 | 否 | 5000 | 返回的最大字符数（500-50000） |
| `start_index` | 数字 | 否 | 0 | 分页偏移量 |
**示例：** `{ "path": "Web/CSS/grid", "sections": ["syntax", "description"] }`
### `mdn_compat`
检查 Web 功能的浏览器兼容性。离线工作。
| 参数 | 类型 | 必需 | 描述 |
|-----------|------|----------|-------------|
| `feature` | 字符串 | 是 | BCD 功能路径，例如 `css.properties.grid`、`api.fetch`、`javascript.builtins.Array.map` |
**示例：** `{ "feature": "javascript.builtins.Array.map" }`
返回一个 Markdown 表格，包含 Chrome、Edge、Firefox、Safari、Opera、iOS Safari、Chrome Android、Firefox Android、Node.js、Deno 和 Bun 的版本支持。
### `mdn_list`
按命名空间浏览和发现 BCD 功能。按关键词或状态过滤。
| 参数 | 类型 | 必需 | 默认值 | 描述 |
|-----------|------|----------|---------|-------------|
| `path` | 字符串 | 否 | `""` | 浏览的 BCD 路径，例如 `css.properties`、`api`、`javascript.builtins` |
| `query` | 字符串 | 否 | — | 按关键词过滤功能 |
| `deprecated` | 布尔值 | 否 | — | `true` = 仅限已弃用，`false` = 排除已弃用 |
| `experimental` | 布尔值 | 否 | — | `true` = 仅限实验性，`false` = 排除实验性 |
| `limit` | 数字 | 否 | 50 | 返回的最大功能数（1-200） |
**示例：**
- `{ "path": "css.properties", "query": "grid" }` — 查找与 CSS 网格相关的属性
- `{ "path": "api", "deprecated": true, "limit": 20 }` — 列出已弃用的 Web API
- `{ "path": "" }` — 显示所有顶级 BCD 命名空间
### `mdn_css`
获取 CSS 属性的正式定义 - 语法、初始值、继承、计算值、动画类型等。离线工作。
| 参数 | 类型 | 必需 | 描述 |
|-----------|------|----------|-------------|
| `name` | 字符串 | 是 | CSS 属性、函数、at-rule、选择器、类型或单位名称 |
**示例：**
- `{ "name": "grid" }` — 网格缩写属性的完整定义
- `{ "name": "display" }` — display 属性的正式语法
- `{ "name": ":hover" }` — :hover 选择器的信息
- `{ "name": "calc" }` — calc() 函数的信息
### `mdn_http`
浏览 HTTP 参考数据 - 头部、状态码、方法，并带有浏览器兼容性。
| 参数 | 类型 | 必需 | 默认值 | 描述 |
|-----------|------|----------|---------|-------------|
| `topic` | 字符串 | 否 | `""` | HTTP 主题路径，例如 `headers`、`headers.Content-Type`、`status.200` |
**示例：**
- `{ "topic": "" }` — 列出所有 HTTP 类别
- `{ "topic": "headers" }` — 列出所有 HTTP 头部
- `{ "topic": "headers.Content-Type" }` — Content-Type 的浏览器兼容性
- `{ "topic": "status" }` — 列出所有 HTTP 状态码
## 先决条件
- Node.js >= 18
## 许可证
MIT
