Daisyui MCP Server

🌼 daisyui mcp服务器

用于daisyUI React组件的MCP服务器——从任何AI编码助手中搜索文档、道具和代码示例

](https://www.npmjs.com/package/daisyui-mcp-server)   ](https://nodejs.org)

概述

┌─────────────────┐     ┌────────────┐     ┌─────────────────────┐     ┌────────────────┐
│  AI Assistant    │────▶│ MCP Client │────▶│ daisyui-mcp-server  │────▶│ Knowledge Base │
│ (Copilot/Claude) │◀────│            │◀────│                     │◀────│ (56 components)│
└─────────────────┘     └────────────┘     └─────────────────────┘     └────────────────┘

可用工具

分类

组件分为： 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等）

1. 首选 设置→ 工具→ AI助手→ MCP服务器
2. 点击 添加
3. 将命令设置为 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/.

添加新组件

1. 将组件名称和类别添加到 CATEGORY_MAP 在 scripts/generate-knowledge-base.ts
2. 跑 npm run generate 重建知识库
3. 跑 npm test 验证新组件是否有效

运作原理

建筑

服务器使用 MCP-SDK 通过stdio传输公开5个工具。当AI助手连接时，它可以调用这些工具来查询56个daisyUI React组件的预构建知识库。

知识库生成

这 scripts/generate-knowledge-base.ts 脚本：

1. 克隆 react-daisyui 仓库
2. 解析每个组件的TypeScript源代码以提取props、类型和默认值
3. 刮痕 daisyui.com/components// 用于描述、CSS类和示例
4. 输出结构化JSON文件(src/data/generated/components.json)

搜索评分

搜索引擎使用基于令牌的评分系统：

结果按分数排序，并返回到指定的限制（默认值5，最大值10）。

贡献

欢迎投稿！请参阅 贡献.md 作为指导方针。

• 打开一个问题 对于bug或功能请求
• 提交带有更改的拉取请求

许可证

麻省理工学院——见 许可证 了解详情。