Skip to content

986495: Need to update the ai-coding-assistant documents #6978

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 23, 2025
Merged

986495: Need to update the ai-coding-assistant documents #6978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4767737
986495: ai document updated
vigneshsivaji Oct 21, 2025
b19c0f3
986495: ai document updated
vigneshsivaji Oct 21, 2025
41ea8ea
986495: ai document updated
vigneshsivaji Oct 22, 2025
138c314
Merge branch 'development' into 986495-dev-new
vigneshsivaji Oct 22, 2025
fbc8798
986495: copilot doc updated
vigneshsivaji Oct 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,11 +148,10 @@
</li>
</ul>
</li>
<li>AI Coding Assistants
<li>AI Coding Assistant
<ul>
<li><a href="/blazor/ai-coding-assistants/overview">Overview</a></li>
<li><a href="/blazor/ai-coding-assistants/mcp-server">MCP Server</a></li>
<li><a href="/blazor/ai-coding-assistants/copilot-extension">Copilot Extension</a></li>
</ul>
</li>
<li>Smart (AI) Solutions
Expand Down
198 changes: 99 additions & 99 deletions blazor/ai-coding-assistants/copilot-extension.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,99 @@
---
layout: post
title: SyncfusionBlazor GitHub Copilot Extension | Syncfusion
description: Learn how the SyncfusionBlazor GitHub Copilot extension enhances your Blazor development with intelligent code suggestions, best practices, contextual guidance.
control: Getting started with SyncfusionBlazor copilot extension
platform: Blazor
documentation: ug
---

# SyncfusionBlazor GitHub Copilot Extension

## Overview

The [SyncfusionBlazor GitHub Copilot Extension](https://github.com/apps/syncfusionblazor) provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This extension seamlessly integrates with GitHub Copilot to enhance your development workflow.

### What is a GitHub Copilot Extension?

A GitHub Copilot extension enhances Copilot's capabilities by integrating specialized, third-party tools and knowledge directly into the chat interface. It allows Copilot to access specific data, APIs, and services—such as a component vendor's official documentation—to provide more accurate, context-aware, and relevant assistance for a developer's specific technology stack.

### Key Benefits

* Smart code suggestions for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
* Best practice guidance for component usage and configuration.
* Context-aware troubleshooting for complex scenarios.

## Prerequisites

Before using this extension, ensure you have:

* [Github copilot](https://github.com/copilot/)
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
* An active [API KEY](https://syncfusion.com/account/api-key)

## Unlimited Access

Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to this copilot extension. There are no restrictions on:

* Number of requests
* Components usage
* Query types
* Usage duration

This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components to enhance their development experience without limitations.

## Installation

* Visit the [SyncfusionBlazor GitHub App](https://github.com/apps/syncfusionblazor) and click **Install**.
* Grant the required read-access permissions to allow the extension to function with Copilot chat.
* Click **Install & Authorize**.
* Sign in with your Syncfusion<sup style="font-size:70%">&reg;</sup> account to authenticate and link the extension to your GitHub account. The API key is automatically retrieved upon successful authentication.
* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension.

## Getting Started

* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot.
* Type `@` in the chat prompt and select the `SyncfusionBlazor` from the list of extensions.
* Enter a query related to Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components (e.g., configuration, implementation, or troubleshooting).

### Mode availability in VS code

Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extension provide full access to all AI interaction modes — Ask, Edit, and Agent — when integrated with VS code.

### Best Practices for Effective Usage

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.

## Example Queries

Here are some examples of queries you can use with the Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extensions:

* "@SyncfusionBlazor Create a Syncfusion data grid with paging and sorting"
* "@SyncfusionBlazor How do I implement a responsive Syncfusion chart with tooltips?"
* "@SyncfusionBlazor Show me a Syncfusion Kanban board implementation with drag and drop"

## Uninstallation

To remove the extension from your account:

* Go to [GitHub App Installations](https://github.com/settings/installations/).
* Locate the `SyncfusionBlazor` extension in the list.
* Click `Configure`, then select `Uninstall`.

## Support

* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support
* [Community forum](https://www.syncfusion.com/forums/blazor-components)
* [Request feature or report bug](https://www.syncfusion.com/feedback/blazor-components)
* Live chat

## See also

* [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Documentation](https://blazor.syncfusion.com/documentation)
* [Github Copilot Documentation](https://docs.github.com/en/copilot)
---
layout: post
title: SyncfusionBlazor GitHub Copilot Extension | Syncfusion
description: Learn how the SyncfusionBlazor GitHub Copilot extension enhances your Blazor development with intelligent code suggestions, best practices, contextual guidance.
control: Getting started with SyncfusionBlazor copilot extension
platform: Blazor
documentation: ug
---
# SyncfusionBlazor GitHub Copilot Extension
## Overview
The [SyncfusionBlazor GitHub Copilot Extension](https://github.com/apps/syncfusionblazor) provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This extension seamlessly integrates with GitHub Copilot to enhance your development workflow.
### What is a GitHub Copilot Extension?
A GitHub Copilot extension enhances Copilot's capabilities by integrating specialized, third-party tools and knowledge directly into the chat interface. It allows Copilot to access specific data, APIs, and services—such as a component vendor's official documentation—to provide more accurate, context-aware, and relevant assistance for a developer's specific technology stack.
### Key Benefits
* Smart code suggestions for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
* Best practice guidance for component usage and configuration.
* Context-aware troubleshooting for complex scenarios.
## Prerequisites
Before using this extension, ensure you have:
* [Github copilot](https://github.com/copilot/)
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
* An active [API KEY](https://syncfusion.com/account/api-key)
## Unlimited Access
Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to this copilot extension. There are no restrictions on:
* Number of requests
* Components usage
* Query types
* Usage duration
This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components to enhance their development experience without limitations.
## Installation
* Visit the [SyncfusionBlazor GitHub App](https://github.com/apps/syncfusionblazor) and click **Install**.
* Grant the required read-access permissions to allow the extension to function with Copilot chat.
* Click **Install & Authorize**.
* Sign in with your Syncfusion<sup style="font-size:70%">&reg;</sup> account to authenticate and link the extension to your GitHub account. The API key is automatically retrieved upon successful authentication.
* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension.
## Getting Started
* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot.
* Type `@` in the chat prompt and select the `SyncfusionBlazor` from the list of extensions.
* Enter a query related to Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components (e.g., configuration, implementation, or troubleshooting).
### Mode availability in VS code
Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extension provide full access to all AI interaction modes — Ask, Edit, and Agent — when integrated with VS code.
### Best Practices for Effective Usage
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.
## Example Queries
Here are some examples of queries you can use with the Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extensions:
* "@SyncfusionBlazor Create a Syncfusion data grid with paging and sorting"
* "@SyncfusionBlazor How do I implement a responsive Syncfusion chart with tooltips?"
* "@SyncfusionBlazor Show me a Syncfusion Kanban board implementation with drag and drop"
## Uninstallation
To remove the extension from your account:
* Go to [GitHub App Installations](https://github.com/settings/installations/).
* Locate the `SyncfusionBlazor` extension in the list.
* Click `Configure`, then select `Uninstall`.
## Support
* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support
* [Community forum](https://www.syncfusion.com/forums/blazor-components)
* [Request feature or report bug](https://www.syncfusion.com/feedback/blazor-components)
* Live chat
## See also
* [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Documentation](https://blazor.syncfusion.com/documentation)
* [Github Copilot Documentation](https://docs.github.com/en/copilot)
55 changes: 27 additions & 28 deletions blazor/ai-coding-assistants/mcp-server.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to this

* Number of requests
* Components usage
* Query types
* Query caps
* Usage duration

This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components to enhance their development experience without limitations.
Expand All @@ -62,20 +62,19 @@ You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key
}
```

[SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment:
Below are setup instructions for popular MCP clients:

### Syncfusion<sup style="font-size:70%">&reg;</sup> Code Studio

* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace, find `SyncfusionBlazorAssistant`, and click Install.
* When prompted, enter your [Syncfusion API key](https://syncfusion.com/account/api-key) and click Submit to register.
* It installs locally on your machine and appears in the Installed list.
* The server is ready for use in Code Studio.

For additional details, see the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/marketplace).
* In [Code Studio](https://www.syncfusion.com/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](https://syncfusion.com/account/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](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers#npm-server).

### Visual Studio Code (GitHub Copilot MCP)

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

```json
{
Expand All @@ -95,10 +94,11 @@ For additional details, see the Code Studio [documentation](https://help.syncfus
}
```

2. After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) server directly from the settings interface without additional commands.
* After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) 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.

3. Confirm that [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is being used (this does not happen automatically). Look for a statement in the output, which is similar to:
* `SyncfusionBlazorAssistant is running...` (in Visual Studio Code)
* For additional guidance, refer to the [Visual Studio Code documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server).

### Visual Studio (GitHub Copilot MCP)

Expand Down Expand Up @@ -126,10 +126,9 @@ For additional details, see the Code Studio [documentation](https://help.syncfus
* Select the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) from the tools section.
* For more details, refer to the official [Visual Studio documentation](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022).


### Cursor

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

```json
{
Expand All @@ -149,17 +148,19 @@ To configure an MCP server for a specific workspace, you can create a .cursor/mc
}
```

For more details, refer to the [Cursor documentation](https://cursor.com/docs/context/mcp#using-mcp-json).

### JetBrains IDEs

1. Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP).
2. Click + Add to add a new MCP server configuration.
3. In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config:
* 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",
"command": "npx.cmd",
"args": [
"-y",
"@syncfusion/blazor-assistant@latest"
Expand All @@ -172,13 +173,11 @@ To configure an MCP server for a specific workspace, you can create a .cursor/mc
}
```

4. Click OK and Apply.
* Click OK and Apply.

For further assistance, see the [JetBrains documentation](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server).

> For more detailed information about configuring MCP servers in various clients, refer to the official documentations.
* [Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server)
* [Cursor](https://cursor.com/docs/context/mcp#using-mcp-json)
* [JetBrains](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server)
* [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)
> For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)

## Usage

Expand All @@ -192,9 +191,9 @@ To activate the SyncfusionBlazorAssistant MCP server:
* '@ask_syncfusion_blazor'
* 'ej2-blazor'

In Visual Studio Code, you can also use #SyncfusionBlazorAssistant to explicitly invoke the MCP server.
In Visual Studio Code, use `#SyncfusionBlazorAssistant` for direct invocation.

2. Grant the SyncfusionBlazorAssistant MCP server a permission to run for this session, workspace, or always.
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.

### Mode availability
Expand All @@ -212,9 +211,9 @@ Syncfusion<sup style="font-size:70%">&reg;</sup> MCP Servers provide full access

Here are some effective ways to use [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant):

* "Create a Syncfusion Blazor Grid component with paging, sorting and filtering"
* "Create a Syncfusion Blazor Grid component with paging, sorting and filtering."
* "How do I implement data binding with Syncfusion Blazor scheduler?"
* "Show me how to create a dashboard with multiple Syncfusion components"
* "Show me how to create a dashboard with multiple Syncfusion components."

## Troubleshooting

Expand Down
Loading