jqwidgets-mcp-server

A Model Context Protocol server that gives any MCP-aware coding assistant — Claude Code, Claude Desktop, Cursor, Continue, GitHub Copilot Chat (agent mode), etc. — full knowledge of the jQWidgets component library: 80+ widgets, their properties, methods, events, custom data types, and a code generator that emits runnable examples for Plain JS / jQuery, React (TSX), Angular, and Vue.

Ask the assistant questions like:

• "What properties does jqxGrid support?"
• "What events does jqxScheduler fire?"
• "Generate a sortable, filterable jqxGrid bound to a JSON array, theme energyblue."
• "Which <script> tags do I need for a jqxGrid with editing, sorting, filtering and paging?"

…and the server answers from the bundled API metadata or emits the code directly.

Install

npm install -g jqwidgets-mcp-server

Or use it without installing globally:

npx jqwidgets-mcp-server

The package bundles a snapshot of the jQWidgets API JSON metadata — it works zero-config straight after install.

Configure your assistant

The server speaks MCP over stdio. Wire it into your assistant of choice.

Claude Code

claude mcp add jqwidgets npx jqwidgets-mcp-server

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "jqwidgets": {
      "command": "npx",
      "args": ["jqwidgets-mcp-server"]
    }
  }
}

VS Code — GitHub Copilot Chat (agent mode)

Create .vscode/mcp.json in your workspace:

{
  "servers": {
    "jqwidgets": {
      "type": "stdio",
      "command": "npx",
      "args": ["jqwidgets-mcp-server"]
    }
  }
}

Cursor / Continue / other MCP clients

Use the same command + args as above in whatever config your client expects.

Tools

All tools return structured JSON. Pass raw: true to property/method/event tools to keep the original HTML in description fields.

| Tool | Purpose | |---|---| | list_widgets | All 80+ widgets with one-line descriptions. | | get_widget | Full API summary for one widget (counts, exampleInit, dataTypes, Angular metadata). | | get_widget_properties | Properties: name, dataType, tsType, defaultValue, description, exampleInit. | | get_widget_methods | Methods: name, returnType, arguments, description. | | get_widget_events | Events: name, description, handler code sample. | | get_widget_types | Custom enums and interfaces declared by the widget (valid property values). | | get_required_scripts | Ordered CSS + JS includes for a widget, with feature modules (e.g. ["edit","sort","filter"]) and theme. | | list_demos | List shipped demo file names for a widget (requires a local jqWidgets checkout — see below). | | get_demo_code | Read the source of a specific demo file (requires a local jqWidgets checkout). | | generate_example | Emit a runnable example for jquery / react / angular / vue. |

Configuration (optional env vars)

| Variable | Default | Purpose | |---|---|---| | JQWIDGETS_REPO_ROOT | unset | Point at a local checkout of the jqWidgets repo (the folder containing JQX_BUILD_AUTOMATION/, jqwidgets-src/, and demos/). Enables list_demos / get_demo_code and live (not snapshotted) feature/theme discovery. | | JQWIDGETS_SCRIPTS_PREFIX | ../../../jqwidgets-src/ | Path prefix injected into generated <script> tags. Match this to where you serve jQWidgets from in your project. |

Worked example

After registering the server, a single prompt drives the whole flow:

Use the jqwidgets MCP server. Build me a runnable HTML page with a sortable, filterable, pageable jqxGrid bound to a 10-row JSON array of employees, theme energyblue.

The assistant will:

1. Call get_widget → understand the grid surface.
2. Call get_widget_properties with nameFilter: "sort" → confirm property names.
3. Call get_required_scripts with features: ["sort","filter","pager","selection"], theme: "energyblue" → get the right script tags.
4. Call generate_example with framework: "jquery" → receive a complete HTML file.

…and hand you a ready-to-run HTML file.

License

Use of this package requires a valid jQWidgets license. Trial use is permitted for evaluation. See LICENSE and https://www.jqwidgets.com/license/.