
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
Nous allons commencer par initialiser notre projet et faire un premier commit.
Utilisez les commandes suivantes pour créer un premier commit sur une branche principale appelée main
:
git init git add . git commit -m "init commit" git branch -M main
Ensuite nous allons créer un repo sur Github et y envoyer notre premier commit. Rendez-vous sur cette page https://github.com/new puis créez un repo "chromatic-tuto-elevenlabs". Sur votre terminal, lancez ces commandes (les commandes sont aussi indiquées préremplies sur Github) :
git remote add origin https://github.com/<votre username>/<nom sur repo>.git git push -u origin main
Votre premier commit est maintenant sur Github ! Nous allons désormais passer au moment que vous attendez tous : installer Chromatic !
Nous allons installer Chromatic en devDependency :
npm install -D chromatic
Ensuite, connectez-vous à Chromatic avec votre compte GitHub : https://www.chromatic.com/start.
Choisissez l’option Choose from GitHub
, choisissez le repo que nous utilisons pour ce tuto puis récupérez et utilisez la ligne de commande sous "Publish your Storybook", elle va nous permettre de faire le lien entre le projet et Chromatic.
À la fin du processus vous trouverez un lien qui vous donnera accès à une version publiée de votre Storybook. Pas mal, non ? Chromatic vous affichera également un token, gardez-le de côté car on va s'en servir dans quelques instants.
C’est très bien mais nous ce qu’on veut c’est utiliser Chromatic ! Il nous reste une dernière étape avant de rentrer dans le vif du sujet : créer une Github Action !
Tout d’abord on a besoin de créer un secret sur Github. Créez le secret CHROMATIC_PROJECT_TOKEN
qui contient le token, que vous avez récupéré précédemment. Pour créer un secret vous pouvez suivre cette documentation.
Retournez sur votre IDE, créez un dossier .github/workflows
puis un fichier chromatic.yml
et collez-y ce template (qu'on peut également retrouver sur le documentation de Chromatic) :
# .github/workflows/chromatic.yml name: "Chromatic" on: push jobs: chromatic: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 with: fetch-depth: 0 - name: Install dependencies run: yarn install --immutable --immutable-cache --check-cache - name: Publish to Chromatic uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
Créez un commit et poussez-le sur le repo :
git add . git commit -m "GitHub action setup" git push origin main
Vous pouvez trouver le build dans la pipeline après le push.
Nous allons maintenant voir comment fonctionne Chromatic !
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.