Material Design MCP 服务器

一个 Cloudflare Worker，提供用于浏览 Material Design 3 文档的 MCP (Model Context Protocol) 服务器。

功能

• list_sections — 发现顶级文档章节（基础、组件、样式等）

• get_page — 导航至任何 Material Design 页面并获取其纯净的 Markdown 格式内容

Related MCP server: mdbook-mcp-server

架构

• 运行时: Cloudflare Workers (TypeScript, nodejs_compat)

• 路由: Hono

• 浏览器自动化: Browser Run (Puppeteer 绑定)

• Markdown 转换: Workers AI toMarkdown()

• MCP 传输: 可流式传输的 HTTP (@modelcontextprotocol/server v2)

由于 m3.material.io 是一个重度依赖 JavaScript 的单页应用 (SPA)，该 worker 使用 Puppeteer 等待客户端 <article> 元素渲染完成后再提取内容。

前置要求

• Node.js 18+

• pnpm

• 一个拥有以下功能的 Cloudflare 账户：

  • 已启用 Browser Run

  • 已启用 Workers AI

设置

# Install dependencies
pnpm install

# Generate TypeScript types from wrangler.jsonc
pnpm run gen:cf-types

开发

# Start local dev server (connects to remote Cloudflare services)
pnpm dev

MCP 端点位于 http://localhost:8787/mcp。

部署

pnpm deploy

MCP 工具

list_sections

返回 Material Design 站点地图中的顶级文档章节。

输入: 无

输出示例:

blog
components
develop
foundations
get-started
styles

get_page

导航至特定的 Material Design 页面，提取文章内容并将其转换为 Markdown。

输入:

• path — m3.material.io 上的 URL 路径（例如 /foundations/overview）

输出示例:

## Accessibility & Material Design

**Accessibility by default** is a core design value for Material...

连接 MCP 客户端

任何支持可流式传输 HTTP 的 MCP 客户端都可以连接到：

https://<your-worker>.<your-subdomain>.workers.dev/mcp

例如，使用 Claude Desktop：

{
    "mcpServers": {
        "material-design": {
            "url": "https://material-mcp.your-account.workers.dev/mcp"
        }
    }
}

许可证

MIT