使用 shadcn-svelte-mcp 为您的 Svelte 开发加速
Source: Dev.to
介绍
如果你正在使用 Svelte 构建现代 Web 应用，可能已经遇到过 shadcn-svelte，它是流行的 shadcn/ui 库的出色移植版。它帮助开发者轻松创建可访问且可定制的组件。
如果你能在代码编辑器中拥有一位 shadcn‑svelte 专家——随时回答问题、搭建组件并指导配置，该多好？这正是 shadcn-svelte-mcp 的用武之地。
什么是 shadcn-svelte-mcp?
shadcn-svelte-mcp 是一个专为 shadcn‑svelte 文档和开发者工具构建的 Mastra MCP 服务器。它在你的 AI 助手（例如 Claude、Cursor、Windsurf）与官方 shadcn‑svelte 资源之间架起桥梁，确保助手按需获取正确的、以 Svelte 为首的资讯。
为什么重要
- 准确、最新的文档 – 助手直接从源头检索最新的组件文档，减少幻觉和过时的建议。
- 以 Svelte 为首的输出 – 避免出现基于原始
shadcn/ui文档训练的 AI 可能产生的 React‑导向模式（例如asChild）。 - 上下文感知的建议 – 提供针对你项目配置和风格的最佳实践指导。
关键特性
| 功能 | 好处 |
|---|---|
| 搜索并检索文档 | 即时获取任何组件的最新文档。 |
| 了解最佳实践 | 获取基于上下文的正确实现模式建议。 |
| 生成代码框架 | 生成符合项目 Tailwind 配置、适配器等的组件代码。 |
| 无缝集成 | 开箱即用，兼容任何符合 MCP 标准的客户端。 |
| 高效 | 无需在编辑器和浏览器之间切换；向 AI 提问即可直接从源头获取答案。 |
常见使用场景
- 组件发现 – “组件接受哪些 props？”
- 组合指导 – “推荐的组合模式是什么？”
- 设置提醒 – “我忘记了哪个安装步骤（Tailwind 配置、适配器等）？”
这些查询在你实现过程中尤为有价值，因为它们能提供快速、准确的答案。
Example Prompts
“在 SvelteKit 中使用 shadcn‑svelte 构建管理员仪表盘页面：侧边栏 + 顶部导航 + 卡片 + 表格 + 分页 + 加载状态”
“创建用户管理界面：DataTable + 搜索输入框 + 过滤器 + ‘创建用户’ 对话框 + 表单验证 + 成功时的 toast”
“生成设置页面：选项卡（个人资料/账单/安全），每个选项卡内都有表单，并为破坏性操作提供确认对话框”
“脚手架一个可复用的
UserInviteDialog组件，使用 Dialog、Input、Select 和 Button —— 并提供简洁的打开/关闭 API”
“我需要一个响应式布局：移动端使用 Sheet，桌面端使用 Sidebar，并带有面包屑标题 —— 仅使用 shadcn‑svelte 组件”
提示: 如果你的助手建议仅使用 React‑only props，请明确添加：“Svelte 5 + shadcn‑svelte only (no React patterns)”。
安装
将服务器添加到您的 MCP 配置中：
{
"mcpServers": {
"shadcn-svelte": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse"
]
}
}
}这将连接到托管的 Mastra MCP 服务器（用于 shadcn‑svelte），提供对组件文档和实用工具的实时访问。仓库的 README 包含备用端点引用、HTTP 传输选项和备份主机详情。
工作流模式
在构建 UI 时，尝试两步法：
- 展示 X 的权威文档示例
- 现在将该示例适配到我的具体约束（例如 SvelteKit 路由、表单库、Tailwind 配置）
这样既能让实现保持在实际基础上，又让助手处理“粘合”工作。
入门
该项目在 GitHub 上开源：
Michael-Obele/shadcn-svelte-mcp
如果你觉得它有用，请考虑给仓库加星。