Syncfusion AI Assistant

How can I help you?

Getting Started with the AI Coding Assistant

11 Apr 20267 minutes to read

The Syncfusion® AI Coding Assistant is designed to streamline the development workflow for JavaScript applications that use Syncfusion® controls. It leverages contextual knowledge of the Syncfusion control library to generate code snippets, configuration examples, and guided explanations—reducing documentation lookups and increasing productivity.

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

Activate the AI Coding Assistant in your IDE by using the #sf_javascript_assistant command followed by your query:

#sf_javascript_assistant How do I enable paging and sorting in the Syncfusion JavaScript Grid?

Common Use Cases

Use Case Description Example Query
Control Generation Generate complete control implementations with configurations #sf_javascript_assistant Create a data grid with inline editing, paging, and toolbar options for CRUD operations
Feature Implementation Get specific feature implementations for existing controls #sf_javascript_assistant Add export to Excel functionality in my existing Grid control
Troubleshooting Resolve issues by describing the problem #sf_javascript_assistant Scheduler is not displaying events properly. What could be wrong with the data binding?
API Reference Quickly access API information #sf_javascript_assistant What are the available event arguments for the Grid's actionComplete event?

Best Practices

  1. Be Specific: Include platform and control (e.g., “Create a Syncfusion JavaScript Grid with paging and filtering”).
  2. Provide Context: Share versions, desired behavior, and constraints.
  3. Use Descriptive Queries: Avoid vague questions.
  4. Troubleshooting: Use AI suggestions for common issues; consult official documentation or support for complex problems.
  5. Start Fresh: Begin a new chat for new topics to maintain clean context.

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 AI Coding Assistant, explore these resources: