Material Design MCP 서버

Material Design 3 문서를 탐색하기 위한 MCP (Model Context Protocol) 서버를 노출하는 Cloudflare Worker입니다.

기능

• list_sections — 최상위 문서 섹션(Foundations, Components, Styles 등) 탐색

• get_page — 모든 Material Design 페이지를 탐색하고 해당 콘텐츠를 깔끔한 마크다운으로 가져오기

Related MCP server: mdbook-mcp-server

아키텍처

• 런타임: Cloudflare Workers (TypeScript, nodejs_compat)

• 라우터: Hono

• 브라우저 자동화: Browser Run (Puppeteer 바인딩)

• 마크다운 변환: Workers AI toMarkdown()

• MCP 전송: 스트리밍 가능한 HTTP (@modelcontextprotocol/server v2)

m3.material.io는 JavaScript 기반의 SPA이므로, 워커는 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 페이지로 이동하여 아티클 콘텐츠를 추출하고 마크다운으로 변환합니다.

입력:

• 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