diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 5f7a6c4ca..a45da6bcc 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -20,11 +20,11 @@
  • -AI Developer Tools +AI Coding Assistants
  • diff --git a/ej2-react/ai-developer-tools/copilot-extension.md b/ej2-react/ai-coding-assistants/copilot-extension.md similarity index 98% rename from ej2-react/ai-developer-tools/copilot-extension.md rename to ej2-react/ai-coding-assistants/copilot-extension.md index d59e34e51..37d3b4b13 100644 --- a/ej2-react/ai-developer-tools/copilot-extension.md +++ b/ej2-react/ai-coding-assistants/copilot-extension.md @@ -1,100 +1,100 @@ ---- -layout: post -title: SyncfusionReact GitHub Copilot Extension | Syncfusion -description: Learn how the SyncfusionReact GitHub Copilot extension enhances your React development with intelligent code suggestions, best practices, contextual guidance. -control: Getting started with SyncfusionReact copilot extension -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# SyncfusionReact GitHub Copilot Extension - -## Overview - -The [SyncfusionReact GitHub Copilot Extension](https://github.com/apps/syncfusionreact) provides intelligent assistance for developers using Syncfusion's React 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® React 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 [SyncfusionReact GitHub App](https://github.com/apps/syncfusionreact) 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 `SyncfusionReact` from the list of extensions. -* Enter a query related to Syncfusion® React 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 React 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: - -* "@SyncfusionReact Create a Syncfusion data grid with paging and sorting" -* "@SyncfusionReact How do I implement a responsive Syncfusion chart with tooltips?" -* "@SyncfusionReact 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 `SyncfusionReact` 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/essential-js2) -* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) -* Live chat - -## See also - -* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) -* [Github Copilot Documentation](https://docs.github.com/en/copilot) +--- +layout: post +title: SyncfusionReact GitHub Copilot Extension | Syncfusion +description: Learn how the SyncfusionReact GitHub Copilot extension enhances your React development with intelligent code suggestions, best practices, contextual guidance. +control: Getting started with SyncfusionReact copilot extension +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# SyncfusionReact GitHub Copilot Extension + +## Overview + +The [SyncfusionReact GitHub Copilot Extension](https://github.com/apps/syncfusionreact) provides intelligent assistance for developers using Syncfusion's React 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® React 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 [SyncfusionReact GitHub App](https://github.com/apps/syncfusionreact) 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 `SyncfusionReact` from the list of extensions. +* Enter a query related to Syncfusion® React 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 React 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: + +* "@SyncfusionReact Create a Syncfusion data grid with paging and sorting" +* "@SyncfusionReact How do I implement a responsive Syncfusion chart with tooltips?" +* "@SyncfusionReact 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 `SyncfusionReact` 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/essential-js2) +* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) +* Live chat + +## See also + +* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) +* [Github Copilot Documentation](https://docs.github.com/en/copilot) diff --git a/ej2-react/ai-developer-tools/mcp-server.md b/ej2-react/ai-coding-assistants/mcp-server.md similarity index 97% rename from ej2-react/ai-developer-tools/mcp-server.md rename to ej2-react/ai-coding-assistants/mcp-server.md index 57a3149c2..f30602407 100644 --- a/ej2-react/ai-developer-tools/mcp-server.md +++ b/ej2-react/ai-coding-assistants/mcp-server.md @@ -1,209 +1,209 @@ ---- -layout: post -title: SyncfusionReactAssistant MCP Server | Syncfusion -description: Learn how to configure and use SyncfusionReactAssistant MCP server for intelligent code generation, documentation, and troubleshooting in React apps. -control: Getting started with SyncfusionReactAssistant MCP Server -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# SyncfusionReactAssistant MCP Server - -## Overview - -The [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that provides intelligent assistance for developers using Syncfusion's React component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building React applications with Syncfusion® components. - -### Key Benefits - -* Intelligent code generation for Syncfusion® React components. -* Detailed component documentation and usage examples. -* Troubleshooting assistance for common integration challenges. - -## Prerequisites - -Before using [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant), ensure you have: - -* Required [node](https://nodejs.org/en/) version >= 18 -* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) -* 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 MCP server. 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 and setup - -Before you can invoke the `SyncfusionReactAssistant` 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: - -### Generic MCP Server Settings - -- **npm package name**: `@syncfusion/react-assistant` -- **Type**: stdio (standard input/output transport) -- **Command**: npx -- **Arguments**: -y -- **Server name**: syncfusionReactAssistant - -You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: - -```json -"env": { - "Syncfusion_API_Key": "YOUR_API_KEY" -} -``` - -[SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment: - -### Syncfusion® Code Studio - -* Install directly from the [Syncfusion Code Studio](https://www.syncfusion.com/code-studio/) MCP Marketplace. -* Start the server and grant permission when prompted. - -### VS 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. - -```json -{ - "servers": { - "syncfusion-react-assistant": { - "type": "stdio", - "command": "npx", - "args": [ - "-y", - "@syncfusion/react-assistant@latest" - ], - "env": { - "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} -``` - -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 [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) server directly from the settings interface without additional commands. - -3. Confirm that [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is being used (this does not happen automatically). Look for a statement in the output, which is similar to: - * `SyncfusionReactAssistant is running...` (in VS Code) - -### Cursor - -To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder. - -```json -{ - "mcpServers": { - "syncfusion-react-assistant": { - "type": "stdio", - "command": "npx", - "args": [ - "-y", - "@syncfusion/react-assistant@latest" - ], - "env": { - "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} -``` - -### 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: - -```json -{ - "mcpServers": { - "syncfusion-react-assistant": { - "command": "npx", - "args": [ - "-y", - "@syncfusion/react-assistant@latest" - ], - "env": { - "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} -``` - -4. Click OK and Apply. - -> For more detailed information about configuring MCP servers in various clients, refer to the official documentations. - * [VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) - * [Cursor](https://docs.cursor.com/en/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) - -## Usage - -To activate the SyncfusionReactAssistant MCP server: - -1. Start your prompt with one of the following: - * 'SyncfusionReactAssistant' - * '/syncfusion-react-assistant' - * '/syncfusion-react' - * '@syncfusion-react' - * '@ask_syncfusion_react' - * 'ej2-react' - - In VS Code, you can also use #SyncfusionReactAssistant to explicitly invoke the MCP server. - -2. Grant the SyncfusionReactAssistant MCP server a permission to run for this session, workspace, or always. -3. For best results, start a new chat for each new topic to maintain clean context. - -### Mode availability - -Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. - -### Best Practices for Effective Usage - -1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion React 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 effective ways to use [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant): - - * "Create a Syncfusion React Grid component with paging, sorting and filtering" - * "How do I implement data binding with Syncfusion React scheduler?" - * "Show me how to create a dashboard with multiple Syncfusion components" - -## Troubleshooting - -If you encounter issues: - - * Verify your API key is correctly configured. - * Ensure the MCP server is enabled in your client's tools selection. - * Check that you're using a compatible MCP client version. - * Try restarting your development environment. - -## Support - -Product support is available through the following mediums. - -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support -* [Community forum](https://www.syncfusion.com/forums/essential-js2) -* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) -* Live chat - -## See also - -* [Syncfusion React Documentation](https://ej2.syncfusion.com/react/documentation) +--- +layout: post +title: SyncfusionReactAssistant MCP Server | Syncfusion +description: Learn how to configure and use SyncfusionReactAssistant MCP server for intelligent code generation, documentation, and troubleshooting in React apps. +control: Getting started with SyncfusionReactAssistant MCP Server +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# SyncfusionReactAssistant MCP Server + +## Overview + +The [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that provides intelligent assistance for developers using Syncfusion's React component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building React applications with Syncfusion® components. + +### Key Benefits + +* Intelligent code generation for Syncfusion® React components. +* Detailed component documentation and usage examples. +* Troubleshooting assistance for common integration challenges. + +## Prerequisites + +Before using [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant), ensure you have: + +* Required [node](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* 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 MCP server. 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 and setup + +Before you can invoke the `SyncfusionReactAssistant` 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: + +### Generic MCP Server Settings + +- **npm package name**: `@syncfusion/react-assistant` +- **Type**: stdio (standard input/output transport) +- **Command**: npx +- **Arguments**: -y +- **Server name**: syncfusionReactAssistant + +You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: + +```json +"env": { + "Syncfusion_API_Key": "YOUR_API_KEY" +} +``` + +[SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment: + +### Syncfusion® Code Studio + +* Install directly from the [Syncfusion Code Studio](https://www.syncfusion.com/code-studio/) MCP Marketplace. +* Start the server and grant permission when prompted. + +### VS 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. + +```json +{ + "servers": { + "syncfusion-react-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +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 [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) server directly from the settings interface without additional commands. + +3. Confirm that [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is being used (this does not happen automatically). Look for a statement in the output, which is similar to: + * `SyncfusionReactAssistant is running...` (in VS Code) + +### Cursor + +To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder. + +```json +{ + "mcpServers": { + "syncfusion-react-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +### 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: + +```json +{ + "mcpServers": { + "syncfusion-react-assistant": { + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +4. Click OK and Apply. + +> For more detailed information about configuring MCP servers in various clients, refer to the official documentations. + * [VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) + * [Cursor](https://docs.cursor.com/en/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) + +## Usage + +To activate the SyncfusionReactAssistant MCP server: + +1. Start your prompt with one of the following: + * 'SyncfusionReactAssistant' + * '/syncfusion-react-assistant' + * '/syncfusion-react' + * '@syncfusion-react' + * '@ask_syncfusion_react' + * 'ej2-react' + + In VS Code, you can also use #SyncfusionReactAssistant to explicitly invoke the MCP server. + +2. Grant the SyncfusionReactAssistant MCP server a permission to run for this session, workspace, or always. +3. For best results, start a new chat for each new topic to maintain clean context. + +### Mode availability + +Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion React 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 effective ways to use [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant): + + * "Create a Syncfusion React Grid component with paging, sorting and filtering" + * "How do I implement data binding with Syncfusion React scheduler?" + * "Show me how to create a dashboard with multiple Syncfusion components" + +## Troubleshooting + +If you encounter issues: + + * Verify your API key is correctly configured. + * Ensure the MCP server is enabled in your client's tools selection. + * Check that you're using a compatible MCP client version. + * Try restarting your development environment. + +## Support + +Product support is available through the following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support +* [Community forum](https://www.syncfusion.com/forums/essential-js2) +* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) +* Live chat + +## See also + +* [Syncfusion React Documentation](https://ej2.syncfusion.com/react/documentation) diff --git a/ej2-react/ai-developer-tools/overview.md b/ej2-react/ai-coding-assistants/overview.md similarity index 70% rename from ej2-react/ai-developer-tools/overview.md rename to ej2-react/ai-coding-assistants/overview.md index 12bf9408f..dd454da64 100644 --- a/ej2-react/ai-developer-tools/overview.md +++ b/ej2-react/ai-coding-assistants/overview.md @@ -1,73 +1,73 @@ ---- -layout: post -title: Syncfusion AI Developer Tools Overview | Syncfusion -description: Learn how Syncfusion AI Developer Tools boost React productivity by generating accurate code snippets, configuration examples, and contextual guidance. -control: Syncfusion AI Developer Tools Overview -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Syncfusion® AI Developer Tools Overview - -The **Syncfusion® AI Developer Tools** are designed to streamline your development workflow when building React 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 Developer Tools: - -* **The SyncfusionReactAssistant MCP Server** - Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). -* **SyncfusionReact 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 Developer Tools, you need: - -* A [Syncfusion® user account](https://www.syncfusion.com/account) -* 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) -* A [React application that includes SyncfusionReact](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) - -## Unlimited Access - -Syncfusion® offers unlimited access to the AI Developer Tools, with no limitations 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. - -## Best Practices - -* Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your React application. -* Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality. -* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. -* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) for in-depth information. -* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://ej2.syncfusion.com/react/documentation) or [support](https://support.syncfusion.com/support/tickets/create). - -> Always check AI-generated content and code for accuracy before using it. - -## Recommendations - -* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. -* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. - -## Privacy & Data Handling - -The Syncfusion® AI Developer Tools 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. -* Prompts are not used to train Syncfusion® models. -* The assistant generates context, while the final output is handled by your selected AI model. - -## See also - -* Add the [SyncfusionReact MCP Server](./mcp-server.md) to an MCP-enabled client -* Install the [SyncfusionReact GitHub Copilot Extension](./copilot-extension.md) -* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) +--- +layout: post +title: Syncfusion AI Coding Assistants Overview | Syncfusion +description: Learn how Syncfusion AI Coding Assistants boost React productivity by generating accurate code snippets, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistants Overview +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Syncfusion® AI Coding Assistants Overview + +The **Syncfusion® AI Coding Assistants** are designed to streamline your development workflow when building React 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: + +* **The SyncfusionReactAssistant MCP Server** + Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). +* **SyncfusionReact 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: + +* A [Syncfusion® user account](https://www.syncfusion.com/account) +* 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) +* A [React application that includes SyncfusionReact](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) + +## Unlimited Access + +Syncfusion® offers unlimited access to the AI Coding Assistants, with no limitations 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. + +## Best Practices + +* Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your React application. +* Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality. +* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. +* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) for in-depth information. +* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://ej2.syncfusion.com/react/documentation) or [support](https://support.syncfusion.com/support/tickets/create). + +> Always check AI-generated content and code for accuracy before using it. + +## Recommendations + +* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. +* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. + +## Privacy & Data Handling + +The Syncfusion® AI Coding Assistants 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. +* Prompts are not used to train Syncfusion® models. +* The assistant generates context, while the final output is handled by your selected AI model. + +## See also + +* Add the [SyncfusionReactAssistant MCP Server](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/mcp-server) to an MCP-enabled client +* Install the [SyncfusionReact GitHub Copilot Extension](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/copilot-extension) +* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) diff --git a/ej2-react/chart/getting-started.md b/ej2-react/chart/getting-started.md index dcaa7ba78..666c58bf5 100644 --- a/ej2-react/chart/getting-started.md +++ b/ej2-react/chart/getting-started.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple chart and demonstrate the basic usage of the chart control. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Charts, you can check on this video: diff --git a/ej2-react/diagram/getting-started.md b/ej2-react/diagram/getting-started.md index 7f2042c01..557404482 100644 --- a/ej2-react/diagram/getting-started.md +++ b/ej2-react/diagram/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control in React applications. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Prerequisites diff --git a/ej2-react/gantt/getting-started.md b/ej2-react/gantt/getting-started.md index 8f88f5f9b..fd610f272 100644 --- a/ej2-react/gantt/getting-started.md +++ b/ej2-react/gantt/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Essential® JS 2 Gantt in a React application and demonstrates its basic features. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with React Gantt Chart the following video explains the project configuration and basic Gantt chart features behaviors: diff --git a/ej2-react/grid/getting-started.md b/ej2-react/grid/getting-started.md index 5f435489a..563f55f36 100644 --- a/ej2-react/grid/getting-started.md +++ b/ej2-react/grid/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Grid and demonstrate the basic usage of the Grid component in React environment. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Grid, you can check on this video: diff --git a/ej2-react/introduction.md b/ej2-react/introduction.md index 826ba0ed1..c620049bd 100644 --- a/ej2-react/introduction.md +++ b/ej2-react/introduction.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## Syncfusion® React (Essential® JS 2) is a modern UI components library built from the ground up to be lightweight, responsive, modular, and touch friendly. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Components list diff --git a/ej2-react/kanban/getting-started.md b/ej2-react/kanban/getting-started.md index 31dbf0ba5..2fee31596 100644 --- a/ej2-react/kanban/getting-started.md +++ b/ej2-react/kanban/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This article provides a step-by-step introduction to get started with the Syncfusion® React Kanban component. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Overview diff --git a/ej2-react/pivotview/getting-started.md b/ej2-react/pivotview/getting-started.md index 1b1597e63..4e71e8b73 100644 --- a/ej2-react/pivotview/getting-started.md +++ b/ej2-react/pivotview/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section guides you through the steps to create a simple [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) in a React application. It demonstrates how to set up and use the Pivot Table component to display and analyze data effectively. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with the React [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table), watch this video: diff --git a/ej2-react/rich-text-editor/getting-started.md b/ej2-react/rich-text-editor/getting-started.md index 081494187..a7a2918a5 100644 --- a/ej2-react/rich-text-editor/getting-started.md +++ b/ej2-react/rich-text-editor/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The Syncfusion React Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This section explains the steps to create a simple React Rich Text Editor component and configure its core functionalities. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with the React Rich Text Editor, refer to this video tutorial: diff --git a/ej2-react/schedule/getting-started.md b/ej2-react/schedule/getting-started.md index afd849222..73c6de436 100644 --- a/ej2-react/schedule/getting-started.md +++ b/ej2-react/schedule/getting-started.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## This section briefly explains how to create [**React Scheduler**](https://www.syncfusion.com/react-components/react-scheduler) component and configure its available functionalities in React environment, using Essential® JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React 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://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. 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 Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Scheduler using the Create React App, you can check on this video: