Smart UI MCP Server – AI-Powered Smart UI Integration for VS Code, Cursor & Zed

The Smart UI MCP Server brings the power of Smart UI directly into your AI-assisted IDE through the Model Context Protocol (MCP). It connects Smart UI documentation, components, and APIs with modern AI coding tools, enabling fast code generation and contextual help inside your editor.

This makes it easier than ever to build Smart UI + Angular applications using Copilot-style assistance.

🚀 What You Can Do With Smart UI MCP Server

✅ Ask AI questions about Smart UI components, widgets, and APIs ✅ Generate Smart UI code examples automatically ✅ Integrate Smart UI into VS Code, Cursor, Zed, and other MCP-compatible editors ✅ Connect to local or cloud AI models (Azure OpenAI, OpenAI, Ollama, Anthropic, Gemini, Mistral, Cohere, Grok, etc.) ✅ Use Smart UI context for smarter autocompletion and code refactoring

Ideal for frontend developers building web applications with Smart UI for Angular, React, JavaScript, or TypeScript.

🧩 Requirements

✅ Minimum Setup

A working Smart UI MCP Server needs:

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

✅ Generic MCP Configuration

| Setting | Value | | --------------- | --------------------- | | Server name | smart-mcp | | Type | stdio | | Command | npx | | Arguments | -y smart-mcp@latest |

🗝️ Environment Variables & Provider Configuration

The Smart UI MCP Server works with OpenAI, Grok, Gemini, Azure OpenAI, Anthropic, and local LLMs (Ollama / llama.cpp).

# ===================================================================
# 1. AZURE OPENAI (Default)
# ===================================================================
AZURE_OPENAI_KEY=
AZURE_OPENAI_ENDPOINT=
AZURE_OPENAI_DEPLOYMENT_NAME=gpt-5-mini
AZURE_OPENAI_EMBEDDING_DEPLOYMENT=text-embedding-ada-002

# ===================================================================
# 2. LOCAL LLMS (Ollama / Llama.cpp / LM Studio)
# ===================================================================
OLLAMA_BASE_URL=http://localhost:11434/v1
LOCAL_MODEL_NAME=llama3.1:8b
LLAMA_ENDPOINT=./models/Meta-Llama-3.1-8B-Instruct-Q5_K_M.gguf
USE_LOCAL=false

# ===================================================================
# 3. OTHER CLOUD PROVIDERS
# ===================================================================
OPENAI_API_KEY=
OPENAI_MODEL=gpt-4o-mini

ANTHROPIC_API_KEY=
ANTHROPIC_MODEL=claude-3-5-sonnet-20241022

GEMINI_API_KEY=
GEMINI_MODEL=gemini-1.5-flash

GROK_API_KEY=
GROK_MODEL=grok-4-fast-non-reasoning

# ===================================================================
# GLOBAL CONFIG
# ===================================================================
DEFAULT_PROVIDER=azure         # azure | openai | ollama | mistral | etc.
EMBEDDING_PROVIDER=azure
EMBEDDING_MODEL=text-embedding-ada-002
TEMPERATURE=0.7
MAX_TOKENS=4096
TOP_P=0.9

# ===================================================================
# SMART UI LICENSE
# ===================================================================
SMARTUI_LICENSE_PATH=THE_PATH_TO_YOUR_LICENSE_FILE
# or
SMARTUI_LICENSE=YOUR_LICENSE_KEY

✅ MCP Example: VS Code Copilot

Create a .vscode/mcp.json file:

{
  "servers": {
    "smartdev": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "smart-mcp@latest"],
      "env": {
        "DEFAULT_PROVIDER": "azure",
        "AZURE_OPENAI_KEY": "your_azure_key_here"
      }
    }
  }
}

✅ MCP Example: Cursor IDE

.cursor/mcp.json:

{
  "mcpServers": {
    "smartdev": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "smart-mcp@latest"],
      "env": {
        "DEFAULT_PROVIDER": "ollama",
        "USE_LOCAL": "true"
      }
    }
  }
}

🧭 How to Use the Smart UI MCP Server

Once enabled, simply start a prompt with:

#smartdev

Then ask for Smart UI help:

✅ “Create a Smart UI Grid with pagination and row editing.” ✅ “Show a Smart Tabs example inside a Smart Window.” ✅ “Generate a Smart UI TreeGrid with sorting and filtering.”

Your IDE will route the request through the Smart UI MCP Server and return Smart-UI-aware code and explanations.

🔧 Advanced Integration

Want Smart UI support without typing #smartdev each time?

Add custom repository instructions:

• GitHub Copilot Custom Instructions
• Cursor Context Rules

This tells your IDE to automatically use Smart UI context for every prompt.

🔍 Example Prompts for Developers

#smartdev
Generate an Angular Smart UI Grid with sorting, filtering, and paging enabled.

#smartdev
How do I bind a Smart UI Chart to an observable data source?

🧰 Technology Stack

• Protocol: Model Context Protocol
• Runtime: Node.js 18+
• Transport: stdio
• Supported AI Models: Azure OpenAI, OpenAI, Mistral, Grok, Anthropic, Gemini, Cohere, Ollama
• Frontend Frameworks: Smart UI for Angular, React, JavaScript

🧾 Licensing

© 2025 jQWidgets Ltd. Smart UI is a registered trademark of jQWidgets. Usage of the Smart UI MCP Server requires a valid Smart UI license.