WCAG MCP

MCP server that enables AI models and agents to review your Figma component design node for all applicable WCAG success criteria and levels.

Install

git clone https://github.com/planetabhi/wcag-mcp
cd wcag-mcp
pnpm i
pnpm list-all-tools

# .env
FIGMA_API_KEY=

Find node and server path

# Find node path
which node

# Get the absolute path of the MCP server
realpath mcpServer.js

Run MCP server

Run in Claude desktop

# Add this to your claude config
{
  "mcpServers": {
    "wcag-mcp": {
      "command": "<absolute_path_to_node>",
      "args": ["<absolute_path_to_mcpServer.js>"]
    }
  }
}

To try this out in Claude Desktop first enable the get_design_node tool. Then, enable any one component_name tool you'd like to test from the tools list. Finally, copy a design node link of a component from a Figma file and paste it into the Claude Desktop prompt.

Run in Postman

# Create a new MCP request and add the server's command and arguments
STDIO <absolute_path_to_node> <absolute_path_to_mcpServer.js>