diff --git a/blazor-toc.html b/blazor-toc.html index e196f01733..5498f82919 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -148,11 +148,10 @@ -
  • AI Coding Assistants +
  • AI Coding Assistant
  • Smart (AI) Solutions diff --git a/blazor/ai-coding-assistants/copilot-extension.md b/blazor/ai-coding-assistants/copilot-extension.md index 623ec76ed3..1f04088e45 100644 --- a/blazor/ai-coding-assistants/copilot-extension.md +++ b/blazor/ai-coding-assistants/copilot-extension.md @@ -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® 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® 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® 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® 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® 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® Blazor components (e.g., configuration, implementation, or troubleshooting). - -### Mode availability in VS code - -Syncfusion® 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® 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® 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® 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® 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® 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® 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® 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® Blazor components (e.g., configuration, implementation, or troubleshooting). + +### Mode availability in VS code + +Syncfusion® 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® 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® Blazor Documentation](https://blazor.syncfusion.com/documentation) +* [Github Copilot Documentation](https://docs.github.com/en/copilot) \ No newline at end of file diff --git a/blazor/ai-coding-assistants/mcp-server.md b/blazor/ai-coding-assistants/mcp-server.md index 72a3ec2888..8cbc4fd59e 100644 --- a/blazor/ai-coding-assistants/mcp-server.md +++ b/blazor/ai-coding-assistants/mcp-server.md @@ -37,7 +37,7 @@ Syncfusion® offers unlimited access to this * Number of requests * Components usage -* Query types +* Query caps * Usage duration This ensures users can fully leverage Syncfusion® 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 } ``` -[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® 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 { @@ -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) @@ -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 { @@ -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" @@ -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 @@ -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 @@ -212,9 +211,9 @@ Syncfusion® 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 diff --git a/blazor/ai-coding-assistants/overview.md b/blazor/ai-coding-assistants/overview.md index 553faaae8e..bf3be87673 100644 --- a/blazor/ai-coding-assistants/overview.md +++ b/blazor/ai-coding-assistants/overview.md @@ -1,26 +1,24 @@ --- layout: post -title: Syncfusion AI Coding Assistants Overview | Syncfusion -description: Learn how Syncfusion AI Coding Assistants boost Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance. -control: Syncfusion AI Coding Assistants Overview +title: Syncfusion AI Coding Assistant Overview | Syncfusion +description: Learn how Syncfusion AI Coding Assistant boost Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistant Overview platform: Blazor documentation: ug --- -# Syncfusion® AI Coding Assistants Overview +# Syncfusion® AI Coding Assistant Overview -The **Syncfusion® AI Coding Assistants** are designed to streamline your development workflow when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. +The **Syncfusion® AI Coding Assistant** are designed to streamline your development workflow when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. -AI Coding Assistants: +AI Coding Assistant: * **The SyncfusionBlazorAssistant MCP Server** Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). -* **SyncfusionBlazor GitHub Copilot Extension** - Augments GitHub Copilot with Syncfusion-specific support for rapid component setup and contextual guidance in the IDE. ## Getting Started -To use the AI Coding Assistants, you need: +To use the AI Coding Assistant, you need: * A [Syncfusion® user account](https://www.syncfusion.com/account) * An active Syncfusion® license (any of the following): @@ -32,11 +30,11 @@ To use the AI Coding Assistants, you need: ## Unlimited Access -Syncfusion® offers unlimited access to the AI Coding Assistants, with no limitations on: +Syncfusion® offers unlimited access to the AI Coding Assistant, with no limitations on: * Number of requests * Components usage -* Query types +* Query caps * Usage duration This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. @@ -58,7 +56,7 @@ This ensures users can fully leverage Syncfusion® ## Privacy & Data Handling -The Syncfusion® AI Coding Assistants is designed with privacy in mind: +The Syncfusion® AI Coding Assistant is designed with privacy in mind: * The tools do not access your project files or workspace directly. * User prompts are not stored by any of the tools or used for any other purpose. @@ -67,6 +65,5 @@ The Syncfusion® AI Coding Assistants is des ## See also -* Add the [SyncfusionBlazor MCP Server](./mcp-server.md) to an MCP-enabled client -* Install the [SyncfusionBlazor GitHub Copilot Extension](./copilot-extension.md) -* [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation) \ No newline at end of file +* Add the [SyncfusionBlazorAssistant MCP Server](https://blazor.syncfusion.com/documentation/ai-coding-assistants/mcp-server) to an MCP-enabled client +* [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation) diff --git a/blazor/introduction.md b/blazor/introduction.md index f08a67399b..5a29d2b603 100644 --- a/blazor/introduction.md +++ b/blazor/introduction.md @@ -11,7 +11,7 @@ documentation: ug Syncfusion® Blazor Components is an enterprise-grade, native UI components library for creating Blazor WebAssembly and Blazor Server applications. Built specifically for Blazor, the components are lightweight, responsive, and touch-friendly to support modern web applications. -> **Ready to streamline your Syncfusion® Blazor development?** Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® Blazor development?** Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) ## How to best read this user guide