🌼 daisyui-mcp-server

MCP server for daisyUI React components — search docs, props, and code examples from any AI coding assistant

Overview

daisyui-mcp-server is a Model Context Protocol (MCP) server that gives AI coding assistants instant access to daisyUI React component documentation. It enables tools like GitHub Copilot, Claude, Cursor, and others to search components, look up props, and retrieve code examples — all without leaving your editor.

daisyUI is the most popular component library for Tailwind CSS, providing beautiful, accessible UI components. This MCP server is built around the react-daisyui bindings.

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

Available Tools

| Tool | Description | Parameters | | ------------------------- | --------------------------------------------- | --------------------------------------- | | daisyui_search | Search component documentation | query (required), category, limit | | daisyui_get_component | Get full component docs with props & examples | name (required) | | daisyui_get_examples | Get code examples for a component | name (required) | | daisyui_list_components | List all components, optionally by category | category | | daisyui_get_theme_info | Get daisyUI theme configuration guide | — |

Categories

Components are organized into: actions, data-display, navigation, feedback, layout, data-input, mockup

Quick Start

npx daisyui-mcp-server

Configuration

VS Code (GitHub Copilot)

Add to .vscode/mcp.json:

{
  "servers": {
    "daisyui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "daisyui-mcp-server"]
    }
  }
}

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "daisyui": {
      "command": "npx",
      "args": ["-y", "daisyui-mcp-server"]
    }
  }
}

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "daisyui": {
      "command": "npx",
      "args": ["-y", "daisyui-mcp-server"]
    }
  }
}

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "daisyui": {
      "command": "npx",
      "args": ["-y", "daisyui-mcp-server"]
    }
  }
}

Amazon Q Developer CLI

Add to ~/.aws/amazonq/mcp.json:

{
  "mcpServers": {
    "daisyui": {
      "command": "npx",
      "args": ["-y", "daisyui-mcp-server"]
    }
  }
}

Zed

Add to settings.json:

{
  "context_servers": {
    "daisyui": {
      "command": {
        "path": "npx",
        "args": ["-y", "daisyui-mcp-server"]
      }
    }
  }
}

JetBrains IDEs (IntelliJ, WebStorm, etc.)

1. Go to Settings → Tools → AI Assistant → MCP Servers
2. Click Add
3. Set command to npx with arguments ["-y", "daisyui-mcp-server"]

Cline

Add to cline_mcp_settings.json:

{
  "mcpServers": {
    "daisyui": {
      "command": "npx",
      "args": ["-y", "daisyui-mcp-server"]
    }
  }
}

Development

Prerequisites

• Node.js >= 18
• npm

Setup

git clone https://github.com/matracey/daisyui-mcp-server.git
cd daisyui-mcp-server
npm install

Build

npm run build

Test

npm test                # Run tests
npm run test:watch      # Watch mode
npm run test:coverage   # With coverage report

Run Locally

npm run dev    # Watch mode with tsx
npm start      # Run built version

Regenerate Knowledge Base

The knowledge base is generated from the react-daisyui source code and daisyUI documentation:

npm run generate

This clones the react-daisyui repo, parses component source files for props and types, scrapes daisyui.com for descriptions and examples, and outputs the result to src/data/generated/.

Adding New Components

1. Add the component name and category to the CATEGORY_MAP in scripts/generate-knowledge-base.ts
2. Run npm run generate to regenerate the knowledge base
3. Run npm test to verify the new component is valid

How It Works

Architecture

The server uses the MCP SDK to expose 5 tools over stdio transport. When an AI assistant connects, it can call these tools to query a pre-built knowledge base of 56 daisyUI React components.

Knowledge Base Generation

The scripts/generate-knowledge-base.ts script:

1. Clones the react-daisyui repository
2. Parses each component's TypeScript source to extract props, types, and defaults
3. Scrapes daisyui.com/components/<name>/ for descriptions, CSS classes, and examples
4. Outputs a structured JSON file (src/data/generated/components.json)

Search Scoring

The search engine uses a token-based scoring system:

| Match Type | Score | | -------------------------- | ----- | | Exact name match | +100 | | Name contains query | +50 | | Name contains token | +30 | | Description contains token | +15 | | Prop name matches token | +10 | | CSS class matches token | +10 | | Example matches token | +5 |

Results are sorted by score and returned up to the specified limit (default 5, max 10).

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

• Open an issue for bugs or feature requests
• Submit a pull request with your changes

License

MIT — see LICENSE for details.