关键词

shadcn/uiUI组件AI助手开发工具上下文

项目简介

该项目是一个基于 Model Context Protocol (MCP) 构建的服务器端应用，专注于为 AI 助手提供关于 shadcn/ui 组件库的详细信息和功能。它充当 AI 模型与 shadcn/ui 资源之间的桥梁，使 AI 能够理解、访问和利用 shadcn/ui 的内容来辅助开发者。

主要功能点

该 MCP 服务器提供以下能力，赋能 AI 助手：

  • 获取组件源码: AI 可以检索特定 shadcn/ui 组件的 TypeScript/React 源代码。
  • 获取组件示例: AI 可以获取展示如何使用某个组件的代码示例和用法说明。
  • 生成安装脚本: 根据用户选择的包管理器（如 npm, pnpm, yarn, bun）和组件名称，动态生成组件的安装命令。
  • 提供框架安装指南: 根据用户选择的框架（如 Next.js, Vite, Remix）和包管理器，提供 shadcn/ui 在该框架下的详细安装和初始化指南。
  • 列出可用组件: AI 可以获取当前支持的所有 shadcn/ui 组件的列表。
  • 获取目录结构: AI 可以获取 shadcn/ui GitHub 仓库特定路径下的目录和文件结构。

安装步骤

  1. 确保你已经安装 Node.js (推荐 v18 或更高版本) 和 npm。
  2. 克隆仓库到本地： 
    git clone https://github.com/Jpisnice/shadcn-ui-mcp-unofficial.git
cd shadcn-ui-mcp-unofficial
  3. 安装项目依赖： 
    npm install
  4. 构建项目： 
    npm run build

服务器配置 (适用于 MCP 客户端)

MCP 服务器是为 MCP 客户端（如某些 AI 编辑器插件、AI Agents）提供服务的。MCP 客户端需要知道如何启动和连接到这个服务器。

以下是 MCP 客户端可能需要的配置信息概念：

  • 服务器名称 (name): 一个标识服务器的名称，例如 "shadcnui"。
  • 启动命令 (command) 和参数 (args): 告诉客户端如何启动服务器进程。对于此项目，如果使用 npm，命令通常是 'npm'，参数是 '["run", "<脚本名称>"]'。
    • 要启动使用 Stdio 协议的服务器（通常用于命令行或某些集成）：脚本名称为 'start'。
    • 要启动使用 SSE (Server-Sent Events) 协议的 HTTP 服务器（通常用于需要 HTTP 连接的客户端，如 VS Code）：脚本名称为 'start:http'。
  • 连接类型 (type): 指明使用的传输协议，例如 "stdio" 或 "sse"。
  • 连接地址 (url): 对于 SSE 类型，指明服务器监听的 HTTP 地址，例如 'http://localhost:3001/sse' (默认端口)。

具体配置格式取决于你使用的 MCP 客户端。请参考你所用客户端的文档进行配置。

基本使用方法 (通过 MCP 客户端与 AI 互动)

一旦 MCP 服务器启动并被 MCP 客户端成功连接和配置，AI 助手就可以感知并使用服务器提供的功能（工具和资源）。

例如，在一个支持 MCP 的聊天界面或代码编辑器中，你可以尝试向 AI 提出以下请求：

  • 询问 "列出所有可用的 shadcn/ui 组件。" (AI 可能会通过调用 'resource:get_components' 资源来回答)
  • 请求 "给我 button 组件的源代码。" (AI 可能会通过调用 'get_component' 工具来回答)
  • 询问 "如何在我的 Next.js 项目中使用 accordion 组件？" (AI 可能会结合 'resource-template:get_installation_guide' 和 'get_component_demo' 工具来回答)
  • 要求 "为我生成使用 pnpm 安装 date picker 组件的命令行指令。" (AI 可能会通过调用 'resource-template:get_install_script_for_component' 资源模板来回答)

AI 会根据你的请求和服务器提供的能力，自动选择并调用相应的工具或读取资源来获取信息并生成回复。

信息

分类

开发者工具

访问项目