Skip to content

mcp-setup.md

Latest commit

 

History

History
455 lines (360 loc) · 12.4 KB

mcp-setup.md

File metadata and controls

455 lines (360 loc) · 12.4 KB
Raw

MCP Server Setup — All Four Servers

Part of the igniteui-angular-figma-to-app skill.

This file contains setup instructions for all four MCP servers required by this skill. Configure all four before running the Figma-to-app workflow.

Overview

Server Purpose Verify with
Figma Read artboard structure, screenshots, design tokens figma_get_metadata (no nodeId)
Ignite UI CLI (igniteui-cli) Component docs, API reference list_components
Ignite UI Theming (igniteui-theming) Palette + component-level theming code theming_detect_platform
Playwright Browser automation, screenshots, DOM measurement playwright_browser_navigate to about:blank

1. Figma MCP

The Figma MCP server connects your AI tool to the Figma desktop app or a Figma file URL. It requires a Figma personal access token.

Get a Figma Access Token

  1. Open Figma → click your avatar (top-right) → Settings
  2. Scroll to Personal access tokens → Generate new token
  3. Give it a name (e.g. mcp-agent) → copy the token value

VS Code

Create or edit .vscode/mcp.json:

{
  "servers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
      }
    }
  }
}

Cursor

Create or edit .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
      }
    }
  }
}

Claude Code

claude mcp add figma -- npx -y @figma/mcp@latest --figma-access-token YOUR_TOKEN_HERE

Or add the entry to the project's .mcp.json (created at the repo root):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
      }
    }
  }
}

JetBrains IDEs

  1. Settings → Tools → AI Assistant → MCP Servers → + Add MCP Server
  2. Command: npx, Arguments: -y @figma/mcp@latest
  3. Environment: FIGMA_ACCESS_TOKEN=YOUR_TOKEN_HERE

Figma Desktop App Plugin (Recommended)

If you use the Figma desktop app, the preferred setup is through the Figma MCP plugin for your editor. Follow Figma's official installation guide: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/

This approach connects to the currently open Figma file and the selected node without needing to pass node IDs manually.

Session-binding behaviour: The Figma MCP tools (figma_get_screenshot, figma_get_design_context, figma_get_variable_defs) always operate on the currently selected node in the Figma desktop app. Any nodeId parameter passed to these tools is silently ignored — the tool returns data for whatever is selected, not for the specified ID.

Consequence: you cannot programmatically navigate between artboards by passing node IDs. To get screenshots or design context for a specific artboard you must ask the user to click that artboard frame in Figma before calling the tool.

The correct pattern in every Phase 1 step:

// 1. Ask the user
"In Figma, please click the [Artboard Name] frame to select it, then confirm."
// 2. Wait for confirmation
// 3. Only then call the tool
figma_get_screenshot({})
figma_get_design_context({ clientLanguages: "typescript", clientFrameworks: "angular", ... })

Verifying Figma MCP

Call figma_get_metadata with no nodeId. It should return either:

  • A list of top-level pages if something is selected in the Figma desktop app, or
  • A prompt to open a Figma file

Rate limits: Starter plan: 6 calls/month · Organization: 200/day · Enterprise: 600/day. Use figma_get_metadata for structural discovery and figma_get_design_context only for target artboards to conserve quota.

Troubleshooting Figma MCP

Problem Fix
figma_get_metadata returns an error Token may be expired or invalid — regenerate it
Tools not available after config Restart the editor/IDE
File not found Verify the Figma file URL is correct and you have access
6 calls/month exceeded Upgrade to an Organization plan or use the Figma REST API with a personal access token for higher-volume development work

2. Ignite UI CLI MCP (igniteui-cli)

Projects created with npx igniteui-cli new already have this configured. npx igniteui-cli new writes the Ignite UI CLI MCP entry into .vscode/mcp.json automatically during scaffolding. For existing projects that lack this config, run:

npx -y igniteui-cli ai-config

This configures both the igniteui-cli and igniteui-theming MCP servers and copies the Agent Skills in one step, preserving existing server entries. Only follow the manual steps below (and in section 3) when npx igniteui-cli ai-config is not available or you need to configure an editor it does not cover.

VS Code

Create or edit .vscode/mcp.json:

{
  "servers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    }
  }
}

Cursor

Create or edit .cursor/mcp.json:

{
  "mcpServers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    }
  }
}

Claude Code

claude mcp add igniteui-cli -- npx -y igniteui-cli mcp

Or add the entry to the project's .mcp.json (created at the repo root):

{
  "mcpServers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    }
  }
}

JetBrains IDEs

  1. Settings → Tools → AI Assistant → MCP Servers → + Add MCP Server
  2. Command: npx, Arguments: -y igniteui-cli mcp

Verifying Ignite UI CLI MCP

Ask your AI assistant: "List all available Ignite UI Angular components."

The list_components tool should return a full component list for the Angular framework.

3. Ignite UI Theming MCP (igniteui-theming)

npx -y igniteui-cli ai-config configures this server too (see section 2). Use the manual steps below only when ai-config is unavailable or doesn't cover your editor.

VS Code

Create or edit .vscode/mcp.json:

{
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

Cursor

Create or edit .cursor/mcp.json:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

Claude Code

claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp

Or add the entry to the project's .mcp.json (created at the repo root):

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

JetBrains IDEs

  1. Settings → Tools → AI Assistant → MCP Servers → + Add MCP Server
  2. Command: npx, Arguments: -y igniteui-theming igniteui-theming-mcp

Verifying Ignite UI Theming MCP

Ask your AI assistant: "Detect which Ignite UI platform my project uses."

The theming_detect_platform tool should analyze your package.json and return the detected platform (e.g., angular, angular-licensed).

4. Playwright MCP

VS Code

Create or edit .vscode/mcp.json:

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Cursor

Create or edit .cursor/mcp.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Claude Code

claude mcp add playwright -- npx -y @playwright/mcp@latest

Or add the entry to the project's .mcp.json (created at the repo root):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

JetBrains IDEs

  1. Settings → Tools → AI Assistant → MCP Servers → + Add MCP Server
  2. Command: npx, Arguments: -y @playwright/mcp@latest

Verifying Playwright MCP

Navigate to a URL: "Navigate the browser to https://example.com."

The playwright_browser_navigate tool should open the page without error.

Troubleshooting Playwright MCP

Problem Fix
Screenshots are blank Make sure the dev server is running (npm start)
Page resets to about:blank after resize Always re-navigate after playwright_browser_resize
Console shows ERR_CONNECTION_REFUSED The Angular dev server is not running
browser_evaluate fails with __name is not defined Pass code using the function parameter (not script): playwright_browser_evaluate({ function: "() => { ... }" })
playwright_browser_take_screenshot returns empty Re-navigate to the target URL first

Combined JSON Config (All Four Servers)

If your project was created with npx igniteui-cli new: the Ignite UI CLI entry is already in .vscode/mcp.json. Open that file and add only the three entries below (Figma, Ignite UI Theming, Playwright) to the existing "servers" block — do not duplicate the igniteui-cli entry.

Fresh setup (no existing .vscode/mcp.json): use the complete blocks below. Replace YOUR_TOKEN_HERE with your actual Figma personal access token.

VS Code (.vscode/mcp.json)

{
  "servers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
      }
    },
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
      }
    },
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Claude Code (.mcp.json in the project root)

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
      }
    },
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}