Connecter Claude

En un coup d'œil

Les cinq façons

Les trois premières sont le même connecteur atteint depuis trois clients différents. Utilisez-en une si vous avez un abonnement Claude : le raisonnement se passe de votre côté et nous ne voyons jamais de clé.

Recommandé

Votre Claude, notre connecteur

Une adresse, ajoutée une fois, donne à Claude onze outils sur vos thèmes : lire et écrire les fichiers, valider, monter le brouillon sur la boutique du thème, photographier une page, soumettre une version et lire la revue.

Dans un terminal, avec Claude Code. Lancez ceci une fois dans n'importe quel dossier, puis démarrez Claude et approuvez la connexion qu'il ouvre dans votre navigateur.

claude mcp add --transport http whizzy-developer https://app.whizzycommerce.com/mcp/dev
claude
/mcp            # whizzy-developer, then Authenticate
/exit           # once signed in, leave this session
claude          # and start a new one: the tools are in this one

Le navigateur vous demande de vous connecter à WhizzyCommerce et d'autoriser la liaison. C'est à votre compte développeur qu'il se connecte, pas à une boutique, et la liaison dure jusqu'à ce que vous la révoquiez dans Développeur, puis Jetons.

Dans VS Code ou JetBrains. L'extension Claude Code utilise les mêmes connecteurs que le terminal : la commande ci-dessus suffit, lancée une fois dans le terminal de l'IDE. Pour la partager avec toute une équipe, versionnez-la plutôt :

// .mcp.json, in the root of the theme's repository
{
  "mcpServers": {
    "whizzy-developer": { "type": "http", "url": "https://app.whizzycommerce.com/mcp/dev" }
  }
}

Sur claude.ai. Paramètres, puis Connecteurs, puis Ajouter un connecteur personnalisé. Nommez-le whizzy-developer, collez la même adresse, appuyez sur Connecter et connectez-vous. Il fonctionne ensuite dans n'importe quelle conversation, sur le web et dans l'application de bureau.

Fichiers sur disque

VS Code et la CLI

Si vous préférez garder le thème dans un dossier, avec git et votre éditeur habituel, la CLI garde ce dossier et votre compte au même niveau. Claude Code modifie alors des fichiers ordinaires, comme dans n'importe quel dépôt.

npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
whizzy-theme login
whizzy-theme pull luxor            # writes the folder
whizzy-theme dev --shop=ten_...    # pushes on every save, opens a preview
whizzy-theme submit -m "What changed, for merchants"

Claude Code lit AGENTS.md dans le dossier sans qu'on le lui demande : c'est le format du thème et les règles de performance, donc une session démarre en les connaissant. Ajoutez aussi le connecteur et Claude peut valider et soumettre sans quitter la conversation.

La démo

Le connecteur de la boutique de démonstration

Les thèmes sont une chose ; le contenu de la démo en est une autre. La boutique de démonstration a son propre connecteur, et c'est celui que Claude utilise pour écrire les pages, les bannières et les textes de la démo.

1. Ouvrir l'écran IA de la boutique

   Tableau de bord, la boutique, puis IA

   L'adresse qui s'y trouve finit par /mcp/ et l'identifiant de la boutique. Copiez-la.

2. L'ajouter à claude.ai

   Paramètres, Connecteurs, Ajouter un connecteur personnalisé

   Nommez-le whizzy-merchant, collez, connectez et identifiez-vous. Il n'atteint que cette boutique.

3. Demander une démo

   Composez la page d'accueil, écrivez les textes des sections, arrangez une catégorie. Les changements atterrissent dans le brouillon de la boutique avec une annulation à côté de chacun.

Il ne peut pas publier, et il n'atteint ni commandes, ni clients, ni paiements, dont une boutique de démonstration ne dispose de toute façon pas. Ce qu'il change, c'est la démo que les gens voient sur la page de votre thème.

Sur notre serveur

Le panneau de l'éditeur du navigateur

La seule façon qui demande une clé d'API Anthropic, parce qu'ici Claude tourne sur notre serveur et non sur le vôtre. Pratique quand vous êtes déjà dans l'éditeur et n'avez aucun client configuré.

• Appuyez sur Construire avec Claude dans l'éditeur de thèmes, puis collez une clé de console.anthropic.com.
• La clé est chiffrée de notre côté, conservée pour ce seul thème, et utilisée uniquement quand vous envoyez un message.
• Chaque message est facturé à votre compte Anthropic. Nous ne prenons pas de part et n'ajoutons pas de marge.
• Retirez la clé quand vous voulez et le panneau cesse de demander quoi que ce soit.

Il en va de même pour l'assistant à l'intérieur d'une boutique de démonstration ou de développement. Sa clé se trouve dans Réglages, puis Claude, sur cette boutique.

Aucun modèle

Intégration continue, sans Claude du tout

Un serveur de build n'a pas besoin de Claude pour publier un thème. Il a besoin d'un jeton, et c'est ce que l'écran Jetons fabrique.

# GitHub Actions, or anything else that runs a shell
env:
  WHIZZY_TOKEN: ${{ secrets.WHIZZY_TOKEN }}
run: |
  npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
  whizzy-theme push
  whizzy-theme validate --remote
  whizzy-theme submit -m "${{ github.event.head_commit.message }}"

Un jeton remplace la connexion par navigateur et rien d'autre : les mêmes règles, les mêmes vérifications, la même revue. Faites-en un par endroit, pour que chacun puisse être révoqué seul.

Argent

Ce que coûte chacune

La version courte : branchez un client que vous payez déjà, et construire un thème ne vous coûte rien de plus que cet abonnement.

Quelle que soit celle que vous utilisez, le travail est à vous et le compte sur lequel il tourne aussi. Voir Outils pour la référence complète des commandes et des outils, et Versions et revue pour ce qui se passe après la soumission.