
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
Comme il est probable que vous utilisiez React, nous allons faire un nouveau projet en React appelé "chromatic-tuto-elevenlabs" sur lequel nous allons installer Storybook et React. Storybook comprendra automatiquement qu’il est sur un projet React.
Sur un terminal, placez-vous dans le dossier dans lequel vous souhaitez créer le projet, puis lancez ces commandes :
npm create vite@latest chromatic-tuto-elevenlabs --template react-ts
Acceptez l’installation de create-vite
puis sélectionnez en Framework React
et en variant Typescript
(ou Javascript
si vous êtes plus à l’aise, ça ne change pas grand chose dans le cadre de ce tuto mais il faudra adapter les extraits de code en retirant les types). Installez le projet sans le lancer :
cd chromatic-tuto-elevenlabs
npm install
Avant de lancer le projet nous allons installer Storybook. Comme dit précédemment, Storybook va automatiquement déterminer dans quel environnement il est installé.
Important
Lancez cette commande, puis acceptez l’installation du package storybook
, puis un peu plus tard dans l’installation, installez le plugin ESLint recommandé si vous le souhaitez.
npx storybook@7 init
À la fin de l’installation un onglet s’ouvre par défaut à l’adresse localhost:6006
. Si vous avez besoin de relancer Storybook plus tard, faites cette commande :
npm run storybook
Si vous n’avez pas l’habitude de Storybook je vous conseille de suivre le tour proposé par Storybook au premier lancement du projet (préparez-vous à recevoir une myriade de confettis colorés). Je vous suggère aussi de suivre cet article du blog qui présente les bases pour construire un Design System avec React et qui aborde donc Storybook.
Nous avons donc pour l’instant 3 stories : un bouton, un header et une page complète. Nous allons utiliser dans ce tuto le composant le plus simple : le bouton. Mais accrochez-vous parce qu’il va falloir faire un peu de CI...
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.