HelpBot Assistant

How can I help you?

Installing Syncfusion MCP Server

23 Feb 20266 minutes to read

Syncfusion® MCP Server provide AI-powered assistance for building React applications with Syncfusion components. This guide will help you install and configure the MCP server in your development environment.

Available Modes

The Syncfusion MCP Server offer two modes:

  • Agentic UI Builder – Complete toolkit for building user interfaces with Layout, Component, and Styling tools. Coordinates multi-step workflows automatically.
  • AI Coding Assistant – Provides contextual component documentation, code snippets, and configuration examples to accelerate development and reduce documentation lookups.

Prerequisites

Before you begin, ensure you have:

Getting your API Key

Obtain your Syncfusion API key before proceeding:

  1. Log in to your Syncfusion account
  2. Navigate to the API Key page
  3. Generate your API key
  4. Keep this key ready for configuration

Configuration Options:

  • Option 1: API Key File (Recommended)

    Store your API key in a separate file and reference its path in the Syncfusion_API_Key_Path environment parameter. This approach enhances security by keeping the key separate from configuration files.

    Supported formats: .txt or .key

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

  • Option 2: Direct API Key

    Set the key directly in the MCP configuration:

"env": {
  "Syncfusion_API_Key": "YOUR_API_KEY"
}

If both the key file and the environment variable are provided, the file path specified in Syncfusion_API_Key_Path takes priority.

Generic MCP Server Settings

All MCP clients require these standard settings for the Syncfusion MCP Server:

  • npm package name: @syncfusion/react-assistant
  • Type: stdio (standard input/output transport)
  • Command: npx
  • Arguments: -y
  • Server name: sf-react-mcp

Setting up in MCP Clients

Syncfusion MCP Server can be configured at two levels:

  • Global-level—Server is available across all projects in your IDE
  • Workspace-level—Server is available only for a specific project or workspace

The following sections provide detailed setup instructions for popular development environments.

Global Configuration

Configure the Syncfusion MCP Server globally to make it available across all workspaces in your IDE.

1. Click <a target="_blank" href="https://insiders.vscode.dev/redirect/mcp/install?name=sf-react-mcp&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40syncfusion%2Freact-assistant%40latest%22%5D%2C%22env%22%3A%7B%22Syncfusion_API_Key%22%3A%22YOUR_API_KEY%22%7D%7D">here</a> to open the installation link.
2. Replace `YOUR_API_KEY` with your actual Syncfusion API key.
3. Follow the prompts to complete the installation.

For more information, see the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers).
1. Click <a target="_blank" href="https://cursor.com/en/install-mcp?name=sf-react-mcp&config=eyJ0eXBlIjoic3RkaW8iLCJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBzeW5jZnVzaW9uL3JlYWN0LWFzc2lzdGFudEBsYXRlc3QiXSwiZW52Ijp7IlN5bmNmdXNpb25fQVBJX0tleV9QYXRoIjoiWU9VUl9BUElfS0VZX0ZJTEVfUEFUSCJ9fQ==">here</a> to open the installation link.
2. Update the `YOUR_API_KEY_FILE_PATH` with the path to your API key file.
3. Follow the prompts to complete the installation.

For more information, see the [Cursor MCP documentation](https://cursor.com/docs/context/mcp).
1. Open the [MCP Marketplace](https://www.syncfusion.com/code-studio/) in Code Studio.
2. Search for `Syncfusion React Assistant` and click **Install**.
3. Enter your [Syncfusion API key](https://syncfusion.com/account/api-key) when prompted.
4. The server installs and appears in the Installed list.

For more information, see the [Code Studio MCP documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/marketplace).

Workspace Configuration

Install the server for a specific project by creating a configuration file in your project folder.

Important: Replace YOUR_API_KEY_FILE_PATH or YOUR_API_KEY with your actual API key.

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

{
  "servers": {
    "sf-react-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@syncfusion/react-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-react-mcp": {
      "command": "npx",
      "args": ["-y", "@syncfusion/react-assistant@latest"],
      "env": {
        "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH"
        // or
        // "Syncfusion_API_Key": "YOUR_API_KEY"
      }
    }
  }
}

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

What’s Next

With the MCP server installed, explore the getting started guide for your chosen configuration:

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

Support

Product support is available through the following media.

See also