项目简介

'shadcn-svelte-mcp' 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在为AI代码编辑器提供关于 shadcn-svelte 组件库的实时、全面的上下文信息和开发工具。它利用网络抓取技术，确保所提供的信息始终与 shadcn-svelte 官方网站同步更新。该服务器专注于提供工具和数据，不作为 MCP 客户端消费其他服务器的功能。其已部署并可供公众访问，方便您直接集成到常用的AI代码编辑器中。

主要功能点

实时文档访问: 直接从 shadcn-svelte.com 网站抓取最新组件文档和开发指南，确保信息准确无误。
组件列表与详情: 能够列出所有可用的 shadcn-svelte UI 组件、区块（如仪表盘、侧边栏）和图表，并提供详细的安装、用法、属性和代码示例。
高级搜索功能: 提供智能模糊搜索，支持错别字容忍和智能建议，帮助用户快速定位所需的组件、区块、图表或文档。
Lucide Svelte 图标搜索: 允许用户浏览和搜索 1400 多个 Lucide 图标，支持按名称和标签智能筛选，并提供清晰的使用示例。
开发实用工具: 包含针对不同框架的安装指南、主题定制帮助、CLI 工具使用说明以及版本迁移辅助等功能。
多协议支持: 支持 HTTP 和 Server-Sent Events (SSE) 两种传输协议，方便不同类型的 MCP 客户端进行集成。
智能缓存: 内置智能缓存机制，在确保数据新鲜度的同时，显著提升查询性能和响应速度。

安装步骤 (本地运行，可选)

如果您希望在本地运行此 MCP 服务器或为其贡献代码，请遵循以下步骤：

克隆仓库: 打开终端并执行以下命令克隆项目仓库：

git clone https://github.com/Michael-Obele/shadcn-svelte-mcp.git

进入项目目录:

cd shadcn-svelte-mcp

安装依赖: 使用您偏好的包管理器安装项目依赖：

# 使用 npm
npm install
# 或者使用 bun
bun install
# 或者使用 pnpm
pnpm install

启动开发服务器 (推荐用于测试):
```
npm run dev
```
这将在开发模式下启动服务器，方便您进行快速测试和调试。
启动生产服务器 (构建后): 首先构建项目：
```
npm run build
```
然后启动生产服务器：
```
npm run start
```

服务器配置 (客户端集成)

该 MCP 服务器已部署并对外开放。您无需在本地运行它，可以直接在支持 MCP 协议的 AI 代码编辑器中进行配置，以便连接和使用其提供的功能。以下是几种常见 AI 代码编辑器的配置示例。您只需将对应的 JSON 配置块复制粘贴到编辑器指定的设置文件或界面中。

Cursor: 在 Cursor 设置中，找到 "MCP" 或 "Model Context Protocol" 部分，并添加以下配置。推荐使用 SSE (Server-Sent Events) 协议以获得更好的实时性：

{
  "shadcn-svelte": {
    "type": "sse",
    "url": "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse"
  }
}

或者，您也可以选择使用 HTTP 端点：

{
  "shadcn-svelte": {
    "type": "http",
    "url": "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp"
  }
}

Visual Studio Code: 在您的工作区根目录下，创建一个名为 '.vscode/mcp.json' 的文件（如果不存在），然后添加以下服务器配置：

{
  "servers": {
    "shadcn-svelte": {
      "type": "sse",
      "url": "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse"
    }
  }
}

配置完成后，在 VS Code 设置中启用 "Chat > MCP" 功能。然后，切换到 Agent 模式，打开 'mcp.json' 文件并点击“start”按钮以激活服务器连接。

Zed: Zed 编辑器使用 'settings.json' 文件进行 MCP 服务器配置。通常位于 '~/.config/zed/settings.json'。在 'context_servers' 对象下添加以下配置：

{
  "context_servers": {
    "shadcn-svelte": {
      "source": "custom",
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse"
      ],
      "env": {}
    }
  }
}

完成配置后，保存文件并重启 Zed。您也可以通过 Zed 的 Agent/AI 设置界面，使用“Add server”表单直接粘贴 HTTP/SSE URL 进行配置，这通常比手动编辑文件更方便。

Claude Code CLI: 在终端中执行以下命令来添加 MCP 服务器：

claude mcp add shadcn-svelte --url https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse

OpenAI Codex CLI: 在终端中执行以下命令来注册 MCP 服务器：

codex mcp add shadcn-svelte --url https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse

注册后，可以运行 'codex mcp list' 命令确认服务器是否已启用。

基本使用方法 (在AI代码编辑器中)

成功安装并配置 MCP 服务器后，您可以在 AI 助手或聊天界面中直接与它交互，提问或请求其执行特定任务。例如：

“告诉我如何安装 shadcn-svelte 的 'Button' 组件。”
“列出所有可用的 shadcn-svelte 组件。”
“搜索 shadcn-svelte 中的日期选择器组件。”
“'Dialog' 组件有哪些属性？”
“我该如何定制 shadcn-svelte 的主题？”
“搜索 Lucide 图标中与‘用户资料’相关的图标。”
“帮助我从 shadcn-svelte v0.x 迁移到 v1.x。”

AI 助手将利用该 MCP 服务器提供的工具，获取并返回相关的文档、代码示例或实用信息。

关键词

项目简介

主要功能点

安装步骤 (本地运行，可选)

服务器配置 (客户端集成)

基本使用方法 (在AI代码编辑器中)

信息