ContextQMD
Back to Daisyui

+Page

packages/docs/src/routes/(routes)/docs/mcp/zed/+page.md

5.6.163.8 KB
Original Source
<script> import SEO from "$components/SEO.svelte" import Translate from "$components/Translate.svelte" </script>

<SEO title="daisyUI MCP server for Zed" desc="Setup Zed to correctly generate daisyUI code based on your prompt." />

<div class="breadcrumbs text-sm not-prose opacity-40"> <ul> <li><a href="/docs/mcp/">MCP setup guides</a></li> <li>Zed</li> </ul> </div> <h1>daisyUI MCP server for Zed</h1> <p>Setup Zed to correctly generate daisyUI code based on your prompt.</p>

MCP is a an API to communicate with AI models. You can add MCP servers and Zed will communicate with them to get more accurate results.

There are 3 options:

  1. Blueprint: The Official MCP server from daisyUI (Recommended for best results)
  2. Context7: Free 3rd party MCP server
  3. daisyUI GitMCP: Free 3rd party MCP server
<div class="tabs tabs-lift max-sm:tabs-sm"> <input type="radio" name="mcp_options" class="tab" aria-label="Blueprint" checked /> <div class="tab-content bg-base-100 border-base-300 px-12 py-3">

daisyUI Blueprint

Blueprint is the official MCP server for daisyUI. Read more about Blueprint.

  1. Get a Blueprint License
  2. In Zed press <kbd class="kbd kbd-sm">⌘ CMD</kbd> + <kbd class="kbd kbd-sm">⇧ Shift</kbd> + <kbd class="kbd kbd-sm">P</kbd> ( Or <kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">Shift</kbd> + <kbd class="kbd kbd-sm">P</kbd> )
  3. Choose agent: add context server
  4. Add this and set your license key + email address in it Figma API Key is optional - Only needed for Figma-to-code conversion
json
{
 "daisyui-blueprint": {
   "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
</div> <input type="radio" name="mcp_options" class="tab" aria-label="Context7" /> <div class="tab-content bg-base-100 border-base-300 px-12 py-3">

Setup Context7 MCP server

  1. In Zed press <kbd class="kbd kbd-sm">⌘ CMD</kbd> + <kbd class="kbd kbd-sm">⇧ Shift</kbd> + <kbd class="kbd kbd-sm">P</kbd> ( Or <kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">Shift</kbd> + <kbd class="kbd kbd-sm">P</kbd> )
  2. Choose agent: add context server
  3. Add this config:
json
{
 "context7": {
   "command": "npx",
   "args": ["-y", "@upstash/context7-mcp@latest"]
 }
}

Usage

Now in Agent Mode you can ask AI anything about daisyUI. 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
</div> <input type="radio" name="mcp_options" class="tab" aria-label="GitMCP" /> <div class="tab-content bg-base-100 border-base-300 px-12 py-3">

Setup daisyUI GitMCP server

  1. In Zed press <kbd class="kbd kbd-sm">⌘ CMD</kbd> + <kbd class="kbd kbd-sm">⇧ Shift</kbd> + <kbd class="kbd kbd-sm">P</kbd> ( Or <kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">Shift</kbd> + <kbd class="kbd kbd-sm">P</kbd> )
  2. Choose agent: add context server
  3. Add this config:
json
{
 "daisyui-github": {
   "command": "npx",
   "args": ["-y", "mcp-remote", "https://gitmcp.io/saadeghi/daisyui"]
 }
}

Usage

Now in Agent Mode you can ask AI anything about daisyUI.

md:prompt
give me a light daisyUI 5 theme with tropical color palette
</div> </div>