Apprenez à utiliser le serveur KendoReact MCP avec Cursor pour dynamiser votre flux de travail de développement assisté par l’IA.
Les assistants de codage basés sur l’IA ont transformé le paysage du développement moderne. Cependant, leur efficacité dépend souvent de contexte. Lorsqu’il s’agit de créer du code React à l’aide de l’IA, les modèles d’IA peuvent avoir des difficultés avec des bibliothèques de composants d’interface utilisateur uniques, ce qui pourrait entraîner des corrections manuelles fastidieuses auxquelles nous avons tous dû faire face. C’est là que le progrès Serveur KendoReact MCP entre en jeu. Il comble le fossé entre les capacités d’IA et la connaissance spécialisée des bibliothèques de composants.
Dans cet article, nous explorerons comment configurer et utiliser le serveur KendoReact MCP, avec Cursor, pour dynamiser notre flux de travail de développement assisté par l’IA.
Prérequis : Pour utiliser le serveur KendoReact MCP, vous aurez besoin d’un client MCP compatible (nous utiliserons Cursor dans cet article), d’une licence KendoReact active (ou d’un essai) et d’une application React qui inclut des composants KendoReact !
MCP (protocole de contexte de modèle)
Protocole de contexte de modèle (MCP) est un standard ouvert développé par Anthropique qui standardise la manière dont les applications fournissent du contexte aux modèles et agents d’IA. Considérez-le comme un langage commun pour l’échange d’informations entre différents systèmes. MCP permet aux modèles d’IA d’accéder à des connaissances et à des outils spécialisés au-delà de leurs données de formation.
MCP fonctionne via des serveurs qui exposent des outils et un contexte spécifiques aux clients IA. Lorsque nous installons un serveur MCP, nous donnons à notre assistant IA accès aux connaissances dans un domaine particulier. Pour KendoReact, cela signifie que l’IA peut comprendre les API des composants, les meilleures pratiques et les modèles de mise en œuvre qu’elle ne connaîtrait pas autrement.
Consultez l’article précédent, La promesse du protocole de contexte modèlepour plus de détails sur MCP et ce qu’il propose.
Curseur
Curseur est un éditeur de code basé sur l’IA, conçu pour s’intégrer de manière transparente aux grands modèles de langage. Contrairement aux éditeurs traditionnels dotés de fonctionnalités d’IA intégrées, Cursor traite l’IA comme un citoyen de premier ordre dans le flux de travail de développement.
Ce qui rend Cursor puissant, c’est sa prise en charge native de Serveurs MCP. Cela signifie que nous pouvons améliorer les capacités d’IA de Cursor avec des connaissances spécialisées, telles que le serveur KendoReact MCP.
Configuration du serveur KendoReact MCP
Dans cette section, nous nous présenterons davantage au concept de MCP en mettant en place le Serveur KendoReact MCP avec le client Curseur.
Configuration du serveur MCP
La première étape consiste à créer le Fichier de configuration MCP. À la racine de notre projet KendoReact, nous allons créer un .cursor dossier avec un mcp.json déposer:
{
"chat.mcp.discovery.enabled": true,
"mcpServers": {
"telerik_react_assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/kendo-react-mcp"],
"env": {
"TELERIK_LICENSE_PATH": "./telerik-license.txt"
}
}
}
}
Cette configuration indique au curseur d’activer la découverte MCP et de configurer le serveur KendoReact MCP avec le nom telerik_react_assistant.
Après avoir créé le
mcp.jsonfichier, vous devrez peut-être redémarrer Cursor pour récupérer la nouvelle configuration MCP.
Activation de MCP dans les paramètres du curseur
Une fois que nous avons configuré le fichier de configuration MCP, nous devrons activer le serveur MCP dans les paramètres. Nous pouvons ouvrir les paramètres du curseur et accéder à la section « Outils MCP ». Nous devrions voir notre telerik_react_assistant serveur répertorié ici, et nous pouvons l’activer pour activer le serveur.
Initialement, avant la configuration, la section Outils MCP n’affichera aucun outil disponible :
Après une configuration correcte, nous devrions voir le telerik_react_assistant répertorié et activé :
Cela indique que le serveur MCP est actif et prêt à fournir une assistance spécifique à KendoReact.
Construire une grille KendoReact avec l’aide de MCP
Maintenant que le serveur KendoReact MCP est configuré, explorons comment il améliore notre flux de travail de développement en créant progressivement des applications de plus en plus complexes. Grille KendoReact exemples.
Création d’une grille de base avec tri et pagination
Avant de plonger dans le vif du sujet, il y a quelques points essentiels à garder à l’esprit lorsque vous travaillez avec le serveur KendoReact MCP.
Premièrement, nous devons nous assurer avec une de ces phrases déclencheurs: kendo, /kendo, @kendo, kendoreact, /kendoreact ou @kendoreact. Cela indique au curseur d’utiliser le serveur MCP.
Deuxièmement, vérifiez que le serveur KendoReact MCP est effectivement utilisé. Recherchez les messages de confirmation tels que « Exécution de kendo-react-assistant » ou « Appelé outil MCP kendo_react_assistant » dans la sortie. Si nous ne voyons pas cela, nous devrons peut-être reformuler notre invite ou essayer une syntaxe de déclenchement différente.
Commençons par une simple invite pour créer une grille KendoReact à partir de zéro :
Rapide: /kendoreact Telerik Generate a very simple KendoReact Grid with sorting and paging enabled. Bind the Grid to dummy data.
On remarquera que le serveur MCP traite cette requête et nous fournit une implémentation complète.
Remarquez comment le serveur MCP nous a fourni un exemple complet et fonctionnel qui inclut une saisie TypeScript appropriée, une génération de données factices réalistes et une configuration de grille appropriée ? Le code se compose d’accessoires essentiels, comme autoProcessData, pageable et sortableainsi que les définitions et le formatage des colonnes appropriés.
import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
const generateDummyData = (count: number) => {
return Array.from({ length: count }, (_, idx) => ({
id: idx + 1,
name: `Employee ${idx + 1}`,
email: `employee${idx + 1}@company.com`,
department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][idx % 5],
salary: Math.floor(Math.random() * 50000) + 50000,
hireDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1)
}));
};
function App() {
const data = React.useMemo(() => generateDummyData(100), []);
return (
<div className="App" style={{ padding: '20px' }}>
<h1>KendoReact Grid Example</h1>
<Grid
data={data}
style={{ height: '500px' }}
autoProcessData={true}
pageable={true}
sortable={true}
dataItemKey="id"
defaultTake={10}
defaultSkip={0}
>
<GridColumn field="id" title="ID" width="80px" />
<GridColumn field="name" title="Name" width="150px" />
<GridColumn field="email" title="Email" width="200px" />
<GridColumn field="department" title="Department" width="120px" />
<GridColumn field="salary" title="Salary" width="120px" format="{0:c}" />
<GridColumn field="hireDate" title="Hire Date" width="120px" format="{0:d}" />
</Grid>
</div>
);
}
export default App;
Plutôt cool, non ? C’est là que MCP brille vraiment. Au lieu de recevoir du code React générique qui peut même ne pas fonctionner avec KendoReact, nous obtenons un code spécialement conçu qui adhère à toutes les meilleures pratiques et modèles spécifiques au composant KendoReact Grid.
Ajout de fonctionnalités de filtrage
En nous appuyant sur notre grille de base, ajoutons une fonctionnalité de filtrage avec une invite ciblée :
Rapide: /kendoreact can we add some basic filtering to the Department column in this grid?
Le serveur MCP comprend notre contexte existant et nous propose une version améliorée :
Le serveur MCP a intelligemment ajouté le filterable={true} accessoire à la grille. Remarquez comment nous avons dû donner suite à une autre invite pour inciter l’éditeur à désactiver également stratégiquement le filtrage sur toutes les autres colonnes, à l’exception de la Department colonne. Cela montre comment, même avec MCP, des ajustements et des clarifications mineurs peuvent encore être nécessaires pour guider l’IA vers le résultat exact souhaité.
import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
const generateDummyData = (count: number) => {
return Array.from({ length: count }, (_, idx) => ({
id: idx + 1,
name: `Employee ${idx + 1}`,
email: `employee${idx + 1}@company.com`,
department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][idx % 5],
salary: Math.floor(Math.random() * 50000) + 50000,
hireDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1)
}));
};
function App() {
const data = React.useMemo(() => generateDummyData(100), []);
return (
<div className="App" style={{ padding: '20px' }}>
<h1>KendoReact Grid Example</h1>
<Grid
data={data}
style={{ height: '500px' }}
autoProcessData={true}
pageable={true}
sortable={true}
filterable={true}
dataItemKey="id"
defaultTake={10}
defaultSkip={0}
>
<GridColumn field="id" title="ID" width="80px" filterable={false} />
<GridColumn field="name" title="Name" width="150px" filterable={false} />
<GridColumn field="email" title="Email" width="200px" filterable={false} />
<GridColumn field="department" title="Department" width="120px" />
<GridColumn field="salary" title="Salary" width="120px" format="{0:c}" filterable={false} />
<GridColumn field="hireDate" title="Hire Date" width="120px" format="{0:d}" filterable={false} />
</Grid>
</div>
);
}
export default App;
Implémentation de l’édition en ligne
Allons encore plus loin dans notre grille en ajoutant des fonctionnalités d’édition :
Rapide: /kendoreact can you make the cells only in the name column editable please?
Le serveur MCP nous donne l’implémentation nécessaire pour prendre en charge les capacités d’édition dans le Name colonne:
import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import type { GridItemChangeEvent } from '@progress/kendo-react-grid';
const generateDummyData = (count: number) => {
return Array.from({ length: count }, (_, idx) => ({
id: idx + 1,
name: `Employee ${idx + 1}`,
email: `employee${idx + 1}@company.com`,
department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][idx % 5],
salary: Math.floor(Math.random() * 50000) + 50000,
hireDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1)
}));
};
function App() {
const [data, setData] = React.useState(() => generateDummyData(100));
const handleItemChange = (event: GridItemChangeEvent) => {
const inEditID = event.dataItem.id;
const field = event.field || '';
const newData = data.map((item) =>
item.id === inEditID ? { ...item, [field]: event.value } : item
);
setData(newData);
};
return (
<div className="App" style={{ padding: '20px' }}>
<h1>KendoReact Grid Example</h1>
<Grid
data={data}
style={{ height: '500px' }}
autoProcessData={true}
pageable={true}
sortable={true}
filterable={true}
editable={true}
dataItemKey="id"
defaultTake={10}
defaultSkip={0}
onItemChange={handleItemChange}
>
<GridColumn field="id" title="ID" width="80px" filterable={false} editable={false} />
<GridColumn field="name" title="Name" width="150px" filterable={false} />
<GridColumn field="email" title="Email" width="200px" filterable={false} editable={false} />
<GridColumn field="department" title="Department" width="120px" editable={false} />
<GridColumn field="salary" title="Salary" width="120px" format="{0:c}" filterable={false} editable={false} />
<GridColumn field="hireDate" title="Hire Date" width="120px" format="{0:d}" filterable={false} editable={false} />
</Grid>
</div>
);
}
export default App;
Le serveur MCP a compris notre demande de placement editable={false} sur les colonnes qui ne devraient pas être modifiées, et ajouté le editable={true} prop sur le composant Grid pour prendre en charge l’édition là où nous le souhaitions.
Si c’est la première fois que vous rencontrez un développement assisté par MCP et/ou par l’IA, vous trouverez probablement le niveau de précision et de connaissance du contexte tout simplement remarquable. MCP montre vraiment comment l’IA peut passer d’un assistant générique à un partenaire de codage expert dans le domaine.
Conclure
Le serveur KendoReact MCP représente un pas en avant significatif dans le développement assisté par l’IA pour les applications React utilisant les composants KendoReact. En fournissant un contexte spécialisé et des connaissances approfondies sur la bibliothèque de composants, il transforme l’assistance générique de l’IA en conseils de niveau expert.
Nous avons vu comment le serveur MCP fournit systématiquement un code précis et contextuel qui suit les meilleures pratiques. Plutôt que de passer du temps à déboguer des suggestions génériques d’IA ou à rechercher de la documentation, nous pouvons nous concentrer sur la création de fonctionnalités et la résolution de problèmes commerciaux.
Pour plus de détails, assurez-vous de consulter le site officiel Documentation du serveur KendoReact MCP.
Et n’oubliez pas que KendoReact est livré avec un essai gratuit de 30 jours, vous pouvez donc consulter le serveur MCP dès aujourd’hui !
Source link