AI导哈

UI组件生成服务

一个基于shadcn/ui官方注册表的MCP服务器，用于生成和管理React组件，适用于前端开发项目。

  • by 70-10
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 70-10/shadcn-ui-mcp-server

使用说明

shadcn/ui MCP服务器

shadcn/ui集成模型上下文协议（MCP），支持官方注册表。

概述

此MCP服务器提供用于生成和管理shadcn/ui组件的工具。它可以从Claude Code等客户端调用，以创建和自定义React组件。

🌐 仅限官方登记处：从官方shadcn/ui注册表API动态获取最新的47+组件，确保您始终拥有最新的组件。

特性

可用工具

  1. 创建组件 -生成shadcn/ui组件（来自官方注册表）
  2. 列表_可用组件 -获取可用组件列表（从官方注册表）
  3. 获取_组件_用法 -获取组件使用示例（来自官方注册表）
  4. 定制组件 -自定义现有组件
  5. init工程 -在新项目中初始化shadcn/ui

支持的组件

🌐 官方登记处（47+个组成部分）

  • 基础用户界面：按钮、输入、标签、文本区域、复选框、单选组
  • 布局：卡片、对话框、工作表、制表符、手风琴、分隔符
  • 导航：下拉菜单、菜单栏、导航菜单、面包屑
  • 数据显示：表格、徽章、头像、日历、图表、进度
  • 表单：窗体、选择、组合框、日期选择器、滑块
  • 反馈：警报、吐司、骨架、旋转器、警报对话框
  • 其他：工具提示、鼠标悬停、上下文菜单、命令、滚动区域

安装

您可以直接从GitHub使用此MCP服务器，无需安装：

npx github:70-10/shadcn-ui-mcp-server

用法

MCP客户端配置

将以下内容添加到Claude Desktop的配置文件中 claude_desktop_config.json:

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["github:70-10/shadcn-ui-mcp-server"]
    }
  }
}

替代配置：

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["github:70-10/shadcn-ui-mcp-server#v1.0.0"]
    }
  }
}

配置文件位置：

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • 视窗: %APPDATA%\Claude\claude_desktop_config.json

发展

对于当地发展：

git clone https://github.com/70-10/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server
npm install
npm run build
npm run dev  # TypeScript watch mode
npm test  # Run tests with vitest
npm test -- --run  # Run tests once without watch mode

工具使用示例

从官方注册表创建组件

// Get the latest Button component from official registry
await tools.create_component({
  name: "CustomButton", 
  type: "button",  // Choose from 47+ official components
  path: "./components/ui"
});

// Advanced components are also available
await tools.create_component({
  name: "DataTable", 
  type: "table",
  path: "./components/ui"
});

检查可用组件

// Display component list from official registry
await tools.list_available_components();
// Result: 47+ components will be displayed

获取组件使用示例

// Detailed usage examples for official components
await tools.get_component_usage("calendar");
// TypeScript code, dependencies, and usage examples will be displayed

自定义组件

await tools.customize_component({
  componentName: "button",
  customizations: {
    styles: "rounded-full shadow-lg",
    variants: ["large", "small"]
  }
});

技术特性

🌐 仅限官方登记处

  • API：从获取最新组件列表 https://ui.shadcn.com/r/index.json
  • 缓存：通过在内存中缓存获取的组件来加快速度
  • 严格的错误处理：当注册表API失败时显示清楚的错误消息

🏗️ 仅注册架构

  • 单一来源：仅从官方注册表获取组件
  • 无退路：优先考虑系统可靠性和一致性
  • 最新国家担保：始终提供最新的官方组件

许可证

麻省理工学院

相关 MCP