Allows GitHub Copilot to search daisyUI component documentation, retrieve component props and examples, and list components by category.
Allows JetBrains IDEs to search daisyUI component documentation, retrieve component props and examples, and list components by category.
Allows WebStorm to search daisyUI component documentation, retrieve component props and examples, and list components by category.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@daisyui-mcp-server Get the Accordion component code example"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP server for daisyUI React components — search docs, props, and code examples from any AI coding assistant
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)│
└─────────────────┘ └────────────┘ └─────────────────────┘ └────────────────┘Related MCP server: aceternityui-mcp
Tool | Description | Parameters |
| Search component documentation |
|
| Get full component docs with props & examples |
|
| Get code examples for a component |
|
| List all components, optionally by category |
|
| Get daisyUI theme configuration guide | — |
Components are organized into: actions, data-display, navigation, feedback, layout, data-input, mockup
npx daisyui-mcp-serverAdd to .vscode/mcp.json:
{
"servers": {
"daisyui": {
"type": "stdio",
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}Add to claude_desktop_config.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}Add to .cursor/mcp.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}Add to ~/.aws/amazonq/mcp.json:
{
"mcpServers": {
"daisyui": {
"command": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}Add to settings.json:
{
"context_servers": {
"daisyui": {
"command": {
"path": "npx",
"args": ["-y", "daisyui-mcp-server"]
}
}
}
}Go to Settings → Tools → AI Assistant → MCP Servers
Click Add
Set command to npx with arguments ["-y", "daisyui-mcp-server"]
Add to 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 installnpm run buildnpm test # Run tests
npm run test:watch # Watch mode
npm run test:coverage # With coverage reportnpm run dev # Watch mode with tsx
npm start # Run built versionThe knowledge base is generated from the react-daisyui source code and daisyUI documentation:
npm run generateThis 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/.
Add the component name and category to the CATEGORY_MAP in scripts/generate-knowledge-base.ts
Run npm run generate to regenerate the knowledge base
Run npm test to verify the new component is valid
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.
The scripts/generate-knowledge-base.ts script:
Clones the react-daisyui repository
Parses each component's TypeScript source to extract props, types, and defaults
Scrapes daisyui.com/components/<name>/ for descriptions, CSS classes, and examples
Outputs a structured JSON file (src/data/generated/components.json)
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).
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
Open an issue for bugs or feature requests
Submit a pull request with your changes
MIT — see LICENSE for details.
Get full documentation for a specific daisyUI React component including all props, types, defaults, and usage examples.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name (e.g. "Button", "Modal") |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided. The description implies a read-only operation (fetching documentation) without side effects. Could explicitly state it's non-destructive, but the intent is clear.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that efficiently conveys the purpose and scope, with no redundant information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one parameter and no output schema, the description adequately explains what the tool returns. Could mention that it returns exhaustive documentation, but overall sufficient.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with a single parameter 'name' described. The description adds value by providing examples ('e.g. "Button", "Modal"'), which clarifies expected input beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb 'Get full documentation' and the resource 'daisyUI React component', specifying what is included (props, types, defaults, usage examples). It differentiates from sibling tools that handle examples, themes, listing, or searching.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage when full documentation of a component is needed, but does not explicitly state when to use or not use this tool over siblings or provide alternative guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get code examples for a specific daisyUI React component. Returns TSX/JSX snippets showing common usage patterns.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description must disclose behavioral traits. It states it 'Returns TSX/JSX snippets', which is a read operation. However, it doesn't mention error behavior (e.g., if component not found) or any side effects. Adequate but minimal.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single sentence that conveys purpose and return type without redundancy. Every word is meaningful; no extraneous details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple getter tool with one parameter and no output schema, the description adequately states what it returns (TSX/JSX snippets). It is complete enough for an agent to understand the tool's purpose, though missing details on edge cases or availability of examples.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% for the single parameter 'name' (described as 'Component name'). The tool description adds that the component is a 'daisyUI React component' but doesn't clarify expected format or provide examples beyond the schema. Baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the tool retrieves code examples for a specific daisyUI React component, returning TSX/JSX snippets. This distinguishes it from siblings like daisyui_get_component (likely getting component info) and daisyui_search.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage when wanting code snippets for a specific component, but lacks explicit guidance on when to prefer this tool over siblings like daisyui_search or daisyui_list_components. No when-not-to-use or alternative mentions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get information about daisyUI themes, including available theme names and how to configure them in React.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Without annotations, the description implies read-only behavior but does not disclose any side effects, auth requirements, or rate limits. It is not misleading, but incomplete.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence, front-loaded with purpose, no unnecessary words. Ideal conciseness for a simple tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter info tool, the description covers what it does and what it returns. Could be more specific about output format or scope, but adequate given simplicity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema is empty (100% coverage implied), but the description adds meaning by specifying that the tool returns theme names and configuration info, going beyond the schema's silence.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it retrieves theme information, specifically available names and configuration in React, distinguishing it from component, examples, listing, and search tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus siblings, nor any prerequisites or exclusions provided. The description implicitly suggests it for theme inquiries, but lacks explicit usage context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List all available daisyUI React components, optionally filtered by category.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Filter by component category |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, and the description lacks any behavioral details such as pagination, rate limits, or data format. It only describes the basic action without transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, clear sentence with no unnecessary words. It is front-loaded with the main action.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple listing tool with one optional parameter, the description is minimally adequate but lacks details about returned data format or any additional context, which would be beneficial given no output schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so baseline is 3. The description does not add extra meaning beyond what the schema already provides for the category parameter.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool lists all daisyUI React components with optional category filtering. It is distinct from sibling tools like daisyui_get_component (for details) and daisyui_search.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for listing components and allows optional filtering, but does not explicitly guide when to use this tool versus alternatives like daisyui_get_component or daisyui_search.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Search daisyUI React component documentation. Returns matching components with descriptions, props, and documentation links.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | Maximum number of results (1-10, default 5) | |
| query | Yes | Search query | |
| category | No | Filter by component category |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It describes the search result content but lacks details on behavior such as pagination, error handling, or what happens with no results. The description is too terse for full transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that conveys the purpose and result concisely. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema, the description should elaborate more on the return format. It mentions result content but not structure or examples. For a search tool with 3 parameters, it is somewhat complete but could be improved.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage for all parameters. The description adds no extra meaning beyond the schema, so baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it searches daisyUI React component documentation and returns components with descriptions, props, and links. It distinguishes from siblings like daisyui_list_components (listing) and daisyui_get_component (single component) by focusing on search functionality.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use for searching but provides no explicit guidance on when to use this tool versus siblings or when not to use it. No alternatives or exclusions are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v5.5.20daisyui_get_componentdaisyui_get_examplesdaisyui_get_theme_infodaisyui_list_componentsdaisyui_searchScored across 5 tools
Each tool has a clearly distinct purpose: getting component details, examples, theme info, listing all components, and searching. No overlap.
All tools follow a consistent 'daisyui_verb_noun' snake_case pattern, e.g., daisyui_list_components, daisyui_get_component.
5 tools is well-scoped for a UI component library's documentation server, covering essential operations without being too many or too few.
Covers listing, details, examples, theme info, and search. Minor gap: no tool for getting all theme properties, but the core needs are met.
Driflyte MCP server which lets AI assistants query topic-specific knowledge from web and GitHub.
An MCP server that gives your AI access to the source code and docs of all public github repos
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
MCP server that lets AI assistants use all OneSchema features exposed via the public API.
