Shadcn Svelte MCP

shadcn苗条mcp

 


Mastra MCP服务器和工具，使用网络抓取提供对shadcn-svelte组件文档和开发人员实用程序的实时访问。

生产部署

Mastra Cloud是主要的部署：零冷启动、快速工具发现，以及在两种传输方式上使用相同的工具集。

\[！注意\] 该项目遵循我们的 行为准则 欢迎捐款！查看我们的 贡献指南 了解详情。

此存储库包含一个基于Mastra的MCP服务器，该服务器使用网络抓取提供对shadcn-svelte组件文档的实时访问。在AI驱动的代码编辑器中使用它，可以直接从官方网站即时访问最新的shadcn svelte组件信息。

目录

• 生产部署

• 特性

• Bits UI集成

• 观察和次要用户体验建议

• 编辑器设置

• CLI和代理配置

• 技能s.sh技能

• 验证和快速测试

• 可用工具

• 示例用法

• 本地开发

• 开发人员脚本

• MCP架构

• 项目架构

• 贡献

• 许可证

• 联系

🎉 特性

• ✅ Mastra Cloud上的生产部署
• ✅ 五种主要的MCP工具 有关全面的shadcn-svelte生态系统支持（请参阅“可用工具”）
• ✅ Bits UI API文档 -直接访问具有AI优化内容的底层组件库API文档
• ✅ 具有拼写容差和智能建议的高级模糊搜索
• ✅ Lucide Svelte图标搜索 -使用智能过滤浏览和搜索~1600个图标（动态）
• ✅ 支持所有主要的AI代码编辑器（Cursor、Windsurf、VS code、Zed、Claude code、Codex）
• ✅ HTTP和SSE传输协议
• ✅ 从shadcn-svelte.com和bits-ui.com实时抓取网页

Bits UI集成

shadcn瘦组件构建在 Bits用户界面，提供核心功能的底层组件库。此MCP服务器通过AI优化的内容端点提供对Bits UI的全面API文档的直接访问。

AI优化内容

这 bits-ui-get 该工具从Bits UI的专用界面获取内容 /llms.txt 端点，提供：

• 结构化API参考表 带有属性/类型/描述/详细信息列
• 清除标记格式 针对AI消费进行了优化
• 实现细节 和使用示例
• 数据属性和事件处理程序 文档
• 导航链接 相关组件

这确保了AI助手收到最相关和结构良好的信息，以便正确实现shadcn瘦组件。

🔧 用户体验观察和建议

• 这 shadcn-svelte-icons 该工具之前在显式显示时显示了一条尴尬的消息“找不到与“undefined”匹配的图标” names 已被请求，但未找到任何内容——此问题已得到修复，因此现在显示响应 No icons found for names: ... 相反。 ✅
• 进口 icons 工具被有意限制在响应中的前10个名称，以保持使用片段的整洁；增加 limit 如果你需要返回更多图标（代码段仍然只导入前10个）。 💡
• 图标工具现在支持 importLimit （默认值10）和 limit （默认值为100），用于控制返回的图标数量以及包含的图标数量 import 声明。
• 这 shadcn-svelte-get 该工具现在尊重一个可选 packageManager 参数，并相应地调整安装代码段(pnpm dlx, yarn dlx, npx, bunx). ✅
• 如果您发现任何剩余的奇怪消息或安装命令不一致，请提交一个问题——我们保持MCP服务器行为稳定，但很乐意在以下拉取请求中改进用户体验。

编辑器设置

Mastra Cloud是所有编辑器的推荐部署。使用SSE进行持久编辑器连接，使用HTTP进行一次性请求或脚本。VS Code用户可以打开命令面板(Cmd/Ctrl+Shift+P)然后跑 MCP: Add server 粘贴任一URL。

Cursor

1. 打开光标设置(Cmd/Ctrl + ,).
2. 导航到“MCP”/“模型上下文协议”并添加新的服务器配置。
3. 添加如下所示的SSE或HTTP端点。

Mastra Cloud——苏格兰和南方能源公司示例：

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

Mastra Cloud——HTTP示例：

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

Windsurf

1. 编辑 ~/.codeium/windsurf/mcp_config.json.
2. 添加SSE传输，如图所示：

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

1. 保存，重新启动Windsurf，然后打开 mcp.json 在代理模式下，单击“开始”。

如果需要，请使用HTTP变体：

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

Zed

1. 打开Zed设置(Cmd/Ctrl + ,).
2. 编辑 ~/.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": {}
    }
  }
}

1. 保存，重新启动Zed，并确认服务器在Agent面板中显示绿色指示灯。Zed还通过设置提供UI流→ 代理粘贴任一端点而不编辑JSON。

VS Code

两种支持的工作流（均适用于用户/全局设置或工作区/项目设置）：

• 选项A——命令选项板（快速）： 跑 MCP: Add Server （Ctrl/Cmd+Shift+P）并粘贴SSE或HTTP URL。这是最简单的交互流，可以从全局（用户）或工作区上下文中使用。

粘贴示例：

- 上海证券交易所 https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse - HTTP： https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp

• 选项B--mcp远程JSON（可脚本化）： 创建或更新 .vscode/mcp.json （或您的用户级MCP配置）使用 mcp-remote 帮手。这与工作区或全局配置同样有效，对于可重复的设置非常方便。

示例 .vscode/mcp.json 使用 mcp-remote 上海证券交易所

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

对于HTTP传输，将URL替换为 /mcp 端点：

  {
    "mcpServers": {
      "shadcn-svelte": {
        "command": "npx",
        "args": [
          "-y",
          "mcp-remote",
          "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp"
        ]
      }
    }
  }

验证

• 使用命令面板并运行 MCP: List Servers 查看已配置的服务器。
• 使用 MCP: List Servers > Configure Model Access 管理哪些模型可以使用MCP服务器。

CLI和代理配置

相同的基本URL在CLIs之间工作。 Mastra Cloud是推荐的主要部署 以实现零冷启动的最快响应。

Claude Code CLI (Anthropic)

• 全局设置 (~/.claude/settings.json):

  {
    "mcpServers": {
      "shadcn-svelte": {
        "command": "npx",
        "args": [
          "-y",
          "mcp-remote",
          "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp"
        ]
      }
    }
  }

• 项目范围覆盖 (.mcp.json):

  {
    "mcpServers": {
      "shadcn-svelte": {
        "command": "npx",
        "args": [
          "-y",
          "mcp-remote",
          "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp"
        ]
      }
    }
  }

通过以下方式启用项目服务器：

  {
    "enableAllProjectMcpServers": true
  }

• 命令选项板替代方案：

  claude mcp add --transport http shadcn-svelte https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp

• 使用 /permissions 在Claude Code中，如果提示，则授予工具访问权限。

OpenAI Codex CLI

为codex注册Mastra Cloud端点或使用您自己的私有托管MCP端点。

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

Gemini CLI (Google)

1. 创建或编辑 ~/.gemini/settings.json:

   mkdir -p ~/.gemini
   nano ~/.gemini/settings.json

1. 添加配置。Mastra Cloud示例：

   {
     "mcpServers": {
       "shadcn-svelte": {
         "httpUrl": "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp"
       }
     }
   }

1. 更喜欢 npx mcp-remote 命令变体（如果您的CLI版本需要命令）：

   {
     "mcpServers": {
       "shadcn-svelte": {
         "command": "npx",
         "args": [
           "mcp-remote",
           "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp"
         ]
       }
     }
   }

1. 重新启动CLI以应用更改。

技能s.sh技能

此存储库包括可发布的代理技能 skills/shadcn-sveltekit-design/SKILL.md 用于使用shadcn-svelte设计和实现抛光的SvelteKit页面和可重用组件，同时将组件选择接地到本MCP中。

从GitHub安装

npx skills add Michael-Obele/shadcn-svelte-mcp --skill shadcn-sveltekit-design

对于GitHub Copilot来说：

npx skills add Michael-Obele/shadcn-svelte-mcp --skill shadcn-sveltekit-design --agent github-copilot -g -y

本地验证

npx skills add . --list

预期技能.sh页

一旦此存储库更改被推送到公共GitHub存储库并由 skills 生态系统，技能应该解决：

https://skills.sh/Michael-Obele/shadcn-svelte-mcp/shadcn-sveltekit-design

该技能假定 shadcn-svelte MCP服务器已在代理环境中配置。

验证和快速测试

配置后使用这些检查。编辑器连接首选SSE，CLI探测首选HTTP。

• claude mcp list
• codex mcp list
• npx mcp-remote https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp
• curl -I https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/mcp
• curl -N https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse

Claude Code可能会提示输入工具权限。使用 /permissions 或设置 allowedTools 在 ~/.claude.json 如果需要的话。

可用工具

这些是MCP服务器公开的工具ID：

使用 shadcn-svelte-get 首先，对于已知的组件或文档， shadcn-svelte-search 当确切名称未知时，以及 bits-ui-get 只有当你需要较低级别的原始细节时。

示例用法

在编辑器中安装MCP服务器后，您可以询问您的AI助手：

• “演示如何安装shadcn瘦按钮组件”
• “列出所有可用的shadcn瘦组件”
• “查找类似于日期选择器的组件，并告诉我哪些组件实际存在”
• “列出可用的图表组件”
• “如何在shadcn svelte中自定义主题？”
• “查找用户配置文件和设置的Lucide图标”
• “显示对话框的Bits UI API详细信息”
• “给我使用纱线安装仪表板-01的步骤”

本地开发

想在本地运行MCP服务器或为项目做出贡献吗？

目录

• src/ -Mastra引导程序、MCP服务器、工具和代理
• src/services/ -用于实时文档获取的Web抓取服务
• src/mastra/tools/ -公开组件发现、获取和实用程序的工具
• src/mastra/agents/ -专门的人工智能代理为shadcn提供帮助
• scripts/ -版本管理和自动化脚本

快速启动（开发烟雾测试）

1. 安装依赖项（使用您首选的包管理器）。

# npm
npm install

# or bun
bun install

# or pnpm
pnpm install

1. 运行开发烟雾测试（推荐）：

# Starts Mastra in dev mode; this repo's smoke-test expects a short run to detect runtime errors
npm run dev

开发人员脚本

• npm run dev -在开发模式下启动Mastra（推荐烟雾测试）。
• npm run build -建造Mastra项目进行生产。
• npm run start -启动已构建的Mastra服务器。
• npm run check-versions -检查package.json和mcp-server.ts版本是否匹配（如果不匹配，则失败）。
• npm run sync-versions-auto -检查版本，如果不匹配则自动同步（package.json是事实来源）。
• npm run sync-versions -将最新git标签的版本同步到两个文件。

项目架构

核心组件

• Mastra框架：协调代理、工作流和MCP服务器
• MCP服务器：通过HTTP/SSE协议向AI代码编辑器公开工具
• Web剪贴服务：获取文件的多策略方法：

- 直接的 .md shadcn瘦组件的端点获取 - AI优化 /llms.txt Bits UI API文档的端点获取 - Crawlee（剧作家）用于JavaScript繁重的页面（图表、主题、块） - Cheerio+简单HTML页面的调低

• 智能高速缓存：带内存和磁盘存储的3天TTL缓存
• 组件发现：从shadcn-svelte.com动态抓取组件注册表
• 高级搜索：Fuse.js支持的模糊搜索，具有拼写容差

主要特点

该项目结合了实时文档获取、BitsUIneneneba API访问、多级抓取、智能缓存、Lucide图标搜索、语义版本同步和Mastra Cloud上的生产部署。

惯例与注意事项

• 工具在下实施 src/mastra/tools 并且应该使用 zod 用于输入验证
• Web抓取服务是在 src/services/ 并使用Crawlee（与Playwright一起）从JavaScript繁重的页面中实时获取文档
• 智能缓存用于提高性能和减少API调用
• 工具遵循Mastra模式，使用 createTool 具有适当的输入/输出模式

开发技巧

• 建议节点>=20.9.0（参见 package.json 发动机）
• 添加工具时，请遵循中的模式 src/mastra/tools/shadcn-svelte-get.ts 和 shadcn-svelte-list.ts
• 更改后，通过以下方式运行10-15s烟雾测试 npm run dev 尽早发现运行时集成问题
• 为web抓取功能设置正确的Firecrawl API凭据
• 该系统使用智能缓存-如果您在开发过程中需要新数据，请清除缓存

许可证

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

贡献

我们欢迎捐款！请阅读我们的 贡献指南 和 行为准则 在开始之前。

联系

• 问题与支持: support@svelte-apps.me
• 贡献: contrib@svelte-apps.me
• 维护者：迈克尔·奥贝尔(michael@svelte-apps.me)