MCP 服务器

配置 Neobrutalism MCP 服务器，让您的 AI 编辑器可以按名称添加组件。

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 注册表已在您的 components.json 中配置好（参见安装），这样服务器才能解析 @neobrutalism 组件。

用法

配置完成后，在编辑器中用自然语言添加 Neobrutalism 组件：

→ 「添加一个 neobrutalism button 组件」
→ 「从 @neobrutalism 安装 accordion」
→ 「添加带新野兽主义样式的 card 组件」

MCP 服务器会以符合 Neobrutalism 设计系统的正确配置来安装组件。