Material UI용 MCP

Material UI용 MCP (Model Context Protocol for MUI)

공식 Material UI 문서와 코드 예제를 AI 클라이언트에서 바로 접근할 수 있는 방법을 알려드릴게요. AI 어시스턴트가 항상 정확하고 최신의 문서를 참고하도록 만들고 싶다면 이 가이드를 따라가 보세요.

출처: 문서

본문

공식 Material UI 문서와 코드 예제를 AI 클라이언트에서 접근할 수 있어요.

MCP란 무엇인가요? (What is MCP?)

Model Context Protocol(MCP)은 AI 어시스턴트를 실제로 신뢰할 수 있는 문서와 코드 소스에 연결하기 위한 공개 표준이에요. Material UI 사용자에게는, 정확하고 최신이며 공식 문서를 직접 참조하는 답변을 얻을 수 있다는 뜻이에요.

MCP에 대해 더 알아보려면 공식 문서를 참고하세요.

MCP를 왜 사용하나요? (Why use MCP?)

인기 있는 AI 코딩 어시스턴트는 특히 단순한 질문에 대해 훌륭한 답변을 제공해요. 하지만 문서의 여러 부분의 개념을 이해해야 하는 더 깊고 복잡한 질문을 마주하면, 링크를 지어내거나, 존재하지 않는 문서를 인용하거나, 검증하기 어려운 답변을 제공하는 경우가 많아요. MCP는 다음과 같은 방식으로 이런 문제를 해결해요:

  • 답변에서 실제 직접 출처를 인용하기
  • 실제 문서에 연결하기 — 404로 이어지는 상상 속 링크 없음
  • 공식적으로 게시된 레지스트리의 컴포넌트 코드 사용하기

설치 및 설정 (Installation and setup)

아래 섹션에서는 인기 있는 에이전틱 코딩 환경에서 Material UI MCP를 설정하는 방법을 자세히 설명해요.

VS Code, Cursor, Windsurf

MCP 구성을 열고 (Settings -> MCP -> Add Server) 다음을 추가해요:

"mcpServers": {
  "mui-mcp": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "@mui/mcp@latest"]
  }
}

VS Code 사용자는 Agent 모드(Copilot Chat용)도 활성화하고 settings.json에 다음을 추가해야 해요:

  "chat.mcp.enabled": true,
  "chat.mcp.discovery.enabled": true

JetBrains IDEs

MCP 구성을 열고 (Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP)) 다음을 추가해요:

  • Name: MUI MCP
  • Command: npx
  • Arguments: -y @mui/mcp@latest

OK와 Apply를 클릭해요.

Zed

Zed에 Material UI MCP 서버를 확장 기능(extension)으로 또는 커스텀 서버로 추가할 수 있어요:

확장 기능으로 추가하기 (As an extension)

키 바인딩 cmd-shift-x/ctrl-shift-x(macOS/Linux)를 통해 Extensions 페이지로 가거나, Command Palette에서 zed: extensions를 검색해서 이동해요.

"MUI MCP"를 검색하고 확장 기능을 설치해요. 추가 구성은 필요 없지만, 선택적으로 preferred_theme와 component_filter 필드를 추가할 수 있어요.

커스텀 서버로 추가하기 (As a custom server)

Command Palette에서 agent: add context server를 검색하고 다음을 추가해요:

{
  "mui-mcp-server": {
    "command": {
      "path": "npx",
      "args": ["-y", "@mui/mcp@latest"],
      "env": {}
    }
  }
}

Claude Code

Claude Code는 터미널에서 실행되는 Anthropic의 에이전틱 코딩 도구예요.

명령줄을 통해 Claude Code에 Material UI MCP 서버를 추가할 수 있어요:

claude mcp add mui-mcp -- npx -y @mui/mcp@latest

기본적으로 이 명령은 작업 중인 프로젝트의 로컬 범위에 MCP 서버를 설치해요.

MCP 서버가 컴퓨터의 모든 프로젝트에서 항상 사용 가능하도록 하려면, 사용자 범위에 설치하면 돼요:

claude mcp add mui-mcp -s user -- npx -y @mui/mcp@latest

Claude Code에서 MCP 서버 범위의 계층 구조와 우선순위를 더 잘 이해하려면 공식 문서를 참고하세요.

일반적인 문제 (Common issues)

MCP를 설치했는데 연결에 오류가 있어요

MCP inspector를 사용해서 연결을 디버깅해 보세요. 이렇게 하려면 다음을 실행해요:

 npx @modelcontextprotocol/inspector

터미널에 "🔍 MCP Inspector is up and running at http://127.0.0.1:6274"가 출력될 때까지 기다려요. 브라우저에서 이 URL로 이동해서 다음 매개변수를 설정해요:

  • Transport type: Stdio
  • Command:npx
  • Arguments: -y @mui/mcp@latest

Connect를 클릭하고 연결이 설정될 때까지 기다려요.

연결되면 사용 가능한 도구 목록이 표시돼요. 연결할 수 없다면 MCP inspector를 실행한 터미널의 로그에서 자세한 내용을 확인해 보세요.

MCP를 설치했는데 질문할 때 사용되지 않아요

MCP를 설치하고 필요한 모든 설정을 활성화했는데도 질문할 때 사용되지 않는다면, AI 클라이언트에 MCP를 사용하라고 알려주는 규칙(rules)을 제공해야 할 수 있어요.

대부분의 편집기는 AI 어시스턴트가 따를 규칙을 지정할 수 있게 해줘요. 예를 들어 VS Code에서는 .github/instructions/mui.md에 새 규칙을 만들고 다음을 추가할 수 있어요:

## Use the mui-mcp server to answer any MUI questions --

- 1. call the "useMuiDocs" tool to fetch the docs of the package relevant in the question
- 2. call the "fetchDocs" tool to fetch any additional docs if needed using ONLY the URLs present in the returned content.
- 3. repeat steps 1-2 until you have fetched all relevant docs for the given question
- 4. use the fetched content to answer the question

:::info 같은 텍스트를 다른 IDE의 규칙으로 사용할 수도 있지만, 규칙을 위한 권장 위치는 다를 수 있어요. :::

문제 해결 (Troubleshooting)

MCP는 로컬에서 실행되고 stdio 전송을 통해 AI 클라이언트와 통신하는 별도의 패키지로 제공돼요. MCP inspector에서 MCP를 테스트하려면 다음 명령을 사용해요:

npx -y @mui/mcp@latest

더 알아보기 (Learn more)