Créer son premier workflow MCP

Un workflow MCP, c'est quoi ?

Un workflow MCP, c'est la combinaison de plusieurs MCP dans une séquence d'actions que Claude Code enchaîne automatiquement pour accomplir une tâche complexe. Au lieu d'utiliser un MCP à la fois, vous décrivez un objectif complet et Claude Code orchestre les différents outils pour y arriver.

Le tutoriel : Context7 + GitHub + Playwright

Dans ce tutoriel, nous allons créer un workflow complet qui :

1. Consulte la documentation (Context7) pour implémenter une fonctionnalité
2. Crée le code en suivant les bonnes pratiques à jour
3. Teste visuellement le résultat (Playwright)
4. Crée une pull request (GitHub) avec un résumé des changements

Prérequis

Assurez-vous d'avoir les trois MCP configurés dans votre fichier ~/.claude/settings.json :

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_votre-token"
      }
    }
  }
}

Vérifiez que tout est connecté :

Étape 1 : Formuler la demande

La clé d'un bon workflow MCP est une demande claire et complète. Ne demandez pas chaque étape séparément, décrivez l'objectif final et laissez Claude Code orchestrer.

# Lancez Claude Code dans votre projet
claude

# Puis tapez votre demande complète :
# "Consulte la documentation Next.js 14 avec Context7 pour vérifier
# comment implémenter une page 404 personnalisée avec le App Router.
# Crée la page not-found.tsx avec un design moderne.
# Lance le serveur de dev, prends un screenshot de la page 404
# pour vérifier le rendu. Ensuite, crée une branche et une PR
# avec un résumé des changements."

Exemple concret pas à pas

Voyons ce que Claude Code fait concrètement à chaque étape.

1. Consultation de la documentation (Context7)

# Claude Code appelle Context7 en interne :
# -> resolve-library-id("nextjs")
# -> query-docs("not-found.tsx app router custom 404 page")
#
# Context7 renvoie la documentation officielle :
# - not-found.tsx doit être dans app/
# - Il exporte un composant React par défaut
# - Il est affiché quand notFound() est appelé
# - Il peut utiliser les métadonnées

2. Création du code

// app/not-found.tsx - Créé par Claude Code
import Link from 'next/link'

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-6xl font-bold text-slate-900 dark:text-white">
        404
      </h1>
      <p className="mt-4 text-xl text-slate-600 dark:text-slate-400">
        Cette page n'existe pas ou a été déplacée.
      </p>
      <Link
        href="/"
        className="mt-8 rounded-lg bg-brand-600 px-6 py-3 text-white
                   transition-colors hover:bg-brand-700"
      >
        Retour à l'accueil
      </Link>
    </div>
  )
}

3. Test visuel (Playwright)

4. Création de la PR (GitHub)

Bonnes pratiques pour les workflows MCP

1. Soyez précis dans vos demandes

2. Laissez Claude Code orchestrer

Ne découpez pas votre workflow en micro-étapes. Décrivez l'objectif final et laissez Claude Code décider de l'ordre optimal des opérations. Il sait quels MCP appeler et dans quel ordre.

3. Vérifiez les résultats intermédiaires

Claude Code vous demandera confirmation avant les actions sensibles (création de PR, envoi de message, modification de données). Profitez de ces points de contrôle pour vérifier que tout se passe bien.

4. Itérez rapidement

L'avantage des workflows MCP est la rapidité d'itération. Si le résultat n'est pas parfait, demandez un ajustement. Claude Code conserve le contexte de la conversation et peut modifier le travail déjà fait.

5. Combinez les catégories

Les workflows les plus puissants combinent des MCP de différentes catégories :

• Développement + Productivité : Code review + notification Slack
• Design + Développement : Génération de composants + tests E2E + PR
• Productivité + Design : Analyse d'emails + création de maquettes

Exemples de workflows avancés

Workflow "Bug fix automatisé"

# Demande à Claude Code :
# "Regarde les erreurs Sentry des dernières 24h,
# trouve la plus fréquente, analyse la stack trace,
# identifie le fichier et la ligne dans notre code,
# propose un fix, écris un test pour le reproduire,
# vérifie visuellement que la page fonctionne avec Playwright,
# et crée une PR avec tout ça."
#
# MCP utilisés : Sentry + Playwright + GitHub

Workflow "Feature complète"

# Demande à Claude Code :
# "Consulte la doc de React Hook Form avec Context7,
# crée un formulaire de contact avec validation
# (nom, email, message, tous requis).
# Ajoute les styles Tailwind, teste le formulaire avec Playwright
# (soumission vide -> erreurs, soumission valide -> succès),
# et crée une PR avec les screenshots de test."
#
# MCP utilisés : Context7 + Playwright + GitHub

Workflow "Rapport d'équipe"

# Demande à Claude Code :
# "Regarde les PRs mergées cette semaine sur GitHub,
# les messages importants du channel #engineering sur Slack,
# et mes réunions de la semaine sur Google Calendar.
# Génère un rapport hebdomadaire structuré et envoie-le
# dans le channel #weekly-report sur Slack."
#
# MCP utilisés : GitHub + Slack + Google Calendar

Prochaines étapes

Vous maîtrisez maintenant les bases des workflows MCP. Voici comment aller plus loin :

• Découvrir les Skills : Créez des commandes réutilisables pour vos workflows
• Maîtriser le prompting : Techniques avancées pour des demandes plus efficaces
• Comprendre les MCP : Revenir aux fondamentaux du protocole
• Configurer le Claude Codex : Générez votre configuration idéale