Ng MCP Server

Provides ng-diagram documentation and API lookup tools for AI coding assistants.

Local serverstdioTypeScript

What is the Ng MCP server?

Provides ng-diagram documentation and API lookup tools for AI coding assistants. That is what the ng mcp server brings to an AI assistant: the same capability, reachable through the Model Context Protocol rather than a separate app or dashboard.

The short version

A robust Angular library for building interactive diagrams, node-based editors, and visual programming interfaces. Designed with Angular and TypeScript, it offers a complete toolkit to create sophisticated, customizable, and high-performance diagramming applications.

Getting it running

Installation goes through your MCP client rather than a global install: point it at ng-diagram on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.

The tools it exposes

The server publishes 12 tools. What each one is for:

Things to watch

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • With 12 tools registered it takes up a noticeable share of the context window; turn it off in projects that never touch Ng.
  • Keep per-call confirmation enabled while you learn its behaviour; it is the cheapest safeguard you have.

How it compares

Plenty of developer tooling servers cover similar ground. The differences that matter in practice are scope of access and how much setup stands between you and a working tool call. Ng's toolset — Angular, TypeScript, Node.js and 9 more — is a fair guide to whether it matches your workflow.

SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.

Available tools

ToolWhat it does
Angular18.0.0 or higher
TypeScript5.6.0 or higher
Node.js18.19.1 or higher
Documentation[https://www.ngdiagram.dev/docs](https://www.ngdiagram.dev/docs)
GitHub[https://github.com/synergycodes/ng-diagram](https://github.com/synergycodes/ng-diagram)
Website[https://www.ngdiagram.dev](https://www.ngdiagram.dev)
Issues[GitHub Issues](https://github.com/synergycodes/ng-diagram/issues)
Discussions[GitHub Discussions](https://github.com/synergycodes/ng-diagram/discussions), [Discord](https://discord.gg/FDMjRuarFb)
TemplateDescription
InstallationThe Installation tool exposed by this server.
ServicesThe Services tool exposed by this server.
DirectivesThe Directives tool exposed by this server.

How to install the Ng MCP server

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "npx",
      "args": ["-y", "@ng-diagram/mcp"]
    }
  }
}

Configuration as documented by the project. Restart the client after saving.

Example prompts to try

  • Use Ng to Angular.
  • Use Ng to TypeScript.
  • Use Ng to Node.js.

Frequently asked questions

It connects Ng to MCP-compatible AI assistants such as Claude and Cursor, exposing 12 tools (Angular, TypeScript, Node.js, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Ng directly.