wavemaker-dev-mcp

An MCP (Model Context Protocol) server that helps AI coding assistants generate WaveMaker React markup using pre-built skill documents. No repo checkout required — all component and token docs are bundled in the package.

There are no embeddings, no vector DB, and no live repo scanning. Skills are generated from WaveMaker source repos and bundled at publish time.

Requirements

• Node.js 18+
• No additional configuration — skill docs are bundled in the package.

Install

# From npm (recommended)
npx -y wavemaker-dev-mcp

# From source
git clone <repo-url> wavemaker-dev-mcp
cd wavemaker-dev-mcp
npm install
npm run build

Skills system

Skills are pre-generated Markdown documents covering every WaveMaker component and design token group. They are bundled in the package under skills/ — no live repo access needed.

Recommended LLM session workflow

1. Call list_skills once at the start to load the component index (~500 tokens).
2. Call get_skill("WmSelect") before generating markup for a specific component (~400–700 tokens per skill).
3. Call search_skills("sortable table with pagination") when unsure which component to use.

Regenerating skills after repo updates

Skills are generated from the react-runtime and foundation-css source repos. Run this after pulling updates:

Option 1 — CLI args:

npm run generate-skills -- \
  --runtime-path=/path/to/wavemaker-react-runtime \
  --css-path=/path/to/wavemaker-foundation-css \
  --force

Option 2 — env vars (set once in your shell profile, then just run the script):

# Add to ~/.zshrc or ~/.bashrc
export WM_REACT_RUNTIME_SOURCE=/path/to/wavemaker-react-runtime
export WM_FOUNDATION_CSS_SOURCE=/path/to/wavemaker-foundation-css

npm run generate-skills -- --force

CLI args take priority over env vars. --runtime-path / WM_REACT_RUNTIME_SOURCE is required; --css-path / WM_FOUNDATION_CSS_SOURCE is optional (skips token doc generation if omitted).

| Flag | Description | |------|-------------| | --force | Regenerates all auto-generated skills. Hand-crafted skills (no generated: true in frontmatter) are always preserved. | | --dry-run | Preview what would be written without touching any files. |

These env vars are only used by the generate-skills script — the MCP server itself needs no configuration.

Local testing (MCP Inspector)

Use @modelcontextprotocol/inspector to exercise the server in a browser (requires Node.js ≥ 22.7.5):

npm run build
npx @modelcontextprotocol/inspector --config mcp.json --server wavemaker-dev

Open the URL printed in the terminal (default http://localhost:6274).

Environment variables

The MCP server needs no environment variables. The following are only used by the generate-skills script:

| Variable | Purpose | |----------|---------| | WM_REACT_RUNTIME_SOURCE | Path to a local react-runtime source clone (used by generate-skills). | | WM_FOUNDATION_CSS_SOURCE | Path to a local foundation-css source clone (used by generate-skills). |

Tools

Skill tools (no repo required)

| Tool | Description | |------|-------------| | list_skills | Returns the skill index: all component names, categories, summaries, and tags. Accepts optional category filter. | | get_skill | Returns the full Markdown skill doc for a component (e.g. WmSelect, WmLinearLayout) or token group (e.g. spacing, colors). Case-insensitive, strips Wm prefix. | | search_skills | Free-text search across all skills by intent (e.g. "sortable table with pagination"). Returns top-N matches with scores. | | skills_meta | Returns skill index metadata: version, generated timestamp, source git hashes, component/token counts. |

Layout / spacing tools

| Tool | Description | |------|-------------| | suggest_component | Map layout intent (layout, repeat, grouped) to a WaveMaker component name and import path. | | map_spacing | Map a pixel value to the nearest spacing token (xs–xl) and WmLinearLayout spacing value. | | validate_layout | Check a layout string and code snippet for common issues (wrong prefix, missing direction). | | analyze_dom | Returns mock header height, spacing, and alignment. Stub for future Playwright integration. | | enforce_spacing | Given type (e.g. card-group, section) and layout (row/column), returns token-based gap and padding values. | | fix_layout_spacing | Given siblingsCount, recommends wrapping siblings in WmLinearLayout + WmLinearLayoutItem. |

Cursor / Claude Code setup

Zero config — add to your MCP config and it works immediately:

{
  "mcpServers": {
    "wavemaker-dev": {
      "command": "npx",
      "args": ["-y", "wavemaker-dev-mcp"]
    }
  }
}

Tests (Playwright)

Integration tests spawn the actual server over stdio. All tests run standalone — no WM repo checkout needed.

npm run build
npm test

License

MIT