Smart UI MCP Server – AI Coding Assistant
Generate Smart UI code instantly with 70+ categorized prompts for Grid, Table, Chart, Gantt, Calendar, Tree, Menu, and more.
Powerful AI Use Cases for Smart UI Development
Quickly scaffold Smart UI components — Grid, Chart, Form — to jumpstart your project and accelerate MVP development.
Fine-tune properties like paging, filtering, themes, or localization. Complex setups may need manual review for production.
Generate realistic mock data and bind it to components for prototyping. Never use real customer data.
Break down generated code with clear comments and logic flow. Deepen your understanding via official docs.
Fix common issues: binding errors, event handling, styling. Escalate complex bugs to support.
Apply dark mode, custom CSS variables, or match your brand's design system across all Smart UI components.
Ensure ARIA labels, keyboard navigation, and screen reader support are correctly implemented.
Optimize virtualized grids, lazy loading, and reduce bundle size for large datasets.
Generate localized labels, date formats, and RTL support for global applications.
Convert old jQuery UI or custom widgets into modern Smart UI components with minimal rework.
What You Can Do With Smart UI MCP Server
Ask AI about Smart UI components
Get instant answers about widgets, properties, events, and APIs.
Generate Smart UI code examples
Automatically create ready-to-use component code with best practices.
Integrate with modern IDEs
Works seamlessly with VS Code, Cursor, Zed, and other MCP clients.
Connect to any AI model
Azure OpenAI, OpenAI, Ollama, Anthropic, Gemini, Grok, and more.
Smarter autocompletion
Context-aware suggestions and refactoring powered by Smart UI docs.
Ideal for frontend developers
Perfect for Angular, React, JavaScript, and TypeScript projects.
Requirements
Minimum Setup
- A supported MCP client IDE such as VS Code, Zed, or Cursor
- API credentials for any supported AI model provider
- Node.js 18+
Installation & Setup
Add the server to your MCP-compatible IDE using the generic configuration below.
Generic MCP Configuration
| Setting | Value |
|---|---|
| Server name | smartdev |
| Type | stdio |
| Command | npx |
| Arguments | -y smart-mcp@latest |
VS Code (.vscode/mcp.json)
.vscode/mcp.json
{
"servers": {
"smartdev": {
"type": "stdio",
"command": "npx",
"args": ["-y", "smart-mcp@latest"],
"env": {
"OPENAI_API_KEY": "some key"
}
}
}
}This registers the server under the handle #smartdev. Rename the object key if you want a custom handle.
Cursor (.cursor/mcp.json)
.cursor/mcp.json
{
"mcpServers": {
"smartdev": {
"type": "stdio",
"command": "npx",
"args": ["-y", "smart-mcp@latest"],
"env": {
"OPENAI_API_KEY": "some key"
}
}
}
}Same behavior as VS Code, but using Cursor’s mcpServers field.
70+ AI Example Prompts – Categorized by Component
Use the #smartdev prefix in your IDE. All prompts are grouped with icons and colors.
Grid
Create a Grid about employees with data fields: id, name, position, salary. Enable sorting and paging.
Create a virtualized Smart Grid with 1M rows, lazy loading, and column pinning in Angular.
Build a Smart Grid with row grouping by category, aggregate totals (sum, avg), and expandable groups.
Implement a Grid with inline editing with validation, undo/redo, and real-time save to API.
In the Grid, Enable Excel/CSV export with custom filename, formatting, and hidden columns excluded.
Apply color-coded Grid cells based on value (red < 0, green > 1000) with tooltips.
Connect Grid to REST API with server-side paging, sorting, and filtering.
Convert flat Grid data into hierarchical TreeGrid with expand/collapse and lazy child loading.
Enable Grid row reordering via drag & drop with visual feedback and API sync.
Add checkbox selection to the Grid.
Apply dark theme to Grid with custom CSS variables and toggle button.
Table
Create a responsive Smart Table with horizontal scroll on mobile and fixed header.
Enable Table column sorting with visual indicators and multi-column sort.
Create a Table and add row add and remove buttons..
Apply alternating row colors to the Table.
Optimize table for printing with page breaks and headers.
Show friendly message and icon when table has no data.
Chart
Build a line chart with dummy data.
Create a bar + line chart with dual Y-axes.
Create a simple pie chart with sample data.
Add labels, arrows, and threshold lines to highlight data points.
Gantt
Create a Gantt with dummy data.
Highlight Gantt critical path in red with tooltip explanations.
Show planned vs actual timeline in the Gantt.
Export Gantt to multi-page PDF with headers and legends.
Scheduler
Create a Scheduler with Day, Week and Month views.
Create a Scheduler with recurring appointments (daily, weekly) with edit dialog and iCal export.
Show a Scheduler with multiple rooms/staff with color coding, availability, and conflict detection.
Switch between day/week/month and timeline view in the Scheduler.
Enable right-to-left layout in the Scheduler for Arabic with localized date format.
Tree
Create a basic Tree component.
Enable reordering Tree nodes with drop zones and validation.
Add Tree with tri-state checkboxes with parent-child sync.
Add search box to filter and highlight matching nodes in the Tree.
Generate a Tree with Right-click menu with add/edit/delete actions.
Technology Stack
| Protocol | Model Context Protocol |
| Runtime | Node.js 18+ |
| Transport | stdio |
| Supported AI Models | Azure OpenAI, OpenAI, Ollama, Anthropic, Gemini, Grok, Cohere |
Licensing
© 2025 jQWidgets Ltd.
Smart UI is a registered trademark of jQWidgets.
Usage requires a valid Smart UI license.
Purchase License