shadcn-ui-mcp-server vs filesystem

并排对比，帮你在这两个 MCP server 之间做选择。

	shadcn-ui-mcp-server by Jpisnice	filesystem by modelcontextprotocol
Stars	★ 2,768	★ 85,748
30天用量	—	—
综合分	58	77
官方	—	✓
分类	开发者工具AI / LLM 工具效率工具	本地文件系统开发者工具效率工具
实现语言	TypeScript	TypeScript
最近提交	本月	本月

shadcn-ui-mcp-server · 概述

MCP 服务器为 AI 助手提供对 shadcn/ui 组件的全面访问，支持 React、Svelte、Vue 和 React Native。

filesystem · 概述

功能丰富的文件系统操作 MCP 服务器，具有动态目录访问控制功能。

shadcn-ui-mcp-server · 使用场景

使用 shadcn/ui 组件进行跨多框架的 AI 驱动 UI 开发
使用 SSE 传输和 Docker 进行多客户端生产环境部署
跨 React、Svelte、Vue 和 React Native 实现的组件发现和比较

filesystem · 使用场景

使 AI 模型能够读取和写入项目文件进行开发
允许 Claude 或其他 MCP 客户端浏览和分析代码库
为内容生成提供对特定目录的安全沙盒访问

shadcn-ui-mcp-server · 安装

安装

命令行使用

# 基本用法
npx @jpisnice/shadcn-ui-mcp-server

# 使用 GitHub 令牌（推荐）
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# 框架特定
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

Claude Desktop

从 [Releases](https://github.com/Jpisnice/shadcn-ui-mcp-server/releases) 下载并双击 .mcpb 文件即可立即安装。

手动 Claude Desktop 配置

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

filesystem · 安装

安装

使用 NPX

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/path/to/allowed/directory"
      ]
    }
  }
}

使用 Docker

{
  "mcpServers": {
    "filesystem": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "--mount", "type=bind,src=/path/to/allowed/dir,dst=/projects/allowed/dir",
        "mcp/filesystem",
        "/projects"
      ]
    }
  }
}

VS Code 扩展

点击 README 中的安装按钮直接在 VS Code 中安装。

对比内容由 README + GitHub 公开数据自动生成，定期更新。