Material Design MCPサーバー

Material Design 3のドキュメントを閲覧するためのMCP (Model Context Protocol)サーバーを公開するCloudflare Workerです。

機能

• list_sections — ドキュメントのトップレベルセクション（Foundations、Components、Stylesなど）を探索します

• 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