smart-ui-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), VS Code with the MCP extension — full knowledge of the Smart UI Web Components library: 90+ components, their properties, methods, events, CSS variables, custom data types, and a code generator that emits runnable examples for Web Components / Vanilla JS, React, Angular, Vue and Blazor.

Ask the assistant questions like:

• "What properties does smart-grid support?"
• "What events does smart-scheduler fire?"
• "Generate a sortable, filterable Smart Grid bound to a JSON array, theme fluent."
• "Which <script> tags do I need for a Smart Grid with editing, sorting, filtering and paging?"
• "Show me the accessibility.htm documentation for the accordion."
• "List every demo we ship for the React Button."

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

📖 New here? Read the full tutorial — available as Markdown or a self-contained HTML page you can host directly. Covers installation, client setup (Claude Code, Claude Desktop, VS Code, Cursor, Continue, Windsurf, Zed), four end-to-end worked examples (Grid, Scheduler, Chart, Tree + context menu), prompt patterns, and troubleshooting.

Install

npm install -g smart-ui-mcp-server

Or use it without installing globally:

npx smart-ui-mcp-server

The package bundles a snapshot of the Smart UI API JSON metadata — it works zero-config straight after install. Pointing SMART_UI_REPO_ROOT at a local Smart UI checkout unlocks demo browsing and live theme/feature discovery (see Configuration).

Configure your assistant

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

Claude Code

claude mcp add smart-ui npx smart-ui-mcp-server

Claude Desktop

Add to claude_desktop_config.json:

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

VS Code — GitHub Copilot Chat (agent mode)

Create .vscode/mcp.json in your workspace:

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

Cursor / Continue / other MCP clients

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

How to refer to a component

Every Smart UI component has three equivalent identifiers; the MCP accepts any of them:

• the bare slug — button, dropdownlist, ganttchart
• the custom-element tag — smart-button, smart-drop-down-list, smart-gantt-chart
• the class name — Button, DropDownList, GanttChart

All three resolve to the same component record. The generated code always uses the Smart UI tag (smart-*) for Web Components / Vue / Angular and the class name (Button) for React / Blazor.

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 90+ components with one-line descriptions and their smart-* tags. | | get_widget | Full API summary for one component (counts, tag, class name, module file, CSS file, available feature sub-modules). | | get_widget_properties | Properties: name, type, tsType, defaultValue, allowedValues, description, demoValues. | | get_widget_methods | Methods: name, returnType, arguments, description. | | get_widget_events | Events: name, type, description, arguments. | | get_widget_css_variables | The --smart-* CSS custom properties the component exposes, with defaults. | | get_widget_types | Synthetic enum / type entries derived from property ts_type + allowedValues. | | get_required_scripts | Ordered CSS + JS module includes for a component, with optional feature sub-modules (e.g. ["edit","sort","filter"] for grid) and theme. | | list_demos | List shipped demo folders for a component, per framework. Frameworks: webcomponents, react, angular, vue. | | get_demo_code | Read the contents of a specific demo folder (returns every source file in it) or single demo file. | | list_documentation | List /documentation folders that cover the component (including framework-specific ones — angular-*, blazor-*, react-*, vue-*). | | get_documentation | Read a specific documentation file. | | generate_example | Emit a runnable example for webcomponents / react / angular / vue / blazor. |

Configuration (optional env vars)

| Variable | Default | Purpose | |---|---|---| | SMART_UI_REPO_ROOT | unset | Point at a local checkout of the Smart UI repo. Enables list_demos / get_demo_code / list_documentation / get_documentation and live (not snapshotted) feature/theme discovery. | | SMART_UI_SCRIPTS_PREFIX | ../../../source/ | Path prefix injected into generated <script> / <link> tags. Match this to where you serve Smart UI from in your project. | | SMART_UI_REACT_PACKAGE | smart-webcomponents-react | npm package name used in generated React imports. | | SMART_UI_ANGULAR_PACKAGE | smart-webcomponents-angular | npm package name used in generated Angular imports. | | SMART_UI_VUE_PACKAGE | smart-webcomponents | npm package name used in generated Vue imports. |

Worked example

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

Use the smart-ui MCP server. Build me a runnable HTML page with a sortable, filterable, pageable smart-grid bound to a 10-row JSON array of employees, theme fluent.

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: "fluent" → get the right <script type="module"> / <link> tags.
4. Call generate_example with framework: "webcomponents" → receive a complete HTML file.

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

Local development

# clone the repo, then:
npm install

# rebuild the bundled snapshot from a Smart UI checkout
SMART_UI_REPO_ROOT=/path/to/Team npm run build-data

# run the smoke tests
SMART_UI_REPO_ROOT=/path/to/Team npm test

# run the server interactively over stdio (for manual MCP probing)
npm start

License

Use of this package requires a valid Smart UI / Smart HTML Elements license. Trial use is permitted for evaluation. See LICENSE and https://www.htmlelements.com/license/.