让 AI Coding Agent 直接访问 CAD 仓库：GitMCP 配置实战教程

让 AI Coding Agent 直接访问 CAD 文档：GitMCP 实战指南

在 CAD Web 项目中，真正让 AI Coding Agent 困难的往往不是“写代码”，而是让它准确理解项目的 API、架构、配置和实现细节。 对于 cad-viewer 、 realdwg-web 、 mtext-renderer 这类项目尤其如此：它们涉及 DWG/DXF 解析、CAD 数据模型、Three.js、Web Worker、字体加载以及 Vue 组件。只依赖 AI 自己的训练数据，很容易遇到 API 过时或“猜 API”的问题。 一个简单的解决方案是：使用 GitMCP 把 GitHub 仓库作为 MCP 文档服务器提供给 AI Coding Agent。 本文以 MlightCAD 的三个项目为例： realdwg-web ：用于浏览器端读取 DWG/DXF，并提供 CAD 数据库相关 API cad-viewer ：浏览器端 DWG/DXF 查看与编辑器 mtext-renderer ：基于 Three.js 的 AutoCAD MText 渲染器 1. GitMCP 是什么？ GitMCP 为 GitHub 仓库提供 MCP 兼容的文档服务器。 基本流程： GitHub Repository ↓ GitMCP ↓ MCP-compatible AI Coding Agent ↓ 读取 / 搜索项目文档 例如： GitHub: https://github.com/mlightcad/cad-viewer GitMCP: https://gitmcp.io/mlightcad/cad-viewer 通用规则就是： https://gitmcp.io/ < owner > / < repo > 因此，你不需要自己部署一个 MCP Server，就可以让兼容 MCP 的 AI Coding Agent 获取公开 GitHub 仓库的文档和代码上下文。 2. 为什么 CAD 项目特别适合 GitMCP？ CAD 项目通常包含大量领域 API，AI 很难仅凭通用知识准确还原。 例如 cad-viewer 涉及： 数据 / Model 层 Rendering 层 View 层 realdwg-web Three.js SVG Web Worker Vue 3 而 mtext-renderer 包含： FontManager FontLoader MText MainThreadRenderer WebWorkerRenderer UnifiedRenderer 字体缓存 异步字体加载 Web Worker 渲染 如果没有项目级上下文，AI 很容易生成一个“看起来合理、实际上不存在”的 API。 有了 GitMCP，就可以直接询问： MlCadViewer 如何加载远程 DWG？ 或者： 如何使用 WebWorkerRenderer 渲染 MText？ AI 可以先读取仓库中的实际文档，而不是完全依赖训练数据。 3. MlightCAD 的三个 GitMCP Server RealDWG-Web https: //gitmcp.io/mlightcad/realdwg-web 主要负责 DWG/DXF 读取，以及 CAD Database 和转换相关 API。 CAD-Viewer https: //gitmcp.io/mlightcad/cad-viewer 用于浏览器端 DWG/DXF 查看和编辑，也包含 Vue 3 Viewer 的集成说明。 MText Renderer https: //gitmcp.io/mlightcad/mtext-renderer 专门负责 AutoCAD MText 的 Three.js 渲染，同时支持主线程和 Web Worker。 4. 在 Cursor 中配置 打开： ~ /.cursor/m cp. json 加入： { "mcpServers" : { "realdwg-web Docs" : { "url" : "https://gitmcp.io/mlightcad/realdwg-web" } , "cad-viewer Docs" : { "url" : "https://gitmcp.io/mlightcad/cad-viewer" } , "mtext-renderer Docs" : { "url" : "https://gitmcp.io/mlightcad/mtext-renderer" } } } 这里最重要的是： "cad-viewer Docs" ↓ https: //gitmcp.io/mlightcad/cad-viewer Server 名称可以自定义，URL 决定它对应哪个 GitHub 仓库。 保存后重新加载 Cursor，并确认三个 MCP Server 已可用。 5. 在 Windsurf 中配置 配置文件： ~ /.codeium/ windsurf/mcp_config. json 配置： { "mcpServers" : { "realdwg-web Docs" : { "serverUrl" : "https://gitmcp.io/mlightcad/realdwg-web" } , "cad-viewer Docs" : { "serverUrl" : "https://gitmcp.io/mlightcad/cad-viewer" } , "mtext-renderer Docs" : { "serverUrl" : "https://gitmcp.io/mlightcad/mtext-renderer" } } } 注意：Windsurf 使用的是 serverUrl ，而 Cursor 使用 url 。 6. 在 VS Code 中配置 配置文件： .vscode/mcp.json 示例： { "servers" : { "realdwg-web Docs" : { "type" : "sse" , "url" : "https://gitmcp.io/mlightcad/realdwg-web" } , "cad-viewer Docs" : { "type" : "sse" , "url" : "https://gitmcp.io/mlightcad/cad-viewer" } , "mtext-renderer Docs" : { "type" : "sse" , "url" : "https://gitmcp.io/mlightcad/mtext-renderer" } } } VS Code 与 Cursor 的主要区别： Cursor 使用 mcpServers VS Code 使用 servers VS Code 需要声明 "type": "sse" 7. 在 Claude Desktop 中配置 Claude Desktop 使用 mcp-remote ： { "mcpServers" : { "realdwg-web Docs" : { "command" : "npx" , "args" : [ "mcp-remote" , "https://gitmcp.io/mlightcad/realdwg-web" ] } , "cad-viewer Docs" : { "command" : "npx" , "args" : [ "mcp-remote" , "https://gitmcp.io/mlightcad/cad-viewer" ] } , "mtext-renderer Docs" : { "command" : "npx" , "args" : [ "mcp-remote" , "https://gitmcp.io/mlightcad/mtext-renderer" ] } } } 8. 在 Cline 中配置 Cline 可以直接连接 GitMCP： { "mcpServers" : { "realdwg-web Docs" : { "url" : "https://gitmcp.io/mlightcad/realdwg-web" , "disabled" : false , "autoApprove" : [ ] } , "cad-viewer Docs" : { "url" : "https://gitmcp.io/mlightcad/cad-viewer" , "disabled" : false , "autoApprove" : [ ] } , "mtext-renderer Docs" : { "url" : "https://gitmcp.io/mlightcad/mtext-renderer" , "disabled" : false , "autoApprove" : [ ] } } } 9. 通用配置规则 如果 GitHub 仓库是： https: //github.com/OWNER/REPOSITORY 那么 GitMCP 通常对应： https: //gitmcp.io/OWNER/REPOSITORY 例如： GitHub: https://github.com/mlightcad/cad-viewer GitMCP: https://gitmcp.io/mlightcad/cad-viewer 这意味着对于 Vibe Coding，可以快速给 AI 提供某个开源库的项目级上下文，而不需要自己搭建 MCP Server。 10. 真正重要的是：怎么让 AI 使用 MCP 配置只是第一步。 真正的价值在于： 明确要求 AI 先读取 MCP 文档，再写代码。 例如，不要只说： 创建一个 CAD Viewer 组件。 更好的写法是： 使用 cad-viewer Docs MCP，检查当前 API，然后基于 @mlightcad/cad-viewer 创建一个 Vue 3 组件，从 URL 加载 DWG 文件。 这样可以明确告诉 AI：哪个文档源应该作为当前 API 的依据。 10.1 CAD Viewer 示例 可以这样提问： Please use the cad-viewer Docs MCP. I am building a Vue 3 application. Check the current documentation for @mlightcad/cad-viewer and : 1 . Explain the recommended installation. 2 . Show how to initialize MlCadViewer. 3 . Show how to load a DWG from a remote URL. 4 . Explain how baseUrl affects fonts and templates. 5 . Generate a minimal working Vue 3 component. 重点是让 AI： 先检查当前文档 再解释 API 最后生成代码 10.2 RealDWG-Web 示例 处理底层 DWG/DXF 时，可以使用： Use the realdwg-web Docs MCP. I need to parse a DWG file in the browser. Please explain: - how to create the database - how to set the working database - how to read an ArrayBuffer - how to specify DWG vs DXF - what AcDbOpenDatabaseOptions does Then generate a TypeScript example based on the current API. 这种方式尤其适合 realdwg-web ，因为它涉及较底层的 CAD Database API，容易与其他 DWG 库混淆。 10.3 MText Renderer 示例 如果需要处理大量 MText，可以让 AI 先比较不同 Renderer： Use the mtext-renderer Docs MCP. I need to render AutoCAD MText in Three.js. Please compare : - MainThreadRenderer - WebWorkerRenderer - UnifiedRenderer Then recommend which one to use for an application rendering thousands of MText entities. Finally , generate a TypeScript example. 对于大量或复杂文本，项目文档明确涉及 Worker 渲染方案，可以帮助 AI 根据实际 API 给出更可靠的建议。 11. 同时使用多个 MCP Server GitMCP 的另一个优势是可以同时配置多个相关仓库。 例如一个 DWG Viewer 项目可能涉及： DWG 文件 ↓ realdwg-web ↓ CAD Data Model ↓ cad-viewer ↓ Three.js Renderer ↓ mtext-renderer 因此可以直接告诉 AI： I am implementing a DWG viewer. Use the realdwg-web Docs, cad-viewer Docs, and mtext-renderer Docs MCP servers. Explain the data flow from : DWG file ↓ realdwg-web ↓ CAD data model ↓ cad-viewer ↓ Three.js renderer ↓ MText renderer 这样 AI 可以跨多个仓库理解整个技术链，而不是把每个 npm 包当成孤立的库。 12. 推荐的 Vibe Coding 工作流 我更推荐把 GitMCP 融入一个简单的三步流程。 第一步：先读文档，再写代码 Before writing any code, inspect the relevant documentation using the MCP server. Summarize the current API and identify the recommended approach. 目的：避免 AI 一上来就根据记忆猜 API。 第二步：要求最小实现 Now create the smallest working implementation. Do not introduce abstractions that aren 't required. 这样生成的代码通常更容易验证和维护。 第三步：让 AI 对照文档检查 Review the generated code against the documentation you retrieved from the MCP server. Identify any API names, parameters, imports, or configuration that do not match the current project. 这一轮对于 API 更新较快的开源项目尤其重要。 13. GitMCP + 本地源码 GitMCP 并不是本地源码的替代品，两者更适合配合使用。 本地仓库 ↓ 实际实现 ↓ 你的应用代码 GitMCP ↓ 项目文档 / 外部库知识 ↓ AI Coding Context 例如本地项目： my-cad-app/ ├── src/ │ ├── components/ │ ├── cad/ │ └── workers/ ├── package .json └── vite. config .ts 同时 AI 可以访问： realdwg-web Docs cad-viewer Docs mtext-renderer Docs 这样 AI 就能把你的业务代码和外部 CAD 库的实际 API 结合起来，而不是猜测第三方包如何工作。 14. 不要把 MCP 当成“万能 API 生成器” 需要特别注意： MCP 不会自动保证 AI 的答案正确。 它解决的是“上下文不足”问题，而不是替 AI 做所有判断。 仍然应该要求 AI： 阅读相关文档 明确当前使用的版本 / API 区分文档内容和自己的推测 尽可能给出相关源码文件 对生成的代码进行 API 校验 例如不要只问： How do I use cad-viewer? 而应该问： Use the cad-viewer Docs MCP and inspect the current documentation. Find the API for MlCadViewer and show the exact imports, required dependencies, and the recommended way to load a remote DWG. 后者更容易得到可以直接使用的结果。 15. 常见问题 MCP Server 没有出现 先检查 URL 是否正确： https: //gitmcp.io/mlightcad/cad-viewer GitHub： github.com/mlightcad/cad-viewer GitMCP： gitmcp.io/mlightcad/cad-viewer 核心规则就是： GitHub owner / repository ↓ GitMCP owner / repository AI 没有使用 MCP 直接在 Prompt 中明确要求： Please use the cad-viewer Docs MCP before answering. 如果同时配置了多个仓库： Use cad-viewer Docs and realdwg-web Docs. AI 生成的代码看起来过时 要求它重新检查： Please re-check the current MCP documentation and compare it with the code you generated. Do not assume the API from your training data is current. 16. 为什么这对 Vibe Coding 很重要？ Vibe Coding 的关键其实不是让 AI“更聪明”，而是让它获得 正确的上下文 。 没有项目上下文时： 开发者 ↓ AI ↓ 猜测 ↓ 代码 ↓ 调试 ↓ 重复 加入 GitMCP 后： 开发者 ↓ AI ↓ GitMCP 文档 ↓ 理解当前 API ↓ 生成代码 ↓ 验证 CAD 项目尤其适合这种方式，因为其中包含大量专业概念： DWG / DXF Entity CAD Database API 坐标系 渲染管线 字体和 SHX MText 格式 Web Worker Three.js Geometry CAD 专用资源 浏览器内存限制 让 AI 直接访问项目自己的文档，可以明显减少你需要手动提供的上下文。 17. 可复用配置模板 以后给其他 GitHub 项目接入 GitMCP，可以直接套用下面的模式。 Cursor { "mcpServers" : { "PROJECT Docs" : { "url" : "https://gitmcp.io/OWNER/PROJECT" } } } Windsurf { "mcpServers" : { "PROJECT Docs" : { "serverUrl" : "https://gitmcp.io/OWNER/PROJECT" } } } VS Code { "servers" : { "PROJECT Docs" : { "type" : "sse" , "url" : "https://gitmcp.io/OWNER/PROJECT" } } } Claude Desktop { "mcpServers" : { "PROJECT Docs" : { "command" : "npx" , "args" : [ "mcp-remote" , "https://gitmcp.io/OWNER/PROJECT" ] } } } 18. 总结 对于开源库和专业 CAD 项目，GitMCP 是一种成本很低的 AI Coding 增强方式。 以 MlightCAD 为例，可以配置： AI Coding Agent ↓ GitMCP ↓ ┌────┼────────────┐ ↓ ↓ ↓ RealDWG CAD MText Web Viewer Renderer 真正重要的并不是“安装了多少 MCP Server”，而是改变与 AI Coding Agent 的协作方式： 不要让 AI 猜库怎么用。给它项目文档，让它先检查当前 API，再开始写代码。 对于 API 和架构都比较复杂的 CAD 项目，这个小小的工作流变化，可以让 Vibe Coding 可靠很多。 如果你维护自己的 GitHub 项目，也可以采用同样的方法：通过 GitMCP 暴露仓库，把它加入 Coding Agent，然后让 AI 的第一步从 “猜 API” 变成 “先读文档” 。