Syncfusion AI Assistant

How can I help you?

Getting Started with Agentic UI Builder

11 Apr 20267 minutes to read

The Syncfusion® JavaScript UI Builder uses AI to help you build JavaScript applications with natural language commands. Simply describe what you want to create, and it generates complete UI implementations with Syncfusion controls.

Prerequisites

Before you begin, ensure you have:

Installation

This section guides you through installing and configuring the Syncfusion MCP Server in your development environment.

Getting your API Key

Before proceeding with the MCP installation, generate your Syncfusion API key from the API Key page and store it in a .txt or .key file:

"env": {
  "Syncfusion_API_Key_Path": "D:\\syncfusion-key.txt"
}

Users can also set the API key directly using "Syncfusion_API_Key": "YOUR_API_KEY" in the env configuration.

Setting up in MCP Clients

Create a configuration file in your project folder to install the server for your workspace as shown below:

Important: Replace YOUR_API_KEY_FILE_PATH with the path to your API key file.

// Create a `.vscode/mcp.json` file in your workspace with the MCP server configuration:

{
  "servers": {
    "sf-javascript-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@syncfusion/javascript-assistant@latest"],
      "env": {
        "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH"
        // or
        // "Syncfusion_API_Key": "YOUR_API_KEY"
      }
    }
  }
}
// Create a `.cursor/mcp.json` file in your workspace with the MCP server configuration:

{
  "mcpServers": {
    "sf-javascript-mcp": {
      "command": "npx",
      "args": ["-y", "@syncfusion/javascript-assistant@latest"],
      "env": {
        "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH"
        // or
        // "Syncfusion_API_Key": "YOUR_API_KEY"
      }
    }
  }
}
// Create a `.codestudio/mcp.json` file in your workspace with the MCP server configuration:

{
  "servers": {
    "sf-javascript-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@syncfusion/javascript-assistant@latest"],
      "env": {
        "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH"
        // or
        // "Syncfusion_API_Key": "YOUR_API_KEY"
      }
    }
  }
}

// After creating the file, click Start in the inline action to install the server.
// Open AI Assistant chat, type /, and select Add Command
// Click ➕ Add on the MCP settings page
// Choose STDIO and select JSON configuration

{
  "mcpServers": {
    "sf-javascript-mcp": {
      "command": "npx.cmd",
      "args": [
        "-y",
        "@syncfusion/javascript-assistant@latest"
      ],
      "env": {
        "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH"
        // or
        // "Syncfusion_API_Key": "YOUR_API_KEY"
      }
    }
  }
}

// Click OK, then click Apply. The server starts and shows Connected status.

Verify Installation: Check your editor’s MCP Server list for sf-javascript-mcp with “Connected” status to confirm successful installation.

Usage

Once installed, open your AI assistant in the IDE and describe what you want to build with the #sf_javascript_ui_builder command:

#sf_javascript_ui_builder Create a dashboard with a sales data grid and monthly trend chart.

The UI Builder generates complete implementations including controls and styling.

Note: Using the #sf_javascript_ui_builder tool ensures the Agentic UI Builder is invoked directly. Alternatively, you can use natural language without the tool—just make sure to include the “Syncfusion” keyword in your prompt so the AI model can automatically recognize and call the appropriate generator.

Individual Tools

For targeted assistance, you can call individual tools directly using their specific tool names. This is useful when you need specialized help from a particular tool.

Control Tool (#sf_javascript_control)

Provides quick reference guidelines for Syncfusion JavaScript controls, including properties, event handlers, methods, and usage examples.

When to use: To get basic control API information and structure details for implementing specific controls correctly.

Example:

#sf_javascript_control How do I integrate a data table?

Style Tool (#sf_javascript_style)

Provides theme configuration, styling setup, and icon integration for Syncfusion JavaScript controls. Supports multiple themes (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), light/dark mode implementation, and icon patterns for consistent UI styling.

When to use: To apply themes, customize colors, modify the visual design of controls, or integrate icons into your UI.

Example:

#sf_javascript_style How do I apply the Syncfusion Tailwind 3 dark theme and add a communication icon inside a button?

Best Practices

To maximize the effectiveness of the Agentic UI Builder and achieve optimal results:

  • Minimize active tools: Limit the number of active MCP tools in your IDE to prevent tool-selection ambiguity and improve response accuracy.
  • Start simple: Begin with straightforward prompts and progressively add complexity as needed.
  • Be specific: Provide clear, specific descriptions of your control behavior and design preferences.
  • Reference patterns: Mention existing design systems, control libraries, or specific patterns you want to replicate.
  • Stay consistent: Maintain consistent file organization, naming conventions, and coding standards throughout your JavaScript project.
  • Use advanced AI models: For best results, use Claude Sonnet 4.5 or higher models. Other compatible models include GPT-5 and Gemini 3 Pro. Higher-capability models produce better code quality and more accurate control implementations.

Always review AI-generated code before using it in production.

Troubleshooting

If you encounter issues during installation or while using the MCP server, refer to the solutions below:

Issue Solution
Clear npm cache Run npx clear-npx-cache and restart your IDE to resolve package caching issues
Server failed to start Update to Node.js 18+, verify JSON syntax in config file, and restart your IDE
Invalid API key Verify your key is active at Syncfusion Account Page
Incorrect API key config For the file path: Verify file location and content. For inline key: Check key is properly updated
Wrong config file location VS Code: .vscode/mcp.json
CodeStudio: .codestudio/mcp.json
Cursor: .cursor/mcp.json in the workspace root
Check IDE logs VS Code/CodeStudio: Output panel → “MCP” • Cursor: Developer Console for MCP errors

What’s Next

Now that you’ve set up the Agentic UI Builder, explore these resources: