Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 17 additions & 18 deletions ej2-react/ai-developer-tools/copilot-extension.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,40 +30,39 @@ Before using this extension, ensure you have:

* [Github copilot](https://github.com/copilot/)
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Community License](https://www.syncfusion.com/products/communitylicense)
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
- [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://staging.syncfusion.com/account/user-token-generation)

## Unlimited Access

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

* No request limits
* No component restrictions
* No query type limitations
* No usage duration constraints
* Number of requests
* Components usage
* Query types
* Usage duration

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

## Installation

* Visit the [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<sup style="font-size:70%">&reg;</sup> account credentials to complete the authorization.

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.

Restart your apps and begin a new Copilot chat session to start using it.
* Sign in with your Syncfusion<sup style="font-size:70%">&reg;</sup> account to authenticate and link the extension to your GitHub account. The API key is automatically retrieved upon successful authentication.
* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension.

## Getting Started

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

### Mode availability in VS code

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

### Best Practices for Effective Usage

Expand All @@ -86,7 +85,7 @@ 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` and Select `Uninstall`.
* Click `Configure`, then select `Uninstall`.

## Support

Expand Down
30 changes: 17 additions & 13 deletions ej2-react/ai-developer-tools/mcp-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ domainurl: ##DomainURL##

## 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 to enhance your development workflow when building React applications with Syncfusion<sup style="font-size:70%">&reg;</sup> components.
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<sup style="font-size:70%">&reg;</sup> components.

### Key Benefits

Expand All @@ -25,27 +25,27 @@ The [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-a
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) (Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio, VS Code with GitHub Copilot, etc.)
* A [compatible MCP client](https://modelcontextprotocol.io/clients) ([Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio](https://www.syncfusion.com/code-studio/), VS Code with GitHub Copilot, etc.)
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Community License](https://www.syncfusion.com/products/communitylicense)
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
- [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://staging.syncfusion.com/account/user-token-generation)

## Unlimited Access

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

* No request limits
* No component restrictions
* No query type limitations
* No usage duration constraints
* Number of requests
* Components usage
* Query types
* Usage duration

We believe in providing unrestricted access to tools that enhance your development experience, ensuring you can fully leverage Syncfusion components without limitations.
This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> 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:
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

Expand Down Expand Up @@ -142,7 +142,7 @@ To configure an MCP server for a specific workspace, you can create a .cursor/mc
}
```

Click OK and Apply.
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)
Expand All @@ -167,6 +167,10 @@ To activate the SyncfusionReactAssistant 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<sup style="font-size:70%">&reg;</sup> 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?").
Expand Down
56 changes: 31 additions & 25 deletions ej2-react/ai-developer-tools/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,55 +10,61 @@ domainurl: ##DomainURL##

# Syncfusion<sup style="font-size:70%">&reg;</sup> AI Developer Tools Overview

The **Syncfusion<sup style="font-size:70%">&reg;</sup> AI Developer Tools** is designed to streamline your development workflow when building React 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.
The **Syncfusion<sup style="font-size:70%">&reg;</sup> AI Developer Tools** are designed to streamline your development workflow when building React applications with Syncfusion<sup style="font-size:70%">&reg;</sup> components. 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—minimizing documentation searches and maximizing productivity.

SyncfusionReact AI Developer Tools are:
AI Developer Tools:

* The SyncfusionReact MCP Server — Handles advanced prompts and delivers tailored code suggestions for MCP-compatible clients.
* The SyncfusionReact GitHub Copilot Extension — Enhances Copilot with Syncfusion-specific support for quick component setup and guidance in your IDE.
* **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 SyncfusionReact AI Developer Tools, you need:
To use the AI Developer Tools, you need:

* A [Syncfusion<sup style="font-size:70%">&reg;</sup> user account](https://www.syncfusion.com/account)
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Community License](https://www.syncfusion.com/products/communitylicense)
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
- [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://staging.syncfusion.com/account/user-token-generation)
* A [React application that includes SyncfusionReact](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start)

## Unlimited Access

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:
Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to the AI Developer Tools, with no limitations on:

* No request limits
* No component restrictions
* No query type limitations
* No usage duration constraints
* Number of requests
* Components usage
* Query types
* Usage duration

We believe in providing unrestricted access to tools that enhance your development experience, ensuring you can fully leverage Syncfusion components without limitations.
This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components to enhance their development experience without limitations.

## Best Practices

* Initial Setup: Use the assistant to quickly add and configure components.
* Feature Tuning: Enable or disable component features through prompt-based configuration.
* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data.
* 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.
* 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).
* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to documentation or support.
* Session Management: Start fresh sessions when switching tasks to maintain prompt relevance.
* Model Compatibility: For best results, use with models like GPT-5 or Claude Sonnet 4.
* Initial Setup: Use the tools to quickly add and configure Syncfusion<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> AI Developer Tools is designed with privacy in mind:

* It does not access your project files or workspace directly.
* We don’t store your prompts in any of the tools or for any other purpose.
* 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<sup style="font-size:70%">&reg;</sup> models.
* The assistant generates context, not final responses—your selected AI model handles the output.
* The assistant generates context, while the final output is handled by your selected AI model.

## See also

Expand Down