How can I use @SyncfusionBlazor in Visual Studio and VS Code

[Uwe Hein]

I installed Copilot Extension according your description in  SyncfusionBlazor GitHub Copilot Extension | Syncfusion. After "Install & Authorize" there was no chance to sign in with syncfusion - I immediately got the message, that I can use the extension in Copilot Chat.

Trying to do this in Visual studio or VS Code I get: 

Authentication required: You need to authenticate with your Syncfusion account to use this extension. Uninstall and reinstall the extension, then sign in during setup to access it.

Reinstalling the extension in github and reinstalling Copilot in Visual Studio did not help.

I am using Win 11 pro german,  Visual Studio 22 community and Insiders (VS 26) and VS Code newest version. I have a GitHub Copilot Pro+ subscription and a valid syncfusion community key.

  What to do ?

    regards

        Uwe

[Deepika Arumugasamy]

Hi Uwe Hein,

We have reviewed the reported issue. The issue occurs due to the API key not being generated or retrieved properly during the setup process. The API key is essential for authenticating the extension and must be generated before installation to ensure seamless integration. Here's how to resolve this:

 

Steps to Fix the Authentication Issue

• Please ensure that the email address used for your Syncfusion account same as the email address of your GitHub account.
• Uninstall the extension in the github app section https://github.com/settings/installations
• Generate a new API key first by logging into your Syncfusion account at My Account - API Key | Syncfusion®
•  Reinstall the extension to resolve the issue. 

Important update on extension

Please note that the GitHub Copilot extension for Syncfusion AI Coding Assistants is currently being deprecated, and we are actively taking steps regarding this transition. We're excited to announce that we have implemented the AI Coding Assistant for the Blazor framework to simplify development with Syncfusion Blazor components. The assistant consists of the MCP server. Please find the documentation links below for your reference.

Blazor documentation: SyncfusionBlazorAssistant MCP Server | Syncfusion

 

We encourage you to try the assistant in your development workflow. If you need any further assistance, please feel free to reach out.


Regards,
Deepika

[Uwe Hein]

Hi  Deepika,

  this worked fine for VS Code. (changing the Github primary email) But I am also using Visual Studio insiders for MAUI Blazor Syncfusion development. Is there also a way to acticate the MCP Server access. Maybe another location to store mcp.json ?

   regards

      Uwe 

[Deepika Arumugasamy]

Hi Uwe Hein,

We have validated your reported query. Regarding the SyncfusionBlazorAssistant MCP Server setup in Visual Studio, please follow the steps below to configure it correctly:

 

1. Configure the MCP Server:
   - In your project’s root directory, create a .vs folder if it doesn’t exist.
   - Inside the .vs folder, create or edit the mcp.json file and add the following configuration, replacing YOUR_API_KEY with the API key

 

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

 

2. This mcp server will show in the agent mode tools option.

 

For additional details, refer to the documentation: https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022

 

We will make sure to include these details in our documentation for future reference. If you encounter any issues or need further assistance, please feel free to reach out.

Regards,
Deepika

[Uwe Hein]

Hi Deepica,

  I was partly wrong with VS Code. I could start the syncfusion-blazor-assistant with my mcp.json file in the .vscode folder. This file contains the generated API key in the env section. Clicking on Start in mcp.json turns to Running. So I thought I succseeded. But trying to use the server in the chat window by using @syncfusionblazor I get:   

An active Syncfusion API key is required to use this extension. Please visit https://syncfusion.com/account/api-key, sign in, and generate a new API key. Uninstall and reinstall the extension, then sign in during setup to access it.  

Do I have to create another syncfusion key ? I thought the one I have in mcp.json is used to start the server. What extension has to be removed. Where do I find it ? How do I uninstall it ? 

Concerning Visual Studio:

I copied the same mcp.json into the .vs folder. No success. The same error asking for a correct key. In the MS docs the file is called .mcp.json. Which is the correct name (with or without the dot at the beginning) ?

  regards

    Uwe

[Deepika Arumugasamy]

Hi Uwe Hein,

We understand that you are encountering an error indicating that an active Syncfusion API key is required, despite having configured the mcp.json file with your API key. The issue appears to be related to the use of the @syncfusionblazor tag, which may be invoking the GitHub Copilot extension instead of the MCP server. To correctly activate the SyncfusionBlazorAssistant MCP server, please use the #SyncfusionBlazorAssistant tag for MCP tool calling in both Visual Studio and VS Code. To activate the SyncfusionBlazorAssistant MCP server:

 

Start your prompt with one of the following:

• ‘SyncfusionBlazorAssistant’
• ‘/syncfusion-blazor-assistant’
• ‘/syncfusion-blazor’
• ‘@syncfusion-blazor’
• ‘@ask_syncfusion_blazor’
• ‘ej2-blazor’

In VS Code, you can also use #SyncfusionBlazorAssistant to explicitly invoke the MCP server. For detailed guidance on activating and using the SyncfusionBlazorAssistant MCP server, please refer to the documentation for more details: https://blazor.syncfusion.com/documentation/ai-coding-assistants/mcp-server#usage

 

Regarding your question about the file name (mcp.json vs .mcp.json) from the Microsoft documentation, the file name depends on your requirement. As provided in our previous update (mcp.json), this is specific to Visual Studio and loads the specified MCP servers only for a specific user and solution. This is the recommended location for the Visual Studio setup.

We hope this information helps. If you need any further assistance reach out to us.

Regards,
Deepika

[Uwe Hein]

Hi Deepica,

  thank you for your answer.  Using @ask_syncfusion_blazor tag in Visual Studio and #SyncfusionBlazorAssistant tag in VS Code did the trick.

   regards

     Uwe

[Deepika Arumugasamy]

Hi Uwe Hein,

You're welcome. Please get back to us if you need any further assistance. 

Regards,
Deepika