When AI Doesn't Know Your Library: Building an MCP Server for ngDiagram

ngDiagram is a new Angular library for creating interactive diagrams. It has excellent documentation, clear examples, and a well-designed API. But there's a problem: it was published recently.

AI coding assistants have little to no knowledge of it. Their training data predates the library's release. When you ask AI to help you build something with ngDiagram, they generate code that works - but only at a surface level. Basic diagrams, simple nodes, standard interactions.

The library's real capabilities - custom node templates, advanced edge routing, palette components, complex event handling - remain out of reach. The AI doesn't know they exist, so it can't suggest them. You're limited to what the AI can infer from generic Angular patterns.

This makes "vibe coding" frustrating. The code runs, but you're not getting the full power of the library. You're back to reading documentation manually to discover what's actually possible.

While services like Context7 provide MCP access to hundreds of popular libraries, newer or niche libraries often aren't included yet.

I recently built a Proof of Concept MCP Server for ngDiagram that changes this.

This post is about what I learned, and what it might mean for how we build software with tools that weren't in the training data.

What MCP Changes

Model Context Protocol (MCP) is an open standard created by Anthropic. It allows AI assistants to connect to external data sources in real time.

For ngDiagram, I built a server that:

• Indexes the library's documentation (Markdown files)
• Exposes a search tool that AI agents can call
• Provides a resource API so agents can read full documentation pages

The flow looks like this:

1. You ask: "How do I create a custom node with rotation in ngDiagram?"
2. The AI agent searches the documentation using the MCP server
3. It retrieves relevant pages and reads their full content
4. It generates code based on current, accurate information
5. It provides links to the sources it used

The difference is subtle but significant: the AI is no longer guessing. It is reading.

What This Feels Like in Practice

I used this setup to build a sample demo which visualizes a customer complaint process. With the MCP server providing real-time access to ngDiagram documentation, the experience was fundamentally different.

Instead of:

• Asking the AI to generate code
• Checking if it matches the docs
• Correcting mistakes
• Iterating

I could just:

• Describe what I wanted
• Trust that the AI had access to accurate information
• Focus on design decisions, not API lookups

The code worked on the first try more often. Not because the AI was smarter, but because it had better context and information about library.

This is what people call vibe coding - but it only works when the vibes are grounded in facts.

How the MCP Server Works

The implementation is straightforward - which is part of what makes it interesting. The server has three main components:

1. Documentation Indexer

Scans the ngDiagram repository for docs Markdown files, extracts frontmatter metadata (title, description), and builds an in-memory index. Each document gets a full URL pointing to the live documentation site.

2. Search Engine

Implements multi-tier matching:

• Exact phrase match (highest priority)
• Multi-word match (all words present, but not necessarily as a phrase)
• Single-word match (any word matches)

Results are ranked by where the match occurs: title > description > path > content.

3. MCP Server

Exposes two interfaces:

• A search_docs tool that AI agents can call with a query
• A Resources MCP Server feature that lets agents read full documentation pages

The server runs via stdio transport, communicating with AI assistants through the Model Context Protocol.

Resources Feature: The Real Game Changer

Initially, I implemented the search_docs tool to return both URLs and page content in the search results. The AI could find relevant documentation and had access to the text. This seemed like it should work.

The AI would acknowledge the documentation existed, sometimes quote a sentence or two, but it wouldn't deeply engage with the content. It felt like it was skimming rather than reading. The generated code was better than before, but still didn't leverage the full capabilities of the library.

I couldn't figure out why. The content was there. The AI had access to it. What was missing?

Then I discovered the Resources feature in the MCP Server specification.

Instead of returning documentation content as part of search results, I exposed each documentation page as a separate resource. Now the AI could explicitly request to read specific pages - like opening a file to study it.

This changed everything.

Now the AI doesn't just find URLs - it reads the full content of documentation pages. When you ask about custom nodes, the AI:

1. Searches for relevant pages
2. Reads the complete documentation
3. Generates code based on actual examples and API details
4. Provides answers grounded in the real documentation

The difference is subtle but profound. The AI went from being a search assistant to being a documentation-aware coding partner.

I still don't fully understand why this works better. My theory: when content comes back as search results, the AI treats it as metadata. When it explicitly requests a resource, it treats it as something to study.

How to Try This (For Now)

The MCP Server for ngDiagram is currently a Proof of Concept. It requires a local build:

Clone the ngDiagram repository

git clone https://github.com/synergycodes/ng-diagram.git
cd ng-diagram

git clone https://github.com/synergycodes/ng-diagram.git
cd ng-diagram

Build the MCP server

cd tools/mcp-server
pnpm install
pnpm build

cd tools/mcp-server
pnpm install
pnpm build

Then configure your AI assistant (Cursor, Kiro, Claude Desktop) by adding this to your mcp.json:

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "node",
      "args": ["/absolute/path/to/ng-diagram/tools/mcp-server/dist/index.js"],
      "cwd": "/absolute/path/to/ng-diagram"
    }
  }
}

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "node",
      "args": ["/absolute/path/to/ng-diagram/tools/mcp-server/dist/index.js"],
      "cwd": "/absolute/path/to/ng-diagram"
    }
  }
}

Restart your assistant, and it will have access to ngDiagram documentation.

The ngDiagram team is working on expanding this PoC and releasing it as an npm package, so the setup will become simpler.

What MCP Servers Mean for Library Maintainers

If you maintain an open-source library, MCP servers offer a new way to make your work accessible to AI Agents.

Instead of hoping that AI models were trained on your documentation, you can provide a direct interface. Developers using AI assistants will get accurate, up-to-date information about your library.

Angular Wrocław Meetup powered by ngDiagram

If you're looking for a diagramming library for Angular, ngDiagram is worth your attention. It's very performant, has modern well-designed APIs, and offers a clean architecture with great developer experience.

In the next article, I'll share a technical breakdown of this library.

If you're in the area or interested in Angular, join us at our Angular Wrocław Meetup powered by ngDiagram - we'd love to see you there!