
MCP Server : Implémenter un serveur Model Context Protocol en TypeScript
Découvrez comment créer un serveur MCP en TypeScript à l'aide du SDK officiel. Apprenez à fournir un contexte riche aux LLMs.
Progression
Storybook se définit comme un "workshop" permettant de créer des composants et des pages en isolation. Concrètement, c’est une interface sur laquelle on va pouvoir jouer avec les différents états d’un composant pour vérifier s’il correspond bien au design attendu, trouver de la documentation et récupérer les props à utiliser pour différentes implémentations. C’est un outil qui est de plus en plus utilisé lors de la création de Design Systems, et qui peut être utilisé avec de plus en plus de frameworks bien qu’il soit initialement fait pour React. L’utilisation de Storybook peut être améliorée avec des plugins.
Mais si on passe nos composants sur Storybook, est-ce qu’il est possible de les y tester aussi directement ? La réponse est oui ! Un des outils à notre disposition pour cela, c’est Chromatic.
Chromatic est développé par la même équipe que Storybook (d’ailleurs on peut remarquer que la chaîne officielle de Storybook sur Youtube s’est renommée Chromatic !). C’est un outil qu’on utilise dans la CI, qui permet de faire des tests de non régression visuelle (mais pas que !) sur les stories créées sur Storybook. Chromatic est un outil payant avec une version gratuite que nous allons utiliser et qui va nous permettre d'effectuer 5000 snapshots, ce qui est largement suffisant pour les besoins de ce tuto !
Note
Les tests de non régression visuelle sont parfaits dans le cas d’un Design System car ils permettent de vérifier au pixel près si les modifications sur un composant n’affectent pas d’autres composants, ce qui peut être très compliqué à remarquer sur des projets complexes. Dans ce tuto nous allons voir :
node -v
pour vérifier)Note
Auteur(s)
Alice Fauquet
Frontend developer
Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !
Notre équipe d'experts répond à toutes vos questions.
Nous contacterDécouvrez nos autres contenus dans le même thème
Découvrez comment créer un serveur MCP en TypeScript à l'aide du SDK officiel. Apprenez à fournir un contexte riche aux LLMs.
Découvrez comment créer un plugin ESLint en TypeScript avec la nouvelle configuration "flat config" et publiez-le sur npm.
Apprenez à concevoir une barre de recherche accessible pour le web, conforme RGAA. Bonnes pratiques, erreurs fréquentes à éviter et exemples concrets en HTML et React/MUI.