Servidor MCP de Material Design

Un Cloudflare Worker que expone un servidor MCP (Model Context Protocol) para navegar por la documentación de Material Design 3.

Características

• list_sections — Descubre las secciones de documentación de nivel superior (Fundamentos, Componentes, Estilos, etc.)

• get_page — Navega por cualquier página de Material Design y obtén su contenido como Markdown limpio

Related MCP server: mdbook-mcp-server

Arquitectura

• Entorno de ejecución: Cloudflare Workers (TypeScript, nodejs_compat)

• Router: Hono

• Automatización de navegador: Browser Run (enlace de Puppeteer)

• Conversión a Markdown: Workers AI toMarkdown()

• Transporte MCP: HTTP transmitible (@modelcontextprotocol/server v2)

Debido a que m3.material.io es una SPA con gran carga de JavaScript, el worker utiliza Puppeteer para esperar a que el elemento <article> del lado del cliente se renderice antes de extraer el contenido.

Requisitos previos

• Node.js 18+

• pnpm

• Una cuenta de Cloudflare con:

  • Browser Run habilitado

  • Workers AI habilitado

Configuración

# Install dependencies
pnpm install

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

Desarrollo

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

El endpoint MCP está disponible en http://localhost:8787/mcp.

Despliegue

pnpm deploy

Herramientas MCP

list_sections

Devuelve las secciones de documentación de nivel superior del mapa del sitio de Material Design.

Entrada: ninguna

Ejemplo de salida:

blog
components
develop
foundations
get-started
styles

get_page

Navega a una página específica de Material Design, extrae el contenido del artículo y lo convierte a Markdown.

Entrada:

• path — Ruta URL en m3.material.io (p. ej., /foundations/overview)

Ejemplo de salida:

## Accessibility & Material Design

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

Conectar un cliente MCP

Cualquier cliente MCP que admita HTTP transmitible puede conectarse a:

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

Por ejemplo, con Claude Desktop:

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

Licencia

MIT