jqwidgets-mcp-server

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.

What's new in 1.1

• generate_example writes current code for every component: React 19 function components with hooks and strict TypeScript, Vue 3 <script setup>, Angular 19+ standalone components with signals, and plain JavaScript without jQuery, each with real sample data. Every component's example is built and run in all four frameworks (npm run test:examples). The result lists its files (files), the install command and notes; code is kept.
• Scripts load from the jsDelivr CDN by default (scripts: "npm" for node_modules).
• The API data is jQWidgets 27.1.0: 82 components, 46 themes (Tailwind Blue and the dark versions of Fluent and Material are new), and the AI members of the Grid, Scheduler and Gantt.

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.

generate_example

Every widget has a default example with small sample data (a data adapter with six rows and its columns for the grids, a list of strings for the list inputs, series and data for the charts, appointments for the scheduler, tasks for the Gantt chart, child markup for tabs, menus, windows and so on). options are merged on top; numbers and booleans given as strings ("600", "true") become real values, and a string that names a sample declaration ("dataAdapter", "columns") refers to it.

The result also has code (all files in one string, for clients that read only that), install (the commands that create the project), notes and warnings (e.g. options the widget does not have). Other inputs: theme (default fluent; "" for none), events (event names to handle; default one typical event), features, elementId.

Configuration (optional env vars)

Verifying the examples

npm run test:examples (test/examples-build.mjs) generates the default example of every widget for each framework and checks it the way a user would use it:

• jquery: each page in Chromium, with its CDN URLs answered from a local jqwidgets-scripts package (no network);
• react: all examples in one Vite react-ts project: tsc -b (strict), then a vite build per example (one entry each, as in a project of its own), then each page in Chromium;
• vue: the same with vue-tsc --build;
• angular: all examples in one ng new project, one route per example: ng build, then each route in Chromium.

A page passes when it has no console error, page error or failed request and a jQWidgets component was created on an element of non-zero size. The projects are not modified: their configuration is copied into the output folder and their node_modules linked.

npm run test:examples -- --react <vite react-ts project> --vue <vite vue-ts project> \
    --angular <ng new project> --scripts <dir of an installed jqwidgets-scripts package> \
    [--frameworks jquery,react,vue] [--widgets grid,chart] [--out <dir>] [--shots] \
    [--playwright <dir of the playwright package>]

The React and Vue projects need jqwidgets-scripts, the Angular project jqwidgets-ng (all of the version being tested), and Playwright with Chromium must be installed somewhere (found from --playwright, PLAYWRIGHT_MODULE, this package or the projects). --shots saves a screenshot of every page; results.json in the output folder has the outcome per framework and widget. A full run (82 widgets × 4 frameworks) takes about 5 minutes.

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/.