Claude Code · Étape 2

Connecter Claude Code sur le web à GitHub

Autorise l’accès à tes dépôts pour lancer des tâches de code depuis le navigateur, sans terminal — sur claude.ai/code.

⏱ 20 min 🎯 Niveau : Découverte → Maîtrise 🛠 Outil : Claude Code on the web

🎯 Objectif

À la fin de ce tuto, tu sauras connecter ton compte GitHub à Claude Code sur le web, créer un environnement de travail, et lancer une première tâche sur un vrai dépôt (par exemple un de tes plugins WordPress).

⚠️ Avant de commencer

  • Un compte GitHub actif, avec au moins un dépôt (public ou privé) que tu peux voir.
  • Un abonnement Claude Pro, Max, Team ou Enterprise (la fonction est en research preview).
  • Si tes plugins WordPress ne sont pas encore versionnés sur GitHub, prévois de les y pousser d’abord : Claude Code clone toujours depuis GitHub, jamais depuis ton FTP.

Les deux façons de connecter GitHub

MéthodeComment ça marchePour qui
GitHub AppAutorisation en un clic pendant l’onboarding sur claude.ai/codeLe plus simple, à faire en premier
/web-setupCommande lancée dans ton terminal, si tu utilises déjà la CLI ghUtile en complément, pas obligatoire pour démarrer

Les deux donnent accès à tous les dépôts visibles par le compte connecté — pas seulement ceux où l’app est installée. Installer l’app active en plus la fonction Auto-fix (corrections automatiques des PR).

1
Étape 1

Ouvrir claude.ai/code et lancer l’onboarding

Découverte

Rends-toi sur claude.ai/code avec ton compte Claude habituel. Si c’est ta première visite, un écran d’accueil te propose de connecter GitHub — clique sur Connect GitHub.

Ce que tu dois observer : une fenêtre GitHub s’ouvre en pop-up, distincte de Claude — c’est normal, l’autorisation passe directement par GitHub.
2
Étape 2

Autoriser la Claude GitHub App

Découverte

GitHub te demande de choisir : donner accès à tous tes dépôts, ou seulement à une sélection. Pour commencer, choisis un ou deux dépôts précis (par exemple ton plugin de quiz Access) plutôt que « tous » — tu pourras étendre plus tard depuis les réglages GitHub.

Ce que tu dois observer : une fois validé, tu es redirigé vers claude.ai/code et le nom de ton compte GitHub apparaît en haut de l’écran.
3
Étape 3

Choisir le dépôt et créer un environnement

Application

Sélectionne le dépôt sur lequel travailler. Claude te propose de créer un environnement : c’est la config qui définit l’accès réseau, les variables d’environnement et un éventuel script d’installation. Pour débuter, garde l’environnement par défaut (accès réseau « Trusted », qui couvre déjà les registres npm, PyPI, Composer/Packagist — utile si un de tes plugins a des dépendances PHP).

Corrige le bug d’affichage du quiz Access sur mobile : le bouton « Valider » sort du cadre en dessous de 400px de large.
4
Étape 4

Suivre la tâche et relire le diff

Application

Claude travaille dans une machine virtuelle isolée et affiche sa progression en direct. Une fois terminé, un indicateur +X −Y résume les lignes changées. Clique dessus pour ouvrir la vue diff, commenter une ligne précise si besoin, puis renvoyer ta remarque à Claude.

Ce que tu dois observer : chaque commit créé par Claude porte une référence vers la session — pratique pour retrouver l’historique d’une modification dans ton dépôt.
5
Étape 5

Créer la pull request et fusionner

Maîtrise

Si le résultat te convient, demande à Claude de créer une pull request. Tu peux ensuite la fusionner directement sur GitHub, ou activer Auto-fix pour que Claude corrige automatiquement les échecs de tests ou les commentaires de relecture sur cette PR (nécessite que la GitHub App soit installée, pas seulement /web-setup).

🛠 Atelier A3I — Ton premier dépôt connecté

À faire sur un de tes propres projets (idéalement un plugin WordPress léger, ex. un de tes quiz).

1. Découverte — Pousse un de tes plugins (ex. le quiz Illustrator) sur un nouveau dépôt GitHub s’il n’y est pas encore, puis connecte-le à Claude Code sur le web.
2. Application — Lance une tâche simple et sans risque : « Ajoute des commentaires PHPDoc sur les fonctions principales du fichier principal du plugin. » Observe le diff avant de fusionner.
3. Maîtrise — Configure un environnement avec un script d’installation (apt update && apt install -y php8.4-cli) et demande à Claude de faire tourner un test ou une vérification syntaxique avant de proposer la PR.

✅ Auto-évaluation — J’ai réussi si…