daisyUI MCP 服务器接入 OpenCode 完整指南：三种方案配置与使用
【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui
本篇指南讲解如何在 OpenCode 中接入 daisyUI MCP（Model Context Protocol）服务器，让 AI 根据你的提示词生成准确、符合最新规范的 daisyUI 代码。读完本文，你将掌握官方 Blueprint、免费 Context7 与 GitMCP 三种方案的opencode.json配置方法、鉴权环境变量说明，以及触发 MCP 工具的提示词写法。
MCP 是什么，为什么 OpenCode 需要它
MCP 是与 AI 模型通信的 API 标准。在 MCP 总览页/docs/mcp/+page.md) 中，daisyUI 官方将其定义为"与 AI 模型通信的 API"：MCP 服务器是实现了该协议的工具，为 AI 模型提供必要信息，使其能根据你的提示词生成准确代码。
对 OpenCode 而言，接入 daisyUI MCP 服务器的核心价值在于：AI 模型的训练数据存在时效性，容易凭记忆输出过时或不完整的 daisyUI 组件写法；而 MCP 服务器能让 OpenCode 实时与 daisyUI 官方数据源（或第三方索引）通信，获得当前版本的组件结构、变体、语义颜色与主题配置。daisyUI 官方还在 skills/daisyui/SKILL.md 中维护了一份面向 AI 的技能清单，覆盖安装、用法、配置、颜色与主题，以及全部 60+ 组件的使用指南，MCP 正是把这些权威资料直接"喂"给模型的通道。
OpenCode 提供了三种可选的 daisyUI MCP 接入方案：
- Blueprint：daisyUI 官方 MCP 服务器（推荐，效果最佳，需要许可证）；
- Context7：免费的第三方 MCP 服务器；
- daisyUI GitMCP：免费的第三方 MCP 服务器，通过 HTTP 远程访问。
下文逐一给出opencode.json的完整配置与用法。
方案一：daisyUI Blueprint（官方推荐）
Blueprint 是 daisyUI 官方出品的 MCP 服务器，包含经过审核验证的 daisyUI 组件资料、代码片段、页面架构库与质量检查能力，详细特性可参考 Blueprint 主页/blueprint/+page.svelte) 中的说明。该方案的配置入口文档为 Blueprint for OpenCode 安装指南/blueprint/opencode/+page.md)，分为四步。
第 1 步：获取 Blueprint 许可证
Blueprint 为付费产品，需先通过 Blueprint License 购买页/blueprint/checkout/+page.server.js) 获取许可证。购买后你会在邮箱中收到许可证密钥（License Key），用于后续激活 MCP 服务器。
第 2 步：安装 OpenCode CLI
如果你还没有安装 OpenCode，通过 npm 全局安装：
npm install -g opencode-ai第 3 步：在opencode.json中配置 Blueprint MCP
在项目根目录创建或编辑opencode.json，加入 Blueprint MCP 配置：
{ "$schema": "https://opencode.ai/config.json", "mcp": { "daisyui-blueprint": { "type": "local", "command": ["npx", "-y", "daisyui-blueprint@latest"], "enabled": true, "environment": { "LICENSE": "YOUR_LICENSE_KEY", "EMAIL": "YOUR_EMAIL", "FIGMA": "YOUR_FIGMA_API_KEY" } } } }各字段说明如下：
| 字段 | 说明 |
|---|---|
$schema | OpenCode 配置的 JSON Schema 地址，用于编辑器校验与自动补全 |
mcp | MCP 服务器注册表，可同时挂载多个服务器 |
daisyui-blueprint | 服务器名称，标识符可自定义，但建议保持语义化 |
type | 传输类型。"local"表示本地子进程方式启动（stdio 传输） |
command | 启动命令数组。npx -y daisyui-blueprint@latest会临时拉取并运行最新版 Blueprint 服务器，-y跳过确认提示 |
enabled | 是否启用该服务器，true为启用 |
environment | 传递给服务器进程的环境变量（鉴权信息），见下方说明 |
environment三项环境变量的作用：
LICENSE：必填，你的 Blueprint 许可证密钥，用于激活付费能力；EMAIL：必填，购买许可证时使用的邮箱地址；FIGMA：选填，Figma API Key，仅当你需要 Figma 设计稿转 daisyUI 代码（Figma-to-code）时才需要配置。
这份配置与仓库中的官方 MCP 定义文件 packages/blueprint/mcp.json 完全对应——该文件以标准 MCP 客户端格式声明了同一服务器：npx作为命令、-y daisyui-blueprint@latest作为参数、同样的LICENSE/EMAIL/FIGMA三个环境变量。OpenCode 的opencode.json只是将同一份声明改写为其自有格式（command数组合并命令与参数、environment替代env）。
第 4 步：在提示词中调用 Blueprint
配置完成后，向 AI 提问时，在提示词末尾加上use Blueprint MCP即可触发：
give me a light daisyUI 5 theme with tropical color palette. use Blueprint MCP这个后缀是告诉 OpenCode 把该请求路由给 Blueprint MCP 服务器处理，AI 会据此拉取权威的 daisyUI 主题与组件资料，再生成代码。根据 Blueprint 主页/blueprint/+page.svelte) 的演示，这类服务器可提供安装配置、实现规则、创意方向、页面架构选择、组件语法检索与最终质量检查等完整工作流。
方案二：Context7（免费第三方）
Context7 是免费的第三方 MCP 服务器，通过 HTTP 远程端点提供文档索引服务，无需安装本地进程。
基础配置
在opencode.json中添加：
{ "$schema": "https://opencode.ai/config.json", "mcp": { "context7": { "type": "remote", "url": "https://mcp.context7.com/mcp", "enabled": true } } }带 API Key 的可选配置
Context7 支持通过请求头携带 API Key，以便使用更完整的服务配额：
{ "$schema": "https://opencode.ai/config.json", "mcp": { "context7": { "type": "remote", "url": "https://mcp.context7.com/mcp", "enabled": true, "headers": { "CONTEXT7_API_KEY": "{env:CONTEXT7_API_KEY}" } } } }headers中的{env:CONTEXT7_API_KEY}语法会让 OpenCode 从当前 shell 环境变量CONTEXT7_API_KEY中读取密钥，避免把敏感信息硬编码进配置文件。
用法
调用时在提示词末尾加use context7：
give me a light daisyUI 5 theme with tropical color palette. use context7方案三：daisyUI GitMCP（免费第三方）
daisyUI GitMCP 通过 gitmcp.io 以 HTTP 远程传输方式提供 daisyUI 仓库的 MCP 服务，同样免费。
配置
在opencode.json中添加：
{ "$schema": "https://opencode.ai/config.json", "mcp": { "daisyui-gitmcp": { "type": "remote", "url": "https://gitmcp.io/saadeghi/daisyui", "enabled": true } } }与 Blueprint 的本地子进程（type: "local"）不同，这里type: "remote"表示 OpenCode 直接通过 HTTP 与该远程 MCP 端点通信，无需command与environment字段。
用法
调用时在提示词末尾加use daisyui-gitmcp：
give me a light daisyUI 5 theme with tropical color palette. use daisyui-gitmcp三种方案如何选择
| 维度 | Blueprint | Context7 | GitMCP |
|---|---|---|---|
| 提供方 | daisyUI 官方 | 第三方 | 第三方 |
| 费用 | 付费（需许可证） | 免费 | 免费 |
| 传输方式 | 本地子进程（stdio） | HTTP 远程 | HTTP 远程 |
| 数据源 | 官方编写并验证 | AI 生成索引 | 仓库索引 |
| 触发后缀 | use Blueprint MCP | use context7 | use daisyui-gitmcp |
- 追求最佳效果：选择 Blueprint。它由 daisyUI 官方维护，数据源经人工编写验证，与 daisyUI 版本同步更新，还附带 Figma 转代码、页面架构、质量检查等增强能力；
- 零成本快速接入：选择 Context7 或 GitMCP，配置仅需几行 JSON，适合验证 MCP 工作流或轻量使用。
无论选择哪种方案，配置完成后都需要重启或重新加载 OpenCode 以生效，并在提示词中显式附加对应的use ...后缀，AI 才会真正调用 MCP 服务器。三种配置均可同时保留在同一个opencode.json的mcp字段中，按需在提示词中切换。
【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
