Skip to content

Commit 1fcd32b

Browse files
sabari-senthamaraikannansabari-senthamaraikannan
authored
Merge pull request #6609 from vigneshsivaji/development
980907: Need to update the ai-developer-tools documents
2 parents 255aeff + 2b9c2df commit 1fcd32b

File tree

4 files changed

+378
-0
lines changed

4 files changed

+378
-0
lines changed

‎blazor-toc.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,13 @@
8383
</li>
8484
</ul>
8585
</li>
86+
<li>AI Developer Tools
87+
<ul>
88+
<li><a href="/blazor/ai-developer-tools/overview">Overview</a></li>
89+
<li><a href="/blazor/ai-developer-tools/mcp-server">MCP Server</a></li>
90+
<li><a href="/blazor/ai-developer-tools/copilot-extension">Copilot Extension</a></li>
91+
</ul>
92+
</li>
8693
<li>Tutorials
8794
<ul>
8895
<li>

‎blazor/ai-developer-tools/copilot-extension.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
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+
11+
# SyncfusionBlazor GitHub Copilot Extension
12+
13+
## Overview
14+
15+
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.
16+
17+
### What is a GitHub Copilot Extension?
18+
19+
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.
20+
21+
### Key Benefits
22+
23+
* Smart code suggestions for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
24+
* Best practice guidance for component usage and configuration.
25+
* Context-aware troubleshooting for complex scenarios.
26+
27+
## Prerequisites
28+
29+
Before using this extension, ensure you have:
30+
31+
* [Github copilot](https://github.com/copilot/)
32+
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
33+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
34+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Community License](https://www.syncfusion.com/products/communitylicense)
35+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
36+
* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation)
37+
38+
## Unlimited Access
39+
40+
Syncfusion<sup style="font-size:70%">&reg;</sup> users enjoy completely unlimited access to this copilot extension. There are no restrictions on:
41+
42+
* No request limits
43+
* No component restrictions
44+
* No query type limitations
45+
* No usage duration constraints
46+
47+
We believe in providing unrestricted access to tools that enhance your development experience, ensuring you can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components without limitations.
48+
49+
## Installation
50+
51+
* Visit the [SyncfusionBlazor GitHub App](https://github.com/apps/syncfusionblazor) and click **Install**.
52+
* Grant the required read-access permissions to allow the extension to function with Copilot chat.
53+
* Click **Install & Authorize**.
54+
* Sign in with your Syncfusion<sup style="font-size:70%">&reg;</sup> account credentials to complete the authorization.
55+
56+
Based on the authorization, we will fetch the API key from your account and utilize it for response generation. After successful authentication, the extension will be integrated with your GitHub account.
57+
58+
Restart your apps and begin a new Copilot chat session to start using it.
59+
60+
## Getting Started
61+
62+
* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot.
63+
* In the chat prompt, type `@` and select the `SyncfusionBlazor` extension from the list.
64+
* Enter your query related to any Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component.
65+
66+
**Note:** When using this extension in VS Code, make sure you are in Ask mode and not in Edit or Agent mode. The Edit and Agent modes do not use the Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extension.
67+
68+
### Best Practices for Effective Usage
69+
70+
1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?").
71+
2. `Provide context`: Include details about your use case for more targeted solutions.
72+
3. `Use descriptive queries`: Avoid vague questions that lack necessary context.
73+
4. `Start fresh for new topics`: Begin a new chat session when switching components or topics.
74+
75+
## Example Queries
76+
77+
Here are some examples of queries you can use with the Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extensions:
78+
79+
* "@SyncfusionBlazor Create a Syncfusion data grid with paging and sorting"
80+
* "@SyncfusionBlazor How do I implement a responsive Syncfusion chart with tooltips?"
81+
* "@SyncfusionBlazor Show me a Syncfusion Kanban board implementation with drag and drop"
82+
83+
## Uninstallation
84+
85+
To remove the extension from your account:
86+
87+
* Go to [GitHub App Installations](https://github.com/settings/installations/).
88+
* Locate the `SyncfusionBlazor` extension in the list.
89+
* Click `Configure` and Select `Uninstall`.
90+
91+
## Support
92+
93+
* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
94+
* [Community forum](https://www.syncfusion.com/forums/essential-js2)
95+
* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript)
96+
* Live chat
97+
98+
## See also
99+
100+
* [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Documentation](https://blazor.syncfusion.com/documentation)
101+
* [Github Copilot Documentation](https://docs.github.com/en/copilot)

‎blazor/ai-developer-tools/mcp-server.md‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
---
2+
layout: post
3+
title: SyncfusionBlazorAssistant MCP Server | Syncfusion
4+
description: Learn how to configure and use SyncfusionBlazorAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Blazor apps.
5+
control: Getting started with SyncfusionBlazorAssistant MCP Server
6+
platform: Blazor
7+
documentation: ug
8+
---
9+
10+
# SyncfusionBlazorAssistant MCP Server
11+
12+
## Overview
13+
14+
The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This tool seamlessly integrates with compatible MCP clients to enhance your development workflow when building Blazor applications with Syncfusion<sup style="font-size:70%">&reg;</sup> components.
15+
16+
### Key Benefits
17+
18+
* Intelligent code generation for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
19+
* Detailed component documentation and usage examples.
20+
* Troubleshooting assistance for common integration challenges.
21+
22+
## Prerequisites
23+
24+
Before using [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant), ensure you have:
25+
26+
* Required [node](https://nodejs.org/en/) version >= 18
27+
* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio, VS Code with GitHub Copilot, etc.)
28+
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
29+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
30+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Community License](https://www.syncfusion.com/products/communitylicense)
31+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
32+
* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation)
33+
34+
## Unlimited Access
35+
36+
Syncfusion<sup style="font-size:70%">&reg;</sup> users enjoy completely unlimited access to this MCP server. There are no restrictions on:
37+
38+
* No request limits
39+
* No component restrictions
40+
* No query type limitations
41+
* No usage duration constraints
42+
43+
We believe in providing unrestricted access to tools that enhance your development experience, ensuring you can fully leverage Syncfusion components without limitations.
44+
45+
## Installation and setup
46+
47+
Before you can invoke the SyncfusionBlazorAssistant 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:
48+
49+
### Generic MCP Server Settings
50+
51+
- **npm package name**: `@syncfusion/blazor-assistant`
52+
- **Type**: stdio (standard input/output transport)
53+
- **Command**: npx
54+
- **Arguments**: -y
55+
- **Server name**: syncfusionBlazorAssistant
56+
57+
You need to add your [Syncfusion API key](https://staging.syncfusion.com/account/user-token-generation) as an env parameter in the configuration file:
58+
59+
```json
60+
"env": {
61+
"Syncfusion_API_Key": "YOUR_API_KEY"
62+
}
63+
```
64+
65+
[SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment:
66+
67+
### Syncfusion<sup style="font-size:70%">&reg;</sup> Code Studio
68+
69+
* Install directly from the [Syncfusion Code Studio](https://www.syncfusion.com/code-studio/) MCP Marketplace.
70+
* Start the server and grant permission when prompted.
71+
72+
### VS Code (GitHub Copilot MCP)
73+
74+
1. To configure an MCP server for a specific workspace, you can create a `.vscode/mcp.json` file in your workspace folder.
75+
76+
```json
77+
{
78+
"servers": {
79+
"syncfusion-blazor-assistant": {
80+
"type": "stdio",
81+
"command": "npx",
82+
"args": [
83+
"-y",
84+
"@syncfusion/blazor-assistant@latest"
85+
],
86+
"env": {
87+
"Syncfusion_API_Key": "YOUR_API_KEY"
88+
}
89+
}
90+
}
91+
}
92+
```
93+
94+
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.
95+
96+
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:
97+
* `SyncfusionBlazorAssistant is running...` (in VS Code)
98+
99+
### Cursor
100+
101+
To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder.
102+
103+
```json
104+
{
105+
"mcpServers": {
106+
"syncfusion-blazor-assistant": {
107+
"type": "stdio",
108+
"command": "npx",
109+
"args": [
110+
"-y",
111+
"@syncfusion/blazor-assistant@latest"
112+
],
113+
"env": {
114+
"Syncfusion_API_Key": "YOUR_API_KEY"
115+
}
116+
}
117+
}
118+
}
119+
```
120+
121+
### JetBrains IDEs
122+
123+
1. Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP).
124+
2. Click + Add to add a new MCP server configuration.
125+
3. In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config:
126+
127+
```json
128+
{
129+
"mcpServers": {
130+
"syncfusion-blazor-assistant": {
131+
"command": "npx",
132+
"args": [
133+
"-y",
134+
"@syncfusion/blazor-assistant@latest"
135+
],
136+
"env": {
137+
"Syncfusion_API_Key": "YOUR_API_KEY"
138+
}
139+
}
140+
}
141+
}
142+
```
143+
144+
Click OK and Apply.
145+
146+
> For more detailed information about configuring MCP servers in various clients, refer to the official documentations.
147+
* [VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server)
148+
* [Cursor](https://docs.cursor.com/en/context/mcp#using-mcp-json)
149+
* [JetBrains](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server)
150+
* [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)
151+
152+
## Usage
153+
154+
To activate the SyncfusionBlazorAssistant MCP server:
155+
156+
1. Start your prompt with one of the following:
157+
* 'SyncfusionBlazorAssistant'
158+
* '/syncfusion-blazor-assistant'
159+
* '/syncfusion-blazor'
160+
* '@syncfusion-blazor'
161+
* '@ask_syncfusion_blazor'
162+
* 'ej2-blazor'
163+
164+
In VS Code, you can also use #SyncfusionBlazorAssistant to explicitly invoke the MCP server.
165+
166+
2. Grant the SyncfusionBlazorAssistant MCP server a permission to run for this session, workspace, or always.
167+
3. For best results, start a new chat for each new topic to maintain clean context.
168+
169+
### Best Practices for Effective Usage
170+
171+
1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?").
172+
2. `Provide context`: Include details about your use case for more targeted solutions.
173+
3. `Use descriptive queries`: Avoid vague questions that lack necessary context.
174+
4. `Start fresh for new topics`: Begin a new chat session when switching components or topics.
175+
176+
### Example Queries
177+
178+
Here are some effective ways to use [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant):
179+
180+
* "Create a Syncfusion Blazor Grid component with paging, sorting and filtering"
181+
* "How do I implement data binding with Syncfusion Blazor scheduler?"
182+
* "Show me how to create a dashboard with multiple Syncfusion components"
183+
184+
## Troubleshooting
185+
186+
If you encounter issues:
187+
188+
* Verify your API key is correctly configured.
189+
* Ensure the MCP server is enabled in your client's tools selection.
190+
* Check that you're using a compatible MCP client version.
191+
* Try restarting your development environment.
192+
193+
## Support
194+
195+
Product support is available through the following mediums.
196+
197+
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
198+
* [Community forum](https://www.syncfusion.com/forums/essential-js2)
199+
* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript)
200+
* Live chat
201+
202+
## See also
203+
204+
* [Syncfusion Blazor Documentation](https://blazor.syncfusion.com/documentation)

‎blazor/ai-developer-tools/overview.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
layout: post
3+
title: Syncfusion AI Developer Tools Overview | Syncfusion
4+
description: Learn how Syncfusion AI Developer Tools boost Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance.
5+
control: Syncfusion AI Developer Tools Overview
6+
platform: Blazor
7+
documentation: ug
8+
---
9+
10+
# Syncfusion<sup style="font-size:70%">&reg;</sup> AI Developer Tools Overview
11+
12+
The **Syncfusion<sup style="font-size:70%">&reg;</sup> AI Developer Tools** is designed to streamline your development workflow when building Blazor applications with Syncfusion<sup style="font-size:70%">&reg;</sup> controls. It uses contextual knowledge of the Syncfusion<sup style="font-size:70%">&reg;</sup> component library to generate accurate code snippets, configuration examples, and guided explanations—so you spend less time searching docs and more time coding.
13+
14+
SyncfusionBlazor AI Developer Tools are:
15+
16+
* The SyncfusionBlazor MCP Server — Handles advanced prompts and delivers tailored code suggestions for MCP-compatible clients.
17+
* The SyncfusionBlazor GitHub Copilot Extension — Enhances Copilot with Syncfusion-specific support for quick component setup and guidance in your IDE.
18+
19+
## Getting Started
20+
21+
To use the SyncfusionBlazor AI Developer Tools, you need:
22+
23+
* A [Syncfusion<sup style="font-size:70%">&reg;</sup> user account](https://www.syncfusion.com/account)
24+
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
25+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
26+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Community License](https://www.syncfusion.com/products/communitylicense)
27+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
28+
* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation)
29+
* A [Blazor application that includes SyncfusionBlazor](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
30+
31+
## Unlimited Access
32+
33+
Syncfusion<sup style="font-size:70%">&reg;</sup> users enjoy completely unlimited access to Syncfusion<sup style="font-size:70%">&reg;</sup> AI Developer Tools. There are no restrictions on:
34+
35+
* No request limits
36+
* No component restrictions
37+
* No query type limitations
38+
* No usage duration constraints
39+
40+
We believe in providing unrestricted access to tools that enhance your development experience, ensuring you can fully leverage Syncfusion components without limitations.
41+
42+
## Best Practices
43+
44+
* Initial Setup: Use the assistant to quickly add and configure components.
45+
* Feature Tuning: Enable or disable component features through prompt-based configuration.
46+
* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data.
47+
* Step-by-step explanations: Use annotated code to understand component behavior (depends on the tool, mode, and model used). To further develop your knowledge, check the respective documentation.
48+
* Component-based styling: Utilize component-specific styles to override theme styles with custom selectors. For further customization, explore [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5.3) or [Figma UI kits](https://www.figma.com/@syncfusion).
49+
* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to documentation or support.
50+
* Session Management: Start fresh sessions when switching tasks to maintain prompt relevance.
51+
* Model Compatibility: For best results, use with models like GPT-5 or Claude Sonnet 4.
52+
53+
## Privacy & Data Handling
54+
55+
The Syncfusion<sup style="font-size:70%">&reg;</sup> AI Developer Tools is designed with privacy in mind:
56+
57+
* It does not access your project files or workspace directly.
58+
* We don’t store your prompts in any of the tools or for any other purpose.
59+
* Prompts are not used to train Syncfusion<sup style="font-size:70%">&reg;</sup> models.
60+
* The assistant generates context, not final responses—your selected AI model handles the output.
61+
62+
## See also
63+
64+
* Add the [SyncfusionBlazor MCP Server](./mcp-server.md) to an MCP-enabled client
65+
* Install the [SyncfusionBlazor GitHub Copilot Extension](./copilot-extension.md)
66+
* [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Documentation](https://blazor.syncfusion.com/documentation)

0 commit comments

Comments
 (0)