Setup Windsurf to correctly generate daisyUI code based on your prompt.
MCP is an API to communicate with AI models. You can add MCP servers and Windsurf will communicate with them to get more accurate results.
There are 3 options:
1. [Blueprint](/blueprint/): The Official MCP server from daisyUI (Recommended for best results)
2. [Context7](https://context7.com/): Free 3rd party MCP server
3. [daisyUI GitMCP](https://gitmcp.io/saadeghi/daisyui): Free 3rd party MCP server
#### daisyUI Blueprint
Blueprint is the official MCP server for daisyUI. [Read more about Blueprint](/blueprint/).
1. Get a [Blueprint License](/blueprint/checkout/)
2. In VS Code press ⌘ CMD + ⇧ Shift + P ( Or Ctrl + Shift + P )
3. Search for `Windsurf: MCP Configuration Panel`
4. Click `Add custom server +`
5. Add this and set your `license key` + `email address` in it
```diff:~/.codeium/windsurf/mcp_config.json
{
"mcpServers": {
+ "daisyui-blueprint": {
+ "type": "stdio",
+ "command": "npx",
+ "args": ["-y", "daisyui-blueprint@latest"],
+ "env": {
+ "LICENSE": "YOUR BLUEPRINT LICENSE KEY",
+ "EMAIL": "YOUR EMAIL ADDRESS",
+ "FIGMA": "YOUR FIGMA API KEY (optional)"
+ }
+ }
}
}
```
#### Usage
Now you can ask AI anything about daisyUI, and write `use Blueprint MCP` at the end of your prompt.
For example:
```md:prompt
give me a light daisyUI 5 theme with tropical color palette. use Blueprint MCP
```
#### Setup Context7 MCP server
1. Press ⌘ CMD + ⇧ Shift + P (or ⌃ Ctrl + ⇧ Shift + P on Windows)
2. Type `Windsurf: MCP Configuration Panel`
3. Click `Add custom server +`
4. Add this:
```diff:~/.codeium/windsurf/mcp_config.json
{
"mcpServers": {
+ "context7": {
+ "command": "npx",
+ "args": ["-y", "@upstash/context7-mcp@latest"]
+ }
}
}
```
#### Usage
Now you can ask AI anything about daisyUI, and write `use context7` at the end of your prompt.
For example:
```md:prompt
give me a light daisyUI 5 theme with tropical color palette. use context7
```
#### Setup daisyUI GitMCP server
1. Press ⌘ CMD + ⇧ Shift + P (or ⌃ Ctrl + ⇧ Shift + P on Windows)
2. Type `Windsurf: MCP Configuration Panel`
3. Click `Add custom server +`
4. Add this:
```diff:~/.codeium/windsurf/mcp_config.json
{
"mcpServers": {
+ "daisyui-github": {
+ "serverUrl": "https://gitmcp.io/saadeghi/daisyui"
+ }
}
}
```
#### Usage
Now you can ask AI anything about daisyUI.
```md:prompt
give me a light daisyUI 5 theme with tropical color palette
```
daisyUI MCP server for Windsurf