跪拜 Guibai
← Back to the summary

GitMCP Turns GitHub Repos into Live API Docs That AI Coding Agents Can Actually Read

A Practical Guide to Letting AI Coding Agents Directly Access CAD Documents: GitMCP in Action

In CAD web projects, what truly makes things difficult for AI Coding Agents is often not "writing code," but enabling them to accurately understand the project's API, architecture, configuration, and implementation details.

This is especially true for projects like cad-viewer, realdwg-web, and mtext-renderer: they involve DWG/DXF parsing, CAD data models, Three.js, Web Workers, font loading, and Vue components. Relying solely on the AI's own training data can easily lead to outdated APIs or "API guessing" problems.

A simple solution is to use GitMCP to provide a GitHub repository as an MCP documentation server to the AI Coding Agent.

This article uses three projects from MlightCAD as examples:

mcp.jpg


1. What is GitMCP?

GitMCP provides an MCP-compatible documentation server for GitHub repositories.

Basic flow:

GitHub Repository
       ↓
     GitMCP
       ↓
MCP-compatible AI Coding Agent
       ↓
Read / Search project documentation

For example:

GitHub:
https://github.com/mlightcad/cad-viewer

GitMCP:
https://gitmcp.io/mlightcad/cad-viewer

The general rule is:

https://gitmcp.io/<owner>/<repo>

Therefore, you don't need to deploy an MCP Server yourself to allow an MCP-compatible AI Coding Agent to access the documentation and code context of a public GitHub repository.


2. Why are CAD Projects Particularly Suited for GitMCP?

CAD projects typically contain a large number of domain-specific APIs, which are difficult for AI to accurately reproduce based solely on general knowledge.

For example, cad-viewer involves:

And mtext-renderer includes:

Without project-level context, AI can easily generate an API that "looks plausible but doesn't actually exist."

With GitMCP, you can directly ask:

How does MlCadViewer load a remote DWG?

Or:

How to use WebWorkerRenderer to render MText?

The AI can first read the actual documentation in the repository, rather than relying entirely on training data.


3. Three GitMCP Servers for MlightCAD

RealDWG-Web

https://gitmcp.io/mlightcad/realdwg-web

Mainly responsible for DWG/DXF reading, as well as CAD Database and conversion-related APIs.

CAD-Viewer

https://gitmcp.io/mlightcad/cad-viewer

Used for browser-side DWG/DXF viewing and editing, also includes integration instructions for the Vue 3 Viewer.

MText Renderer

https://gitmcp.io/mlightcad/mtext-renderer

Specifically responsible for Three.js rendering of AutoCAD MText, supporting both the main thread and Web Workers.


4. Configuration in Cursor

Open:

~/.cursor/mcp.json

Add:

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

The most important thing here is:

"cad-viewer Docs"
        ↓
https://gitmcp.io/mlightcad/cad-viewer

The server name can be customized, and the URL determines which GitHub repository it corresponds to.

After saving, reload Cursor and confirm that the three MCP Servers are available.


5. Configuration in Windsurf

Configuration file:

~/.codeium/windsurf/mcp_config.json

Configuration:

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

Note: Windsurf uses serverUrl, while Cursor uses url.


6. Configuration in VS Code

Configuration file:

.vscode/mcp.json

Example:

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

The main differences between VS Code and Cursor:


7. Configuration in Claude Desktop

Claude Desktop uses 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. Configuration in Cline

Cline can connect directly to 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. General Configuration Rules

If the GitHub repository is:

https://github.com/OWNER/REPOSITORY

Then GitMCP typically corresponds to:

https://gitmcp.io/OWNER/REPOSITORY

For example:

GitHub:
https://github.com/mlightcad/cad-viewer

GitMCP:
https://gitmcp.io/mlightcad/cad-viewer

This means that for Vibe Coding, you can quickly provide an AI with project-level context for an open-source library without needing to set up an MCP Server yourself.


10. What Really Matters: How to Make AI Use MCP

Configuration is just the first step.

The real value lies in: Explicitly requiring the AI to read the MCP documentation first, before writing code.

For example, don't just say:

Create a CAD Viewer component.

A better way to phrase it is:

Use the cad-viewer Docs MCP, check the current API, and then create a Vue 3 component based on @mlightcad/cad-viewer that loads a DWG file from a URL.

This clearly tells the AI: which documentation source should serve as the basis for the current API.


10.1 CAD Viewer Example

You can ask like this:

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.

The key is to make the AI:

  1. First check the current documentation
  2. Then explain the API
  3. Finally generate the code

10.2 RealDWG-Web Example

When dealing with low-level DWG/DXF, you can use:

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.

This approach is particularly suitable for realdwg-web because it involves lower-level CAD Database APIs that are easily confused with other DWG libraries.


10.3 MText Renderer Example

If you need to handle a large amount of MText, you can have the AI first compare different Renderers:

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.

For large or complex text, the project documentation explicitly involves Worker rendering solutions, which can help the AI give more reliable suggestions based on the actual API.


11. Using Multiple MCP Servers Simultaneously

Another advantage of GitMCP is the ability to configure multiple related repositories at the same time.

For example, a DWG Viewer project might involve:

DWG File
   ↓
realdwg-web
   ↓
CAD Data Model
   ↓
cad-viewer
   ↓
Three.js Renderer
   ↓
mtext-renderer

Therefore, you can directly tell the 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

This way, the AI can understand the entire technology chain across multiple repositories, rather than treating each npm package as an isolated library.


12. Recommended Vibe Coding Workflow

I recommend integrating GitMCP into a simple three-step process.

Step 1: Read the Docs First, Then Write Code

Before writing any code, inspect the relevant documentation
using the MCP server.

Summarize the current API and identify the recommended approach.

Purpose: Prevent the AI from guessing the API from memory right from the start.

Step 2: Request a Minimal Implementation

Now create the smallest working implementation.
Do not introduce abstractions that aren't required.

Code generated this way is usually easier to verify and maintain.

Step 3: Have the AI Check Against the Documentation

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.

This round is especially important for open-source projects with rapidly updating APIs.


13. GitMCP + Local Source Code

GitMCP is not a replacement for local source code; the two work better together.

Local Repository
   ↓
Actual Implementation
   ↓
Your Application Code

GitMCP
   ↓
Project Documentation / External Library Knowledge
   ↓
AI Coding Context

For example, a local project:

my-cad-app/
├── src/
│   ├── components/
│   ├── cad/
│   └── workers/
├── package.json
└── vite.config.ts

At the same time, the AI can access:

realdwg-web Docs
cad-viewer Docs
mtext-renderer Docs

This way, the AI can combine your business code with the actual APIs of external CAD libraries, rather than guessing how third-party packages work.


14. Don't Treat MCP as a "Universal API Generator"

A special note of caution:

MCP does not automatically guarantee that the AI's answers are correct.

It solves the problem of "insufficient context," not making all judgments for the AI.

You should still require the AI to:

For example, don't just ask:

How do I use cad-viewer?

Instead, ask:

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.

The latter is more likely to yield a directly usable result.


15. Frequently Asked Questions

MCP Server Doesn't Appear

First, check if the URL is correct:

https://gitmcp.io/mlightcad/cad-viewer

GitHub:

github.com/mlightcad/cad-viewer

GitMCP:

gitmcp.io/mlightcad/cad-viewer

The core rule is:

GitHub owner / repository
        ↓
GitMCP owner / repository

AI Doesn't Use MCP

Explicitly require it in the Prompt:

Please use the cad-viewer Docs MCP before answering.

If multiple repositories are configured simultaneously:

Use cad-viewer Docs and realdwg-web Docs.

AI-Generated Code Looks Outdated

Ask it to re-check:

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. Why This Matters for Vibe Coding?

The key to Vibe Coding is not making the AI "smarter," but giving it the correct context.

Without project context:

Developer
  ↓
AI
  ↓
Guesses
  ↓
Code
  ↓
Debugging
  ↓
Repeat

After adding GitMCP:

Developer
  ↓
AI
  ↓
GitMCP Documentation
  ↓
Understands Current API
  ↓
Generates Code
  ↓
Verification

CAD projects are particularly suited to this approach because they contain a large number of specialized concepts:

Allowing the AI to directly access the project's own documentation can significantly reduce the amount of context you need to provide manually.


17. Reusable Configuration Templates

For connecting other GitHub projects to GitMCP in the future, you can directly apply the following pattern.

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. Summary

For open-source libraries and specialized CAD projects, GitMCP is a very low-cost way to enhance AI Coding.

Using MlightCAD as an example, you can configure:

AI Coding Agent
      ↓
    GitMCP
      ↓
 ┌────┼────────────┐
 ↓    ↓            ↓
RealDWG CAD      MText
 Web  Viewer    Renderer

What's truly important is not "how many MCP Servers are installed," but changing the way you collaborate with the AI Coding Agent:

Don't let the AI guess how to use a library. Give it the project documentation, let it check the current API first, and then start writing code.

For CAD projects with complex APIs and architecture, this small workflow change can make Vibe Coding much more reliable.

If you maintain your own GitHub projects, you can adopt the same approach: expose the repository via GitMCP, add it to the Coding Agent, and then make the AI's first step change from "guessing the API" to "reading the docs first".