The SyncfusionTypeScriptAssistant is a specialized Model Context Protocol (MCP) server designed to enhance development with Syncfusion's TypeScript control libraries. It integrates seamlessly with MCP-compatible clients to provide intelligent assistance for building TypeScript applications with Syncfusion^® controls.

• Intelligent code generation for Syncfusion^® TypeScript controls.
• Detailed control documentation and usage examples.
• Troubleshooting assistance for common integration challenges.

Before using SyncfusionTypeScriptAssistant, ensure you have:

• Required node version >= 18
• A compatible MCP client (VS Code with GitHub Copilot, Syncfusion^® CodeStudio, etc.)
• An active Syncfusion^® license (any of the following):
  • Commercial License
  • Free Community License
  • Free Trial
• An active API KEY

Syncfusion^® offers unlimited access to this MCP server. There are no restrictions on:

• Number of requests
• Controls usage
• Query caps
• Usage duration

This ensures users can fully leverage Syncfusion^® controls to enhance their development experience without limitations.

Before you can invoke the SyncfusionTypeScriptAssistant MCP server, you need to configure your MCP client with these core settings. The Generic MCP Server Settings shown below are identical across all clients:

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

Login to your Syncfusion account and generate an API Key from the API Key page. Replace YOUR_API_KEY_FILE_PATH or YOUR_API_KEY in the configuration files with your generated key.

There are two options:

• Using an 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 is more secure as you don't expose the key directly in configuration files.

  Supported file formats: .txt or .key file

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

• Direct API Key

  Paste your Syncfusion_API_Key directly in the configuration file's environment parameter.

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

Below are setup instructions for popular MCP clients:

• In Code Studio, open MCP Marketplace and navigate to the Custom Servers tab.
• Enter the Server Name as typescript-mcp, choose Server Type as npm package, and set the NPM Package name to @syncfusion/typescript-assistant.
• Add an environment variable as Syncfusion_API_Key and value as your Syncfusion API key, then click Install Server.
• Once installed, the server will appear in the User Installed Server list, and will be added to the config.yaml file.
• The server is now ready for use in Code Studio. For more details, refer to the Code Studio documentation.

• To configure an MCP server for a specific workspace, you can create a .vscode/mcp.json file in your workspace folder.

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

• After updating the configuration in mcp.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the SyncfusionTypeScriptAssistant server directly from the settings interface without additional commands.

• Confirm the server is active by checking for a message like: SyncfusionTypeScriptAssistant is running... in the output.

• For additional guidance, refer to the VS Code documentation.

To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder.

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

For more details, refer to the Cursor documentation.

• Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP).
• Click + Add to add a new MCP server configuration.
• In the New MCP Server dialog, switch the dropdown as As JSON and add the following config:

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

• Click OK and Apply.

For further assistance, see the JetBrains documentation.

For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., Windsurf

To activate the SyncfusionTypeScriptAssistant MCP server:

1. Start your prompt with one of the following:

   • 'SyncfusionTypeScriptAssistant'
   • '/syncfusion-typescript-assistant'
   • '/syncfusion-typescript'
   • '@syncfusion-typescript'
   • '@ask_syncfusion_typescript'
   • 'ej2-typescript'

   In VS Code, use #SyncfusionTypeScriptAssistant for direct invocation.

2. Grant permission for the server to run (for the session, workspace, or always).

3. For best results, start a new chat for each new topic to maintain clean context.

Syncfusion^® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients.

1. Be specific: Mention both platform and control (e.g., "How do I create a Syncfusion TypeScript Grid with paging and filtering?").
2. Provide context: Include details about your use case for more targeted solutions.
3. Use descriptive queries: Avoid vague questions that lack necessary context.
4. Start fresh for new topics: Begin a new chat session when switching controls or topics.

Here are some effective ways to use SyncfusionTypeScriptAssistant:

• "Create a Syncfusion TypeScript Grid control with paging, sorting and filtering."
• "How do I implement data binding with Syncfusion TypeScript scheduler?"
• "Show me how to create a dashboard with multiple Syncfusion controls."

If you encounter issues:

• Verify your API key is correctly configured.
• Ensure the MCP server is enabled in your client's tools selection.
• Check that you're using a compatible MCP client version.
• Try restarting your development environment.

Product support is available through the following mediums.

• Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
• Community forum
• Request feature or report bug
• Live chat

This is a commercial product and requires a paid license for possession or use. Syncfusion^® licensed software, including this control, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license, you can purchase here or start a free 30-day trial here. A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. © Copyright 2025 Syncfusion^® Inc. All Rights Reserved. The Syncfusion^® Essential Studio^® license and copyright applies to this distribution. The Syncfusion^® Essential^® Studio license and copyright applies to this distribution.