Skip to content
NgDiagram

Build with AI

Ask your AI coding assistant to set up everything on this page for you:

Read https://www.ngdiagram.dev/docs/intro/ai/ and set up the ngDiagram agent skills and MCP server for this project.

Or follow the steps below yourself.

ngDiagram has two tools for your AI coding assistant, such as Claude Code, Cursor, GitHub Copilot, Codex, Gemini CLI and others. Agent skills teach it how to build with ngDiagram. The MCP server lets it search the docs and the API reference. We recommend using both.

Agent skills

Section titled “Agent skills”

Install

Section titled “Install”

In your project folder (the skills CLI needs Node.js 22.20 or newer):

Terminal window
npx skills add https://github.com/synergycodes/ng-diagram/tree/release/skills

The CLI asks which agents to install the skills for. Update later with npx skills update. The skills CLI sends anonymous usage data to skills.sh. Set DISABLE_TELEMETRY=1 to turn it off.

For other options (all projects, one skill, manual copy), see the install section of the skills README.

Use

Section titled “Use”

Skills use the open Agent Skills format (SKILL.md files). They cover the common use cases, the edge cases that cause most bugs, and troubleshooting from a symptom or a console message. They are for people who build applications with the library.

The agent loads a skill when your request matches its description. You can also ask for a skill by name, for example “use the ng-diagram-visibility skill”.

ng-diagram-fundamentals is the starting point. ng-diagram-troubleshooting is the starting point for problems. See the full list of skills.

MCP server

Section titled “MCP server”

The ngDiagram MCP server connects AI assistants to ngDiagram’s documentation and public API. Instead of switching to a browser to look things up, you can ask your AI assistant directly:

  • “How do I create custom nodes?”
  • “What’s the signature of DiagramComponent?”
  • “Show me the palette guide”

The AI searches the docs and API reference behind the scenes and answers with actual documentation content.

What is MCP?

Section titled “What is MCP?”

MCP is an open standard that lets AI assistants access external data sources. The ngDiagram MCP server exposes four tools:

  • search_docs - search documentation sections by keyword
  • get_doc - retrieve a full documentation page
  • search_symbols - search public API symbols (classes, interfaces, functions, types)
  • get_symbol - get full details for a specific API symbol

Setup

Section titled “Setup”

Add the server to your MCP client config - no installation required:

macOS / Linux:

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

Windows:

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

Restart your AI assistant after updating the config, then verify by asking, for example: “Search the ngDiagram docs for palette”.

Config file locations

Section titled “Config file locations”
ClientConfig file
Claude Code.mcp.json in project root (project) or ~/.claude.json (user)
Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json (macOS), %APPDATA%\Roaming\Claude\claude_desktop_config.json (Windows), ~/.config/claude-desktop/claude_desktop_config.json (Linux)
Cursor.cursor/mcp.json in project root (project) or ~/.cursor/mcp.json (global)
Windsurf~/.codeium/windsurf/mcp_config.json

How It Works

Section titled “How It Works”

The AI assistant uses a two-step pattern - search, then retrieve:

  1. AI calls search_docs("palette") or search_symbols("Component") to find matches
  2. AI calls get_doc("guides/palette.mdx") or get_symbol("NgDiagramComponent") to get full content
  3. AI synthesizes the answer for you

All documentation and API data is bundled into the npm package - no network calls are made at query time.

Learn More

Section titled “Learn More”