在 Zed 中接入 daisyUI Blueprint MCP：官方 MCP 服务器安装与配置指南-编程实验室

在 Zed 中接入 daisyUI Blueprint MCP：官方 MCP 服务器安装与配置指南

【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

本文基于仓库文档packages/docs/src/routes/(routes)/blueprint/zed/+page.md编写，面向 Zed 编辑器用户，讲解如何把 daisyUI 官方 MCP 服务器 daisyUI Blueprint 接入 Zed 的 Agent 上下文，使 AI 能基于经过审核、实时同步的 daisyUI 资源生成组件代码。读完本文，你将掌握从获取 License 到在 Zed 中添加 context server、配置许可证环境变量、触发 AI 使用 Blueprint 的完整操作链路，并了解其底层运行机制与后续扩展（如 Figma API 接入）步骤。

背景：为什么 Zed 需要一套 daisyUI 专用 MCP

Zed 内置的 Agent 模式通过MCP（Model Context Protocol）与外部数据源通信：把 MCP 服务器加入 Zed 的 context server 列表后，AI 即可在生成答案时调用服务器提供的规则、组件结构与代码片段，从而产出更准确的代码。

daisyUI 的 AI 编码资源分为三类：官方 MCP 服务器 daisyUI Blueprint、免费的第三方 Context7 MCP、daisyUI GitMCP。其中Blueprint 是 daisyUI 官方 MCP 服务器，本仓库的packages/docs/src/routes/(routes)/blueprint/zed/+page.md即为它在 Zed 中的专属安装指南；仓库根目录下的packages/blueprint/mcp.json提供了等价的通用 MCP 配置模板。

关于 Blueprint 为什么能提升生成质量，仓库文档packages/docs/src/routes/(routes)/blueprint/workflow/+page.md说明它把工作流拆分为 Setup Expert、Rules Enforcer、Creative Director、Page Architect、Component Syntax Expert、Quality Inspector 六个环节，分步向 LLM 提供规则与资源，并在最后做质量检查。Zed 用户接入的正是这套工作流。

Step 1：获取 Blueprint License Key

Blueprint 需要授权才能激活。安装前请先获取一个Blueprint license key（许可证密钥），购买与激活流程对应的文档入口为/blueprint/checkout/（该跳转路由实现在仓库packages/docs/src/routes/(redirects)/blueprint/checkout/目录下，最终导向官方支付与发码流程）。

支付完成后，密钥会以邮件形式送达（若无收到，请检查垃圾邮件文件夹）。随后进入配置环节。

Step 2：在 Zed 中添加 MCP Context Server

2.1 打开命令面板

在 Zed 中按下：

macOS：⌘ CMD + ⇧ Shift + P
Windows / Linux：Ctrl + Shift + P

2.2 执行添加命令

在命令面板中键入并选择：

agent: add context server

Zed 会引导你输入一个符合 MCP 规范的服务器配置 JSON。

2.3 粘贴 Blueprint 配置

将下面的配置粘贴进去，并把其中的环境变量替换为你自己的值：

{ "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)" } } }

字段	取值	说明
`command`	`npx`	通过 npm 自带的 npx 启动服务器，无需全局安装
`args`	`["-y", "daisyui-blueprint@latest"]`	`-y`自动确认依赖安装；`@latest`保证每次启动拉取最新发布版，与 daisyUI 版本保持同步更新
`env.LICENSE`	你的 Blueprint 许可证密钥	必填，用于激活服务器
`env.EMAIL`	购买时使用的邮箱地址	必填，与许可证绑定
`env.FIGMA`	Figma Personal Access Token	可选，仅在需要把 Figma 设计稿转换为 daisyUI 代码时填写

这套 JSON 与仓库自带的通用模板完全一致——仓库根目录的packages/blueprint/mcp.json就是同一份daisyui-blueprint服务器声明，只是占位符形式略有不同（如YOUR_LICENSE_KEY），可作为其他支持 MCP 配置文件的编辑器 / CLI 工具的参考基线。

关于 FIGMA 变量的用途：文档packages/docs/src/routes/(routes)/blueprint/figma/+page.md说明它是可选的、仅在执行 Figma 转 daisyUI 代码时需要。若你暂不需要该能力，可以省略这一行，服务器仍可正常完成组件与主题相关的查询。

2.4 启动原理说明

配置保存后，Zed 会按command + args拉起进程。从配置可以看出，Blueprints 并没有被安装到本地依赖里，而是每次用npx -y daisyui-blueprint@latest按需执行：npx会临时下载并运行daisyui-blueprint包的最新版，-y跳过交互式安装确认，进程以 MCP stdio 协议与 Zed 的 Agent 通信。

Step 3：让 AI 使用 Blueprint MCP

服务器配置完成后，还需要在提示词中明确要求 AI 调用它。原文档给出的操作是：

After configuring the server, tell the AI model to use Blueprint MCP.

也就是在提问末尾追加use Blueprint MCP。仓库另一份 Zed 文档packages/docs/src/routes/(routes)/docs/mcp/zed/+page.md提供了具体示例：

give me a light daisyUI 5 theme with tropical color palette. use Blueprint MCP

推荐做法是在一条消息中同时给出目标描述与指令开关，例如中文场景可以这样组织：

请基于 daisyUI 5 设计一个深色模式的数据看板布局，包含卡片、统计、表格组件。 use Blueprint MCP

只有当 prompt 中出现该指令时，Agent 才会把 Blueprint 的 context server 作为工具与数据来源纳入调用链路，因此在正式使用前务必保留并验证这一步。

验证与后续步骤

完成上述三步后即可在 Zed 的 Agent 面板中提问并观察工具调用输出。若服务器启动失败，优先排查三点：LICENSE与EMAIL是否与购买记录完全一致、是否把占位符原样保留未替换、本机npx命令是否可用。

由于 Blueprint 每次都以@latest启动，其工具、资源与 prompt 会随 daisyUI 版本自动更新，无需手动升级服务器本身。

若你想启用「把 Figma 选区链接转换成 daisyUI 代码」的能力，接下来的操作是获取具备只读权限的 Figma Personal Access Token，填入FIGMA变量，再在 Zed 中请求 AI 解析设计链接，详细步骤见仓库文档packages/docs/src/routes/(routes)/blueprint/figma/+page.md。