AI导哈

UI组件访问服务

一个为AI助手提供shadcn/ui v4组件、模块、演示和元数据全面访问的模型上下文协议服务器，支持VS Code、Cursor等MCP兼容客户端无缝检索和使用组件。

  • by dwolfe1966
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 dwolfe1966/shadcn-ui-mcp-server

使用说明

Shadcn UI v4 MCP服务器

一种模型上下文协议（MCP）服务器，为人工智能助手提供全面的访问权限 shadcn/ui v4 组件、块、演示和元数据。该服务器使Claude Desktop、Continue.dev、VS Code、Cursor和其他MCP兼容客户端等AI工具能够无缝检索和使用shadcn/ui组件。

🚀 主要特点

  • 组件源代码：获取最新的shadcn/ui v4组件TypeScript源代码
  • 组件演示：访问示例实现和使用模式
  • 块支持：检索完整的块实现（仪表板、日历、登录表单等）
  • 元数据访问：获取组件依赖关系、描述和配置详细信息
  • 目录浏览：探索shadcn/ui存储库结构
  • GitHub API集成：高效缓存和智能速率限制处理

📦 快速开始

⚡ 使用npx（推荐）

最快的入门方式-无需安装！

# Basic usage (rate limited to 60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server

# With GitHub token for better rate limits (5000 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Short form
npx @jpisnice/shadcn-ui-mcp-server -g ghp_your_token_here

# Using environment variable
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
npx @jpisnice/shadcn-ui-mcp-server

🎯 现在试试：运行 npx @jpisnice/shadcn-ui-mcp-server --help 查看所有选项！

🔧 命令行选项

shadcn-ui-mcp-server [options]

Options:
  --github-api-key, -g <token>    GitHub Personal Access Token
  --help, -h                      Show help message  
  --version, -v                   Show version information

Environment Variables:
  GITHUB_PERSONAL_ACCESS_TOKEN    Alternative way to provide GitHub token

Examples:
  npx @jpisnice/shadcn-ui-mcp-server --help
  npx @jpisnice/shadcn-ui-mcp-server --version
  npx @jpisnice/shadcn-ui-mcp-server -g ghp_1234567890abcdef
  GITHUB_PERSONAL_ACCESS_TOKEN=ghp_token npx @jpisnice/shadcn-ui-mcp-server

🔑 GitHub API令牌设置

你为什么需要代币？

  • 无令牌：每小时限制为60个API请求
  • 带令牌：每小时最多5000个请求
  • 更高的可靠性和更快的响应速度

📝 获取代币（2分钟）

  1. 转到GitHub设置:

  2. 生成新令牌:

    • 点击“生成新令牌（经典）”
    • 添加注释：“shadcn-ui MCP服务器”
    • 过期：选择您的偏好（建议90天）
    • 范围: ✅ 不需要示波器！ （公共存储库访问权限就足够了）

  3. 复制您的令牌:

    • 复制生成的令牌（以开头 ghp_)
    • ⚠️ 安全保存 -你不会再看到它了！

🚀 使用您的令牌

方法1：命令行（快速测试）

npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

方法2：环境变量（推荐）

# Add to your shell profile (~/.bashrc, ~/.zshrc, etc.)
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

# Then simply run:
npx @jpisnice/shadcn-ui-mcp-server

🛠️ 编辑器集成

VS代码集成

方法1：使用Continue扩展

  1. 安装继续扩展:

    • 打开VS代码
    • 转到扩展（Ctrl+Shift+X）
    • 搜索“继续”并安装

  2. 配置MCP服务器:

    • 打开命令面板（Ctrl+Shift+P）
    • 键入“继续：配置”并选择它
    • 将此配置添加到您的设置中：
{
  "continue.server": {
    "mcpServers": {
      "shadcn-ui": {
        "command": "npx",
        "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"]
      }
    }
  }
}

方法2：使用Claude扩展

  1. 安装Claude扩展:

    • 在VS代码扩展中搜索“Claude”
    • 安装官方的Claude扩展

  2. 配置MCP服务器:

    • 添加到您的VS代码设置.json：
{
  "claude.mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

光标集成

方法1：全局配置

  1. 打开光标设置:

    • 转到设置（Cmd/Ctrl+，）
    • 搜索“MCP”或“模型上下文协议”

  2. 添加MCP服务器配置:

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"]
    }
  }
}

方法2：工作空间配置

创建一个 .cursorrules 项目根目录中的文件：

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

Claude桌面集成

添加到您的Claude Desktop配置(~/.config/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"]
    }
  }
}

或者使用环境变量：

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

持续开发集成

  1. 安装Continue.dev:

  2. 配置MCP服务器:

    • 打开Continue.dev
    • 转到“设置”→ MCP服务器
    • 添加新服务器：
{
  "name": "shadcn-ui",
  "command": "npx",
  "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"]
}

🎯 使用示例

获取组件源代码

问你的AI助手：

"Show me the source code for the shadcn/ui button component"

AI现在可以访问按钮组件的完整TypeScript源代码。

创建仪表板

问你的AI助手：

"Create a dashboard using shadcn/ui components. Use the dashboard-01 block as a starting point"

AI可以检索完整的仪表板块实现，并根据您的需求进行定制。

构建登录表单

问你的AI助手：

"Help me build a login form using shadcn/ui components. Show me the available form components"

AI可以列出所有可用的组件，并帮助您构建表单。

🛠️ 可用工具

MCP服务器为AI助手提供以下工具：

组件工具

  • get_component -获取组件源代码
  • get_component_demo -获取组件使用示例
  • list_components -列出所有可用组件
  • get_component_metadata -获取组件依赖关系和信息

块工具

  • get_block -获取完整的块实现（仪表板-01、日历-01等）
  • list_blocks -按类别列出所有可用块

存储库工具

  • get_directory_structure -探索shadcn/ui存储库结构

工具使用示例

// These tools can be called by AI assistants via MCP protocol

// Get button component source
{
  "tool": "get_component",
  "arguments": { "componentName": "button" }
}

// List all components
{
  "tool": "list_components",
  "arguments": {}
}

// Get dashboard block
{
  "tool": "get_block", 
  "arguments": { "blockName": "dashboard-01" }
}

🐛 故障排除

常见问题

“超出速率限制”错误：

# Solution: Add GitHub API token
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

“找不到命令”错误：

# Solution: Install Node.js 18+ and ensure npx is available
node --version  # Should be 18+
npx --version   # Should work

未找到组件：

# Check available components first
npx @jpisnice/shadcn-ui-mcp-server
# Then call list_components tool via your MCP client

网络/代理问题：

# Set proxy if needed
export HTTP_PROXY=http://your-proxy:8080
export HTTPS_PROXY=http://your-proxy:8080
npx @jpisnice/shadcn-ui-mcp-server

编辑器无法识别MCP服务器：

# Verify the server is running
npx @jpisnice/shadcn-ui-mcp-server --help

# Check your editor's MCP configuration
# Ensure the command and args are correct

调试模式

启用详细日志记录：

# Set debug environment variable
DEBUG=* npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🤝 贡献

  1. 分叉存储库
  2. 创建要素分支(git checkout -b feature/amazing-feature)
  3. 提交您的更改(git commit -m 'Add amazing feature')
  4. 推到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

📞 支持

🔗 相关项目

⭐ 致谢

  • 影电 令人惊叹的UI组件库
  • Anthropic 用于模型上下文协议规范
  • 开源社区的灵感和贡献

由以下材料制成❤️ 靠近 Janardhan Polle

星⭐ 如果你觉得这个仓库有用的话！

相关 MCP