Material Design MCP Server

A Cloudflare Worker that exposes an MCP (Model Context Protocol) server for browsing the Material Design 3 documentation.

Features

• list_sections — Discover top-level documentation sections (Foundations, Components, Styles, etc.)
• get_page — Navigate any Material Design page and get its content as clean Markdown

Architecture

• Runtime: Cloudflare Workers (TypeScript, nodejs_compat)
• Router: Hono
• Browser automation: Browser Run (Puppeteer binding)
• Markdown conversion: Workers AI toMarkdown()
• MCP transport: Streamable HTTP (@modelcontextprotocol/server v2)

Because m3.material.io is a JavaScript-heavy SPA, the worker uses Puppeteer to wait for the client-side <article> element to render before extracting content.

Prerequisites

• Node.js 18+
• pnpm
• A Cloudflare account with:
  • Browser Run enabled
  • Workers AI enabled

Setup

# Install dependencies
pnpm install

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

Development

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

The MCP endpoint is available at http://localhost:8787/mcp.

Deployment

pnpm deploy

MCP Tools

list_sections

Returns the top-level documentation sections from the Material Design sitemap.

Input: none

Example output:

blog
components
develop
foundations
get-started
styles

get_page

Navigates to a specific Material Design page, extracts the article content, and converts it to Markdown.

Input:

• path — URL path on m3.material.io (e.g. /foundations/overview)

Example output:

## Accessibility & Material Design

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

Connect an MCP Client

Any MCP client that supports Streamable HTTP can connect to:

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

For example, with Claude Desktop:

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

License

MIT