多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Ant Design Blazor 文档 MCP:为 AI 编程助手提供组件文档与示例源码检索服务

Ant Design Blazor 文档 MCP:为 AI 编程助手提供组件文档与示例源码检索服务 前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载本文基于仓库 docs/mcp.zh-CN.md 编写围绕AntDesign.Docs.MCP展开以该文档为骨架结合仓库源码与 README 进行补充与深化。导读AntDesign.Docs.MCP是 Ant Design Blazor 仓库中内置的一个 MCPModel Context Protocol服务端。它把组件列表、组件文档和演示Demo示例源码暴露成一组标准工具让 VS Code、Visual Studio 等支持 MCP 的 AI 编程工具可以直接“查阅组件文档 获取示例源码”从而根据具体场景生成贴合 Ant Design Blazor 组件用法的准确代码。本文将完整介绍它提供的四个核心工具、两种接入方式nuget/dnx 与 dotnet tool以及 CLI 速查命令并深入源码入口、工具定义、数据加载与离线回退、自包含打包等说明其底层原理。读完本文你可以把 Ant Design Blazor 的组件知识接入自己的 AI 编程工作流。一、这是什么一个“文档即服务”的 MCP 服务器MCPModel Context Protocol是一种标准协议用于让 AI 应用与外部数据源、工具进行标准化交互。AntDesign.Docs.MCP正是 Ant Design Blazor 项目为此提供的文档检索服务端源码位于 site/AntDesign.Docs.MCP。它解决的问题很直接AI 编程工具在生成 Ant Design Blazor 代码时如果只凭通用训练数据常常猜不准组件的真实 API 和用法。而有了这套 MCPAI 可以在生成代码前主动调用工具查询当前组件库中有哪些组件某个组件的分类、描述和 API 文档某个组件有哪些演示场景Scenario及对应的示例源码。这样生成的代码就能以仓库内真实 Demo 为参照而非凭空猜测。文档 docs/mcp.zh-CN.md 将其定位为“为 AI Coding 工具提供用于查询组件文档和示例源码有助于 AI 根据需要的场景和功能生成最准确的代码”。MCP 服务本身采用 StdIO 传输使用微软开源的ModelContextProtocolC# SDK 实现见 AntDesign.Docs.MCP.csproj 中的PackageReference可以运行在 VS Code、Visual Studio 等编辑器集成中。二、工具一览四个核心能力文档给出的工具定义如下工具作用ListComponents()返回组件列表SearchComponents(names)按逗号分隔的组件名进行查找ListAllDemos()列出所有演示组件/场景/描述SearchComponentDemos(queries)按组件:场景查询演示源代码在源码中这些工具全部定义在 site/AntDesign.Docs.MCP/Tools/AntDesignTools.cs通过[McpServerToolType]和[McpServerTool]特性注册到 MCP 服务器Program.cs 中的.WithToolsAntDesignTools()。实际上源码比文档列出的四个工具更丰富。除了文档中提到的四个还额外提供了GetComponentsByCategory(category)按分类如Components、Feedback、Navigation过滤组件ListDemosForComponent(component)列出指定组件的所有演示GetDemoSource(query)获取组件[:场景]的演示源码内部复用SearchComponentDemos。2.1 工具的实现细节各工具的行为可以从源码中得到确认ListComponents()先调用_componentService.LoadComponentsAsync()加载数据再输出全部组件名输出格式为Available components:加逐行组件名。SearchComponents(names)将names按逗号,拆分并Trim()后逐个查找命中则输出### 组件名加组件详情组件名、分类、类型、副标题、描述、API 文档链接未命中则输出### 组件名\nComponent not found.。ListAllDemos()遍历所有 Demo输出Component: xxx\nScenario: xxx\nDescription: xxx三段式信息。SearchComponentDemos(queries)将queries按逗号拆分每项按:拆成组件:场景。当场景为空时直接返回该组件第一个 Demo当场景不为空时使用LocalEmbedderSmartComponents.LocalEmbeddings对场景文本与候选 Demo 的Scenario Description做向量相似度匹配取相似度最高Score 0的 Demo 返回。这是源码里一个值得注意的细节场景匹配不是简单字符串匹配而是语义相似度匹配因此场景写得不完全一致也能命中。所有工具在返回内容末尾还会通过AppendUpdateNoticeIfAny检查 NuGet 上是否有更新的版本利用NuGetService.GetCachedLatest()缓存的版本号若有更新会追加“⚠️ A newer version ... Update with: dotnet tool update -g ...”提示。背景检查由 PrefetchBackgroundService.cs 在启动时异步完成不会阻塞工具调用。2.2 组件文档的数据形态组件的详情输出来自 ComponentModel.cs其ToString()输出结构为Component: {Title} Category: {Category} Type: {Type} SubTitle: {SubTitle} // 可选 Description: {Description} API Documentation: {ApiDoc}即每个组件携带Category分类、Title名称、SubTitle副标题、Type类型、Description描述、ApiDocAPI 文档六个字段。DemoModel.cssite/AntDesign.Docs.MCP/Models/DemoModel.cs则对应Component、Scenario、Source、Description四个字段Source即演示源码。三、配置方式三种接入路径文档给出了两种正式接入方式READMEsite/AntDesign.Docs.MCP/README.md补充了从源码直接运行的本地开发路径共三种。3.1 方式一nuget/dnx推荐需 .NET 10在编程工具的 MCP 配置文件中添加以下配置即可。注意dnx需要 .NET 10这是文档中的原话README 进一步说明dnx仅在 .NET 10 SDK 中可用。{ servers: { AntDesign.Docs.MCP (nuget/dnx): { type: stdio, command: dnx, args: [ AntDesign.Docs.MCP0.1.0, --add-source, ${workspaceFolder}/nupkgs, --yes ] } } }说明command: dnx使用 .NET 10 提供的 dnx 运行器直接运行 NuGet 上的 MCP 包AntDesign.Docs.MCP0.1.0是包标识符和版本号与 AntDesign.Docs.MCP.csproj 中的PackageIdAntDesign.Docs.MCP/PackageId、PackageVersion0.1.0/PackageVersion对应--add-source ${workspaceFolder}/nupkgs指向本地包源目录。README 说明可先通过dotnet pack -c Release -o nupkgs在仓库根目录生成nupkgs文件夹供dnx或dotnet tool install测试使用。3.2 方式二dotnet tool无 .NET 10 时的备选如果你当前的环境没有安装 .NET 10可先用dotnet tool方式安装再用以下配置。安装命令为dotnet tool install -g antdesign-docs-mcp{ servers: { AntDesign.Docs.MCP (dotnet tool): { type: stdio, command: dotnet, args: [ tool, run, antdesign-docs-mcp ] } } }antdesign-docs-mcp这个命令名来自项目文件中的ToolCommandNameantdesign-docs-mcp/ToolCommandName且项目启用了PackAsTooltrue/PackAsTool因此可以被dotnet tool install安装为全局工具。README 还给出了从本地 feed 安装的等价命令dotnet tool install -g AntDesign.Docs.MCP --add-source ./nupkgs --version 0.1.03.3 方式三从源码直接运行本地开发README 的 “Local development” 一节提供了开发场景的启动方式从仓库根目录执行dotnet run --project site/AntDesign.Docs.MCP/AntDesign.Docs.MCP.csproj这会以 StdIO 传输启动 MCP 服务器供编辑器集成。对应的 VS Code 配置片段为{ servers: { AntDesign.Docs.MCP (local): { type: stdio, command: dotnet, args: [ run, --project, site/AntDesign.Docs.MCP/AntDesign.Docs.MCP.csproj ] } } }README 指出本地开发时dotnet run只需 .NET 8而dnx流程需要 .NET SDK 10。3.4 三种方式的对比与选择方式命令前置条件适用场景nuget/dnxdnx AntDesign.Docs.MCP0.1.0.NET 10从 NuGet 直接运行无需本地构建dotnet tooldotnet tool run antdesign-docs-mcp已安装全局工具无 .NET 10 时的替代方案本地 dotnet rundotnet run --project site/AntDesign.Docs.MCP/AntDesign.Docs.MCP.csproj.NET 8开发调试、从源码集成四、CLI 速查不启动 MCP 也能查文档文档明确指出“不使用 mcp也可用 CLI 命令速查可搭配 Skills 使用”。这意味着 CLI 模式与 MCP 服务器运行是相互独立的源码中 CliApp.cs 在Program.cs中独立分支if (args.Length 0)时直接走 CLI 并Environment.Exit。文档给出的四个速查命令# 列出组件 antdesign-docs-mcp component list # 搜索组件逗号分隔多个名称 antdesign-docs-mcp component search Button,Input # 列出某组件的演示 antdesign-docs-mcp demo list Button # 打印演示源码可按场景匹配 antdesign-docs-mcp demo source Button:Icon从源码看CLI 还支持以下补充用法全局旧式选项-d|--demo COMPONENT列出组件演示、-s|--demo-source QUERY打印演示源码demo list与demo source的用法错误时会打印Usage提示component search的别名search/find/get均可debug data打印 MCP 输出目录中发现的 JSON 数据文件及每个文件前 2KB 内容便于排查数据加载问题debug version打印PackageId、当前版本以及缓存的最新 NuGet 版本。在源码未安装为工具时可用dotnet run --project site/AntDesign.Docs.MCP/AntDesign.Docs.MCP.csproj -- 子命令的形式运行同一套 CLI例如dotnet run --project site/AntDesign.Docs.MCP/AntDesign.Docs.MCP.csproj -- demo source Button:IconREADME 明确 CLI 命令在Cli/下实现ComponentCommand.cs、DemoCommand.cs与 MCP 服务器运行时相互独立因此可以在不启动服务器的情况下快速检索。五、数据从哪来远程优先、离线回退MCP 服务器要回答工具调用依赖组件与 Demo 的元数据。源码揭示了数据获取的完整链路。5.1 远程数据源ComponentService.cs 与 DemoService.cs 都默认从远程地址https://antblazor.com/_content/AntDesign.Docs/meta/components.en-US.json下载数据这是 Ant Design Blazor 官方文档站点发布的组件元数据解析成功后即缓存到内存后续调用直接复用。5.2 离线回退机制如果远程下载失败网络问题、防火墙等服务器会回退到 NuGet 包内预生成的 JSON 文件位于包内data/目录。README 专门有一节 “Packaged fallback for offline usage” 说明这一设计默认优先下载远程元数据下载失败时回退读取包内data/下的 JSON这些 JSON 可以在发布流水线中用AntDesign.Docs.Build.CLI预生成并打进 NuGet 包。项目文件印证了这一点AntDesign.Docs.MCP.csproj 中的Content Includedata\**\*.json会把data/下的 JSON 同时打包Pack并复制到输出目录CopyToOutputDirectoryPreserveNewest。此外还有一个便于测试的开关设置环境变量ANT_DESIGN_DOCS_FORCE_OFFLINE1或true可以强制跳过远程下载直接走本地文件本地查找时优先匹配*.offline.json其次components*.json/demos*.json最后兜底任意*.json。5.3 数据解析JsonDataParser.cs 负责把 JSON 解析为模型ParseComponents先尝试直接反序列化为ListComponentModel若失败则手工遍历数组元素读取Title、Category、Description字段ParseDemos遍历顶层数组的每个组件读取Title作为组件名再遍历其DemoList提取每个演示的Title场景名、Description、Code源码。六、打包与分发自包含的单一可执行文件AntDesign.Docs.MCP.csproj 展示了该 MCP 服务器的发布形态TargetFrameworknet10.0/TargetFramework目标框架为 .NET 10RuntimeIdentifiers默认打包win-x64、win-arm64、osx-arm64、linux-x64、linux-arm64、linux-musl-x64六个平台README 说明由于是自包含应用必须按目标平台分别构建如需更多平台需自行扩展 RID 列表SelfContainedtrue/SelfContainedPublishSingleFiletrue/PublishSingleFile发布为自包含、单文件的独立可执行文件目标机器无需预装 .NET 运行时PackageTypeMcpServer/PackageType声明包类型为 MCP 服务器配合.mcp/server.jsonNone Include.mcp\server.json Packtrue ...被 NuGet/dnx 识别PackAsTooltrue/PackAsToolToolCommandNameantdesign-docs-mcp/ToolCommandName同时支持作为 dotnet tool 安装使用。打包验证流程READMEdotnet pack -c Release -o nupkgsdotnet pack会在nupkgs目录生成可测试的本地包正式发布则继续走dotnet nuget push。README 提醒如果发布到 NuGet.org需要先更新.mcp/server.json中的包元数据。七、从源码理解整体架构把以上内容串起来AntDesign.Docs.MCP的整体架构可以概括为四层入口层Program.cs 根据是否有命令行参数分流——有参数走 CLICliApp.RunAsync无参数则构建 Host、注册日志全部输出到 stderr因为 stdout 用于 MCP 协议消息、注册 DI 单例服务并启动后台预取服务。工具层AntDesignTools.cs 用[McpServerTool]特性声明 MCP 工具覆盖组件发现与演示检索实现语义匹配与版本更新提示。服务层ComponentService/DemoService负责远程优先、离线回退的数据加载与缓存JsonDataParser负责解析NuGetService提供最新版本缓存。CLI 层CliApp.cs 及 ComponentCommand.cs、DemoCommand.cs 提供不依赖服务器运行时的命令行检索能力可直接搭配 AI 工具的 Skills 机制使用。八、写在最后AntDesign.Docs.MCP把 Ant Design Blazor 组件库的文档与示例源码变成了 AI 编程工具可以直接调用的标准工具集。对开发者而言无论你是在 VS Code 中配置 MCP 服务器还是只想在终端里快速demo source Button:Icon抄一段真实可用的示例这套方案都能让“查文档、取源码”的过程自动化。如需深入阅读源码或本地调试可从以下文件入手文档定义docs/mcp.zh-CN.md英文版见 docs/mcp.en-US.md项目 READMEsite/AntDesign.Docs.MCP/README.md入口与配置site/AntDesign.Docs.MCP/Program.cs、site/AntDesign.Docs.MCP/AntDesign.Docs.MCP.csproj工具与 CLIsite/AntDesign.Docs.MCP/Tools/AntDesignTools.cs、site/AntDesign.Docs.MCP/Cli/CliApp.cs数据服务site/AntDesign.Docs.MCP/Services/ComponentService.cs、site/AntDesign.Docs.MCP/Services/DemoService.cs、site/AntDesign.Docs.MCP/Services/JsonDataParser.cs适用前提提醒dnx方式需要 .NET 10dotnet run本地开发需要 .NET 8MCP 服务器为早期预览阶段README 明确标注 “early preview stage”。赞分享前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载相关推荐Ant Design Blazor MCP 服务实战用 AntDesign.Docs.MCP 为 AI 编码助手注入组件文档与 Demo 源码查询能力Ant Design Blazor MCP 服务实战用 AntDesign.Docs.MCP 为 AI 编码助手注入组件文档与 Demo 源码查询能力 AntUI组件前端AntDesign Blazor 文档 MCP为 AI 编码工具接入组件文档与示例源码查询服务AntDesign Blazor 文档 MCP为 AI 编码工具接入组件文档与示例源码查询服务 AntDesign.Docs.MCP 是 Ant DesignUI组件前端AntDesign.Docs.MCP 使用指南为 AI Coding 工具提供 Ant Design Blazor 组件文档与示例代码查询能力AntDesign.Docs.MCP 使用指南为 AI Coding 工具提供 Ant Design Blazor 组件文档与示例代码查询能力 本文围绕 An前端UI组件设计系统上一篇Comtrya一键配置你的操作系统下一篇终极navi性能调优10个系统优化命令的最佳实践指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表