MCP server that provides efficient access to Syncfusion documentation, implementation guidelines, and code generation for Blazor
npm install @syncfusion/blazor-assistantSyncfusionBlazorAssistant 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:
@syncfusion/blazor-assistant
YOUR_API_KEY_FILE_PATH or YOUR_API_KEY in the configuration files with your generated key.
Syncfusion_API_Key_Path environment parameter. This approach is more secure as you don't expose the key directly in configuration files.
.txt or .key file
json
"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.
`json
"env": {
"Syncfusion_API_Key": "YOUR_API_KEY"
}
`
Below are setup instructions for popular MCP clients:
$3
* In Code Studio, open MCP Marketplace and navigate to the Custom Servers tab.
* Enter the Server Name as blazor-mcp, choose Server Type as npm package, and set the NPM Package name to @syncfusion/blazor-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.
$3
* To configure an MCP server for a specific workspace, you can create a .vscode/mcp.json file in your workspace folder.
`json
{
"servers": {
"syncfusion-blazor-assistant": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@syncfusion/blazor-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 SyncfusionBlazorAssistant server directly from the settings interface without additional commands.
* Confirm the server is active by checking for a message like: SyncfusionBlazorAssistant is running... in the output.
* For additional guidance, refer to the VS Code documentation.
$3
To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder.
`json
{
"mcpServers": {
"syncfusion-blazor-assistant": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@syncfusion/blazor-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.
$3
* 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:
`json
{
"mcpServers": {
"syncfusion-blazor-assistant": {
"command": "npx.cmd",
"args": [
"-y",
"@syncfusion/blazor-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
Usage
To activate the SyncfusionBlazorAssistant MCP server:
1. Start your prompt with one of the following:
* 'SyncfusionBlazorAssistant'
* '/syncfusion-blazor-assistant'
* '/syncfusion-blazor'
* '@syncfusion-blazor'
* '@ask_syncfusion_blazor'
* 'ej2-blazor'
In VS Code, use #SyncfusionBlazorAssistant 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.
$3
Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients.
$3
1. Be specific: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor 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 components or topics.