Skip to content

Commit 2542491

Browse files
Merge pull request #6978 from vigneshsivaji/986495-dev-new
986495: Need to update the ai-coding-assistant documents
2 parents 35e73eb + fbc8798 commit 2542491

File tree

5 files changed

+140
-145
lines changed

5 files changed

+140
-145
lines changed

blazor-toc.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,11 +148,10 @@
148148
</li>
149149
</ul>
150150
</li>
151-
<li>AI Coding Assistants
151+
<li>AI Coding Assistant
152152
<ul>
153153
<li><a href="/blazor/ai-coding-assistants/overview">Overview</a></li>
154154
<li><a href="/blazor/ai-coding-assistants/mcp-server">MCP Server</a></li>
155-
<li><a href="/blazor/ai-coding-assistants/copilot-extension">Copilot Extension</a></li>
156155
</ul>
157156
</li>
158157
<li>Smart (AI) Solutions
Lines changed: 99 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,99 @@
1-
---
2-
layout: post
3-
title: SyncfusionBlazor GitHub Copilot Extension | Syncfusion
4-
description: Learn how the SyncfusionBlazor GitHub Copilot extension enhances your Blazor development with intelligent code suggestions, best practices, contextual guidance.
5-
control: Getting started with SyncfusionBlazor copilot extension
6-
platform: Blazor
7-
documentation: ug
8-
---
9-
10-
# SyncfusionBlazor GitHub Copilot Extension
11-
12-
## Overview
13-
14-
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.
15-
16-
### What is a GitHub Copilot Extension?
17-
18-
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.
19-
20-
### Key Benefits
21-
22-
* Smart code suggestions for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
23-
* Best practice guidance for component usage and configuration.
24-
* Context-aware troubleshooting for complex scenarios.
25-
26-
## Prerequisites
27-
28-
Before using this extension, ensure you have:
29-
30-
* [Github copilot](https://github.com/copilot/)
31-
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
32-
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
33-
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
34-
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
35-
* An active [API KEY](https://syncfusion.com/account/api-key)
36-
37-
## Unlimited Access
38-
39-
Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to this copilot extension. There are no restrictions on:
40-
41-
* Number of requests
42-
* Components usage
43-
* Query types
44-
* Usage duration
45-
46-
This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components to enhance their development experience without limitations.
47-
48-
## Installation
49-
50-
* Visit the [SyncfusionBlazor GitHub App](https://github.com/apps/syncfusionblazor) and click **Install**.
51-
* Grant the required read-access permissions to allow the extension to function with Copilot chat.
52-
* Click **Install & Authorize**.
53-
* 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.
54-
* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension.
55-
56-
## Getting Started
57-
58-
* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot.
59-
* Type `@` in the chat prompt and select the `SyncfusionBlazor` from the list of extensions.
60-
* Enter a query related to Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components (e.g., configuration, implementation, or troubleshooting).
61-
62-
### Mode availability in VS code
63-
64-
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.
65-
66-
### Best Practices for Effective Usage
67-
68-
1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?").
69-
2. `Provide context`: Include details about your use case for more targeted solutions.
70-
3. `Use descriptive queries`: Avoid vague questions that lack necessary context.
71-
4. `Start fresh for new topics`: Begin a new chat session when switching components or topics.
72-
73-
## Example Queries
74-
75-
Here are some examples of queries you can use with the Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extensions:
76-
77-
* "@SyncfusionBlazor Create a Syncfusion data grid with paging and sorting"
78-
* "@SyncfusionBlazor How do I implement a responsive Syncfusion chart with tooltips?"
79-
* "@SyncfusionBlazor Show me a Syncfusion Kanban board implementation with drag and drop"
80-
81-
## Uninstallation
82-
83-
To remove the extension from your account:
84-
85-
* Go to [GitHub App Installations](https://github.com/settings/installations/).
86-
* Locate the `SyncfusionBlazor` extension in the list.
87-
* Click `Configure`, then select `Uninstall`.
88-
89-
## Support
90-
91-
* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support
92-
* [Community forum](https://www.syncfusion.com/forums/blazor-components)
93-
* [Request feature or report bug](https://www.syncfusion.com/feedback/blazor-components)
94-
* Live chat
95-
96-
## See also
97-
98-
* [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Documentation](https://blazor.syncfusion.com/documentation)
99-
* [Github Copilot Documentation](https://docs.github.com/en/copilot)
1+
---
2+
layout: post
3+
title: SyncfusionBlazor GitHub Copilot Extension | Syncfusion
4+
description: Learn how the SyncfusionBlazor GitHub Copilot extension enhances your Blazor development with intelligent code suggestions, best practices, contextual guidance.
5+
control: Getting started with SyncfusionBlazor copilot extension
6+
platform: Blazor
7+
documentation: ug
8+
---
9+
10+
# SyncfusionBlazor GitHub Copilot Extension
11+
12+
## Overview
13+
14+
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.
15+
16+
### What is a GitHub Copilot Extension?
17+
18+
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.
19+
20+
### Key Benefits
21+
22+
* Smart code suggestions for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
23+
* Best practice guidance for component usage and configuration.
24+
* Context-aware troubleshooting for complex scenarios.
25+
26+
## Prerequisites
27+
28+
Before using this extension, ensure you have:
29+
30+
* [Github copilot](https://github.com/copilot/)
31+
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
32+
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
33+
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
34+
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
35+
* An active [API KEY](https://syncfusion.com/account/api-key)
36+
37+
## Unlimited Access
38+
39+
Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to this copilot extension. There are no restrictions on:
40+
41+
* Number of requests
42+
* Components usage
43+
* Query types
44+
* Usage duration
45+
46+
This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components to enhance their development experience without limitations.
47+
48+
## Installation
49+
50+
* Visit the [SyncfusionBlazor GitHub App](https://github.com/apps/syncfusionblazor) and click **Install**.
51+
* Grant the required read-access permissions to allow the extension to function with Copilot chat.
52+
* Click **Install & Authorize**.
53+
* 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.
54+
* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension.
55+
56+
## Getting Started
57+
58+
* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot.
59+
* Type `@` in the chat prompt and select the `SyncfusionBlazor` from the list of extensions.
60+
* Enter a query related to Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components (e.g., configuration, implementation, or troubleshooting).
61+
62+
### Mode availability in VS code
63+
64+
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.
65+
66+
### Best Practices for Effective Usage
67+
68+
1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?").
69+
2. `Provide context`: Include details about your use case for more targeted solutions.
70+
3. `Use descriptive queries`: Avoid vague questions that lack necessary context.
71+
4. `Start fresh for new topics`: Begin a new chat session when switching components or topics.
72+
73+
## Example Queries
74+
75+
Here are some examples of queries you can use with the Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extensions:
76+
77+
* "@SyncfusionBlazor Create a Syncfusion data grid with paging and sorting"
78+
* "@SyncfusionBlazor How do I implement a responsive Syncfusion chart with tooltips?"
79+
* "@SyncfusionBlazor Show me a Syncfusion Kanban board implementation with drag and drop"
80+
81+
## Uninstallation
82+
83+
To remove the extension from your account:
84+
85+
* Go to [GitHub App Installations](https://github.com/settings/installations/).
86+
* Locate the `SyncfusionBlazor` extension in the list.
87+
* Click `Configure`, then select `Uninstall`.
88+
89+
## Support
90+
91+
* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support
92+
* [Community forum](https://www.syncfusion.com/forums/blazor-components)
93+
* [Request feature or report bug](https://www.syncfusion.com/feedback/blazor-components)
94+
* Live chat
95+
96+
## See also
97+
98+
* [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Documentation](https://blazor.syncfusion.com/documentation)
99+
* [Github Copilot Documentation](https://docs.github.com/en/copilot)

blazor/ai-coding-assistants/mcp-server.md

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to this
3737

3838
* Number of requests
3939
* Components usage
40-
* Query types
40+
* Query caps
4141
* Usage duration
4242

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

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

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

69-
* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace, find `SyncfusionBlazorAssistant`, and click Install.
70-
* When prompted, enter your [Syncfusion API key](https://syncfusion.com/account/api-key) and click Submit to register.
71-
* It installs locally on your machine and appears in the Installed list.
72-
* The server is ready for use in Code Studio.
73-
74-
For additional details, see the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/marketplace).
69+
* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace and navigate to the `Custom Servers` tab.
70+
* Enter the Server Name as `blazor-mcp`, choose Server Type as npm package, and set the NPM Package name to `@syncfusion/blazor-assistant`.
71+
* 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**.
72+
* Once installed, the server will appear in the User Installed Server list, and will be added to the **config.yaml** file.
73+
* 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).
7574

7675
### Visual Studio Code (GitHub Copilot MCP)
7776

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

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

98-
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.
97+
* 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.
98+
99+
* Confirm the server is active by checking for a message like: `SyncfusionBlazorAssistant is running...` in the output.
99100

100-
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:
101-
* `SyncfusionBlazorAssistant is running...` (in Visual Studio Code)
101+
* For additional guidance, refer to the [Visual Studio Code documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server).
102102

103103
### Visual Studio (GitHub Copilot MCP)
104104

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

129-
130129
### Cursor
131130

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

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

151+
For more details, refer to the [Cursor documentation](https://cursor.com/docs/context/mcp#using-mcp-json).
152+
152153
### JetBrains IDEs
153154

154-
1. Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP).
155-
2. Click + Add to add a new MCP server configuration.
156-
3. In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config:
155+
* Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP).
156+
* Click + Add to add a new MCP server configuration.
157+
* In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config:
157158

158159
```json
159160
{
160161
"mcpServers": {
161162
"syncfusion-blazor-assistant": {
162-
"command": "npx",
163+
"command": "npx.cmd",
163164
"args": [
164165
"-y",
165166
"@syncfusion/blazor-assistant@latest"
@@ -172,13 +173,11 @@ To configure an MCP server for a specific workspace, you can create a .cursor/mc
172173
}
173174
```
174175

175-
4. Click OK and Apply.
176+
* Click OK and Apply.
177+
178+
For further assistance, see the [JetBrains documentation](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server).
176179

177-
> For more detailed information about configuring MCP servers in various clients, refer to the official documentations.
178-
* [Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server)
179-
* [Cursor](https://cursor.com/docs/context/mcp#using-mcp-json)
180-
* [JetBrains](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server)
181-
* [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)
180+
> 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)
182181
183182
## Usage
184183

@@ -192,9 +191,9 @@ To activate the SyncfusionBlazorAssistant MCP server:
192191
* '@ask_syncfusion_blazor'
193192
* 'ej2-blazor'
194193

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

197-
2. Grant the SyncfusionBlazorAssistant MCP server a permission to run for this session, workspace, or always.
196+
2. Grant permission for the server to run (for the session, workspace, or always).
198197
3. For best results, start a new chat for each new topic to maintain clean context.
199198

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

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

215-
* "Create a Syncfusion Blazor Grid component with paging, sorting and filtering"
214+
* "Create a Syncfusion Blazor Grid component with paging, sorting and filtering."
216215
* "How do I implement data binding with Syncfusion Blazor scheduler?"
217-
* "Show me how to create a dashboard with multiple Syncfusion components"
216+
* "Show me how to create a dashboard with multiple Syncfusion components."
218217

219218
## Troubleshooting
220219

0 commit comments

Comments
 (0)