Máy chủ MCP

Máy chủ Model Context Protocol (MCP) cho phép bạn đưa các component Neobrutalism thẳng vào quy trình làm việc có hỗ trợ AI của mình. Thêm component thông qua các lệnh bằng ngôn ngữ tự nhiên trong Claude, Cursor, VS Code và các trình soạn thảo hỗ trợ MCP khác — không cần sao chép và dán URL.

Nó chạy trên shadcn CLI, được trỏ đến registry của Neobrutalism. Để biết thêm thông tin, hãy xem tài liệu MCP của shadcn.

Cấu hình tự động#

Claude Code#

pnpmnpmyarnbun
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
Sao chép

Cursor#

pnpmnpmyarnbun
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
Sao chép

VS Code#

pnpmnpmyarnbun
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
Sao chép

Cấu hình thủ công#

Trước tiên, cài đặt shadcn như một dev dependency:

pnpmnpmyarnbun
pnpm add -D shadcn@latest
npm install -D shadcn@latest
yarn add -D shadcn@latest
bun add -D shadcn@latest
Sao chép

Sau đó cấu hình máy chủ MCP cho trình soạn thảo của bạn.

Claude Code#

Thêm nội dung sau vào .mcp.json của bạn:

Sao chép{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Cursor#

Thêm nội dung sau vào .cursor/mcp.json của bạn:

Sao chép{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

VS Code#

Thêm nội dung sau vào .vscode/mcp.json của bạn:

Sao chép{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Hãy đảm bảo registry của Neobrutalism đã được cấu hình trong components.json của bạn (xem Cài đặt) để máy chủ có thể phân giải các component @neobrutalism.

Cách dùng#

Sau khi cấu hình xong, hãy dùng ngôn ngữ tự nhiên trong trình soạn thảo để thêm các component Neobrutalism:

• → "Thêm một component button neobrutalism"
• → "Cài đặt accordion từ @neobrutalism"
• → "Thêm component card với phong cách neo-brutalist"

Máy chủ MCP cài đặt các component với cấu hình chính xác cho design system của Neobrutalism.