shadcn-ui-mcp-server

概述

shadcn-ui-mcp-server 是一个全面的模型上下文协议服务器，为 AI 助手提供对 shadcn/ui v4 组件库的直接访问。它支持多种框架，包括 React（使用 Radix UI 或 Base UI）、Svelte 5、Vue 和 React Native，允许 AI 工具检索组件源代码、演示、块和元数据。该服务器具有 GitHub API 集成、智能缓存、服务器发送事件传输支持和 Docker 容器化功能，适用于生产环境部署。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• list_components

  List all available shadcn/ui components

  试试:Show me all available components试试:What components can I use?
• get_component

  Retrieve detailed information about a specific shadcn/ui component

  试试:Get details about the button component试试:Tell me about the card component
• get_block

  Retrieve complete implementation of shadcn/ui blocks

  试试:Show me a dashboard block implementation试试:Get a login form block
• search_components

  Search components by name or keywords

  试试:Search for components related to forms试试:Find components for data display
• get_component_code

  Get the source code for a specific component

  试试:Show me the source code for the button component试试:Get implementation details for the select component
• get_component_demos

  Retrieve usage demos and examples for a component

  试试:Show me demos for the input component试试:Get examples of the dialog component
• get_dependencies

  Get the dependency information for a specific component

  试试:What dependencies does the button component need?试试:Show required packages for the table component
• browse_repository

  Browse the repository structure of shadcn/ui components

  试试:Show me the repository structure试试:List all component directories
• get_configuration

  Get configuration details for the shadcn/ui setup

  试试:Show the components.json configuration试试:Get tailwind config settings
• compare_frameworks

  Compare component implementations across different frameworks

  试试:Compare button component across React and Vue试试:Show button implementation in Svelte

说明：Tool names inferred from documentation and features described. Actual tool names and signatures not explicitly documented in README.

可对比工具

安装

# 基本用法
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

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

FAQ

支持哪些 shadcn/ui 框架？

该服务器支持 React（默认）、Svelte 5、Vue 和 React Native 实现。对于 React，您可以选择 Radix UI（默认）或 Base UI。

如何提高 GitHub API 速率限制？

使用 GitHub 个人访问令牌并带上 --github-api-key 参数，可以将速率限制从每小时 60 次请求增加到每小时 5000 次请求。

shadcn-ui-mcp-server 对比