AI导哈

React组件文档搜索服务

daisyui-mcp-server是一个为AI编程助手提供daisyUI React组件文档搜索、属性查询和代码示例检索的MCP服务器，可直接在编辑器中访问。

  • by matracey
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 matracey/daisyui-mcp-server

使用说明

🌼 daisyui mcp服务器

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

概述

daisyui mcp服务器 是一个 模型上下文协议（MCP） 为AI编码助手提供即时访问的服务器 黛西在 React组件文档。它使GitHub Copilot、Claude、Cursor等工具能够搜索组件、查找道具和检索代码示例，而无需离开编辑器。

黛西在 是Tailwind CSS最受欢迎的组件库，提供美观、可访问的UI组件。此MCP服务器围绕 React daisyui 绑定。

┌─────────────────┐     ┌────────────┐     ┌─────────────────────┐     ┌────────────────┐
│  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等）

  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/<name>/ 用于描述、CSS类和示例
  4. 输出结构化JSON文件(src/data/generated/components.json)

搜索评分

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

比赛类型 得分
名称完全匹配 +100
名称包含查询 +50
名称包含令牌 +30
描述包含标记 +15
道具名称与令牌匹配 +10
CSS类匹配标记 +10
示例匹配标记 +5

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

贡献

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

许可证

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

相关 MCP