🌼 daisyui mcp服务器
用于daisyUI React组件的MCP服务器——从任何AI编码助手中搜索文档、道具和代码示例
概述
┌─────────────────┐ ┌────────────┐ ┌─────────────────────┐ ┌────────────────┐
│ AI Assistant │────▶│ MCP Client │────▶│ daisyui-mcp-server │────▶│ Knowledge Base │
│ (Copilot/Claude) │◀────│ │◀────│ │◀────│ (56 components)│
└─────────────────┘ └────────────┘ └─────────────────────┘ └────────────────┘可用工具
| 工具 | 说明 | 参数 |
|---|---|---|
daisyui_search | 搜索组件文档 | query （必填）， category, limit |
daisyui_get_component | 获取包含道具和示例的完整组件文档 | name （必填） |
daisyui_get_examples | 获取组件的代码示例 | name （必填） |
daisyui_list_components | 列出所有组件，可选择按类别列出 | category |
daisyui_get_theme_info | 获取daisyUI主题配置指南 | -- |
分类
组件分为： actions, data-display, navigation, feedback, layout, data-input, mockup
快速开始
npx daisyui-mcp-server配置
VS代码（GitHub副本）
添加 .vscode/mcp.json:
{
"servers": {
"daisyui": {
"type": "stdio",
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}克劳德桌面版
添加 claude_desktop_config.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}光标
添加 .cursor/mcp.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}帆板运动
添加 ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}Amazon Q开发者命令行界面
添加 ~/.aws/amazonq/mcp.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}泽德
添加 settings.json:
{
"context_servers": {
"daisyui": {
"command": {
"path": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}
}JetBrains集成开发环境（IntelliJ、WebStorm等）
- 首选 设置→ 工具→ AI助手→ MCP服务器
- 点击 添加
- 将命令设置为
npx有争论["-y", "daisyui-mcp-server"]
克莱恩
添加 cline_mcp_settings.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}发展
先决条件
- Node.js>=18
- npm
设置
git clone https://github.com/matracey/daisyui-mcp-server.git
cd daisyui-mcp-server
npm install构建
npm run build测试
npm test # Run tests
npm run test:watch # Watch mode
npm run test:coverage # With coverage report在本地运行
npm run dev # Watch mode with tsx
npm start # Run built version重新生成知识库
知识库由以下内容生成 React daisyui 源代码和daisyUI文档：
npm run generate这克隆了react-daisyui仓库，解析组件源文件中的props和类型，抓取daisyui.com中的描述和示例，并将结果输出到 src/data/generated/.
添加新组件
- 将组件名称和类别添加到
CATEGORY_MAP在scripts/generate-knowledge-base.ts - 跑
npm run generate重建知识库 - 跑
npm test验证新组件是否有效
运作原理
建筑
服务器使用 MCP-SDK 通过stdio传输公开5个工具。当AI助手连接时，它可以调用这些工具来查询56个daisyUI React组件的预构建知识库。
知识库生成
这 scripts/generate-knowledge-base.ts 脚本：
- 克隆
react-daisyui仓库 - 解析每个组件的TypeScript源代码以提取props、类型和默认值
- 刮痕
daisyui.com/components//用于描述、CSS类和示例 - 输出结构化JSON文件(
src/data/generated/components.json)
搜索评分
搜索引擎使用基于令牌的评分系统：
| 比赛类型 | 得分 |
|---|---|
| 名称完全匹配 | +100 |
| 名称包含查询 | +50 |
| 名称包含令牌 | +30 |
| 描述包含标记 | +15 |
| 道具名称与令牌匹配 | +10 |
| CSS类匹配标记 | +10 |
| 示例匹配标记 | +5 |
结果按分数排序，并返回到指定的限制（默认值5，最大值10）。
贡献
欢迎投稿！请参阅 贡献.md 作为指导方针。
- 打开一个问题 对于bug或功能请求
- 提交带有更改的拉取请求
许可证
麻省理工学院——见 许可证 了解详情。