MCP 서버

AI 에디터가 컴포넌트를 이름으로 추가할 수 있도록 Neobrutalism MCP 서버를 설정합니다.

Model Context Protocol (MCP) 서버를 사용하면 Neobrutalism 컴포넌트를 AI 지원 워크플로에 바로 가져올 수 있습니다. Claude, Cursor, VS Code를 비롯한 MCP 지원 에디터에서 자연어 명령으로 컴포넌트를 추가할 수 있습니다. URL을 복사해 붙여넣을 필요가 없습니다.

이 서버는 Neobrutalism 레지스트리를 가리키는 shadcn CLI 위에서 동작합니다. 배경 지식은 shadcn MCP 문서를 참고하세요.

자동 설정

Claude Code


pnpm dlx shadcn@latest mcp init --client claude
npx shadcn@latest mcp init --client claude
yarn dlx shadcn@latest mcp init --client claude
bunx --bun shadcn@latest mcp init --client claude

Cursor


pnpm dlx shadcn@latest mcp init --client cursor
npx shadcn@latest mcp init --client cursor
yarn dlx shadcn@latest mcp init --client cursor
bunx --bun shadcn@latest mcp init --client cursor

VS Code


pnpm dlx shadcn@latest mcp init --client vscode
npx shadcn@latest mcp init --client vscode
yarn dlx shadcn@latest mcp init --client vscode
bunx --bun shadcn@latest mcp init --client vscode

수동 설정

먼저 shadcn을 개발 의존성으로 설치합니다.


pnpm add -D shadcn@latest
npm install -D shadcn@latest
yarn add -D shadcn@latest
bun add -D shadcn@latest

그런 다음 사용하는 에디터에 맞게 MCP 서버를 설정합니다.

Claude Code

다음 내용을 .mcp.json에 추가합니다.

.mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Cursor

다음 내용을 .cursor/mcp.json에 추가합니다.

.cursor/mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

VS Code

다음 내용을 .vscode/mcp.json에 추가합니다.

.vscode/mcp.json

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

서버가 @neobrutalism 컴포넌트를 해석할 수 있도록, Neobrutalism 레지스트리가 components.json에 설정되어 있는지 확인하세요(설치 참고).

사용법

설정을 마치면 에디터에서 자연어로 Neobrutalism 컴포넌트를 추가할 수 있습니다.

→ "neobrutalism button 컴포넌트를 추가해 줘"
→ "@neobrutalism에서 accordion을 설치해 줘"
→ "네오브루탈리즘 스타일로 card 컴포넌트를 추가해 줘"

MCP 서버는 Neobrutalism 디자인 시스템에 맞는 올바른 설정으로 컴포넌트를 설치합니다.