TailGrids MCP服务器
A. 模型上下文协议（MCP）服务器 对于TailGrids，为Claude等AI助手提供对TailGrids全面UI组件库和文档的访问。
🎯 这是什么？
此MCP服务器使AI助手能够帮助您查找、理解和实现TailGrids组件。它提供以下访问权限：
- 6个类别的600+TailGrids UI组件
- 组件使用说明和功能
- 安装和实施指南
- 文档搜索功能
🚀 特性
- TailGrids集成 -直接访问TailGrids组件库
- 分类组件 -6大类：核心、应用UI、营销UI、电子商务、仪表板、人工智能组件
- 文档访问 -搜索和检索TailGrids文档
- 多格式支持 -HTML、React、Vue和Figma格式
- TypeScript支持 -具有Zod验证的全类型安全
- 开发工具 -热装和MCP检验员进行测试
📋 先决条件
- Node.js 18或更高版本
- pnpm（推荐）或npm
- Claude Code CLI（便于集成）
🚀 与克劳德快速开始
将此MCP服务器添加到项目中的最简单方法是使用Claude代码：
# Add the TailGrids MCP server to your project
claude mcp add tailgrids-server node /path/to/tailgrids-mcp-server/dist/server.js
# Or add it locally to your user configuration
claude mcp add --scope user tailgrids-server node /path/to/tailgrids-mcp-server/dist/server.js备注：确保先构建项目(pnpm run build)在将其添加到克劳德之前。
🤝 用例
非常适合与以下人员合作的开发人员：
- TailGrids组件 -立即访问组件文档
- 顺风CSS项目 -根据您的需求找到合适的TailGrids组件
- Web应用程序 -发现仪表板、营销网站、电子商务的组件
- 人工智能辅助开发 -让Claude帮助您实现TailGrids组件
🛠️ 手动安装
如果您更喜欢手动设置：
- 克隆此存储库：
git clone https://github.com/alkevintan/tailgrids-mcp-server.git
cd tailgrids-mcp-server- 安装依赖项：
pnpm install- 构建项目：
pnpm run build- 通过编辑MCP配置手动添加到Claude：
{
"mcpServers": {
"tailgrids-server": {
"command": "node",
"args": ["/absolute/path/to/tailgrids-mcp-server/dist/server.js"]
}
}
}⚙️ 配置
此MCP服务器已针对TailGrids进行了预配置，可以开箱即用。配置包括：
- TailGrids URL：指向
https://tailgrids.com/docs和https://tailgrids.com/components - 组件类别：预先定义了TailGrids的6个主要类别
- 服务器元数据：配置为
tailgrids-mcp-server
包含的组件类别
- 核心组件：按钮、复选框、手风琴、警报、徽章等。
- 应用程序UI：博客、卡片、联系人、页脚、页眉、模态等。
- 营销UI：英雄部分、功能、定价表、推荐信等。
- 电子商务：产品网格、结账单、购物车等。
- 仪表盘：图表、日历、个人资料、统计卡等。
- AIComponents：ai头文件、ai导航栏、聊天界面等。
🏃♂️ 发展
启动开发服务器
pnpm run dev为生产而建
pnpm run build检查MCP服务器
pnpm run inspect这将打开MCP检查器，以交互方式测试您的TailGrids MCP服务器工具。您可以测试 getTailGridsComponents、特定类别的工具和文档搜索功能。
📚 可用工具
MCP服务器为AI助手提供以下工具：
主要工具
getTailGridsComponents-返回按类别组织的所有TailGrids组件getTailGridsDocs-获取TailGrids文档内容getTailGridsCategories-列出所有带有描述的组件类别searchTailGridsDocs-搜索特定主题的文档
特定类别的工具
每个TailGrids类别的动态工具：
getCoreComponents-基本UI元素（按钮、表单、警报等）getApplicationUI-应用程序组件（导航栏、卡片、表格等）getMarketingUI-营销部分（英雄、定价、推荐等）getECommerce-电子商务组件（产品网格、结账等）getDashboard-仪表板元素（图表、分析、配置文件等）getAIComponents-以人工智能为重点的组件（聊天界面、生成器等）
每个工具都提供：
- 组件说明和使用说明
- 可用格式（HTML、React、Vue、Figma）
- TailGrids网站实施链接
- 安装指南
🏗️ 项目结构
tailgrids-mcp-server/
├── src/
│ ├── server.ts # Main MCP server implementation
│ ├── lib/
│ │ ├── config.ts # TailGrids configuration
│ │ └── categories.ts # TailGrids component categories
│ └── utils/
│ ├── api.ts # TailGrids API utilities
│ ├── formatters.ts # Data formatting helpers
│ ├── schemas.ts # Zod validation schemas
│ └── index.ts # Utility exports
├── dist/ # Built files
├── package.json
└── README.md🔧 定制
添加新的TailGrids组件
要将新组件添加到现有类别中，请编辑 src/lib/categories.ts:
export const componentCategories = {
CoreComponents: [
"buttons",
"checkboxes",
"your-new-component", // Add here
// ... existing components
],
// ... other categories
};为什么是这些类别？
这6个类别基于TailGrids的官方组织：
- 核心组件 -基本UI构建块
- 应用程序UI -web应用程序的组件
- 营销UI -登录页面和营销组件
- 电子商务 -网上商店和购物组件
- 仪表盘 -管理和分析界面组件
- AIComponents -以人工智能和机器学习为重点的组件
这种结构：
- 使AI助手更容易找到相关组件
- 防止同时用太多的工具压倒人工智能
- 反映TailGrids自己的组织结构
- 允许在特定组件类型内进行集中搜索
🌐 原理
由于TailGrids不提供传统的API，因此此MCP服务器：
- 组织组件 -将TailGrids的组件结构映射到类别中
- 提供指导 -提供使用说明和实施提示
- 来源链接 -指向TailGrids网站以获取实际组件代码
- 搜索文档 -启用文档搜索和检索
- 格式信息 -结构化数据，便于人工智能消费
🚀 部署
使用克劳德代码（推荐）
# Build first
pnpm run build
# Add to Claude
claude mcp add tailgrids-server node /absolute/path/to/tailgrids-mcp-server/dist/server.js
# Or add to user configuration
claude mcp add --scope user tailgrids-server node /absolute/path/to/tailgrids-mcp-server/dist/server.js手动配置
- 构建项目：
pnpm run build- 添加到MCP客户端配置中：
{
"mcpServers": {
"tailgrids-server": {
"command": "node",
"args": ["/absolute/path/to/tailgrids-mcp-server/dist/server.js"]
}
}
}🤝 贡献
欢迎投稿！请随时提交问题或拉取请求。
📄 许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
🙏 致谢
- 内置于 模型上下文协议SDK
- 受原始MCP服务器启动器模板的启发
- TailGrids提供了一个优秀的组件库
- 感谢MCP社区的贡献