Comment ajouter l'e-commerce à un site Loveable

Loveable génère un site qui tient debout. Ce qui lui manque pour vendre n'est pas du design : c'est un catalogue qui fait autorité, un panier, un checkout, un encaissement, des commandes et des factures.

Pourquoi ne pas tout demander à l'assistant

Un assistant sait écrire une page catalogue en quelques minutes. Il sait aussi écrire un panier en mémoire, un formulaire de paiement, et une page de confirmation. Le résultat ressemble à une boutique, et se comporte comme une maquette.

Ce qui manque n'est pas visible sur la page :

• des prix qui viennent d'une seule source, et qui ne se périment pas quand on les recopie dans le code ;
• un total calculé côté serveur, que le client ne peut pas modifier ;
• un encaissement rattaché à votre compte chez un prestataire de paiement ;
• une commande qui ne passe à payée que sur la notification signée du PSP ;
• une facture, un email, et une trace de ce qui s'est passé.

Rien de tout cela ne s'improvise dans un composant React.

L'architecture, en une image

site Loveable (votre projet)
      |
      |  fetch() vers l'API publique
      v
 backend commerce Ts-Shop
      |-- catalogue, panier
      |-- checkout héberge
      |-- PSP : Stripe, PayZen, Sogecommerce
      |-- commandes, factures, emails
      |
      +--> serveur MCP (lecture) --> l'assistant qui code

Deux canaux, deux usages. L'API sert le site en production. Le serveur MCP sert l'assistant pendant qu'il écrit le code, et il est en lecture seule.

La marche à suivre

1. Créez votre boutique et vos services : nom, devise, taux de TVA, prestations. Au Lot 1, Ts-Shop vend des services, pas des articles à expédier.

2. Branchez votre prestataire de paiement et saisissez vos clés de test. Vous passerez en production par un interrupteur, une fois le parcours vérifié.

3. Créez un jeton MCP pour cette boutique, et donnez-le à Loveable. Il n'ouvre que cette boutique, il est révocable seul, et il ne donne aucun droit d'écriture.

4. Demandez l'intégration à l'assistant : une page catalogue, une page service, un bouton qui crée un panier puis ouvre le checkout. Il lit la devise, le régime de TVA et la forme exacte des appels dans le serveur MCP.

5. Vérifiez un paiement de bout en bout en mode test, puis basculez en production.

Ce que Loveable fait très bien, et ce qu'il vaut mieux ne pas lui confier

Et le SEO du site généré ?

Il ne bouge pas. Les pages restent servies par votre projet Loveable, avec vos URL et vos balises. Le catalogue devient dynamique, ce qui joue plutôt en votre faveur : les fiches de service cessent d'être du texte figé dans un composant.

Questions courantes

Faut-il héberger quelque chose de plus ? Non. Le backend commerce est un service ; votre site continue d'être déployé comme il l'est aujourd'hui.

Le jeton MCP donne-t-il accès à mes commandes ? Non. Les outils sont en lecture et portent sur le catalogue et la configuration du checkout, pas sur vos ventes.

Puis-je faire la même chose avec Base44, Claude ou Codex ? Oui, le principe est identique : l'API pour le site, le MCP pour l'assistant.

Pour aller plus loin

• MCP vs UCP : deux protocoles IA, deux rôles différents
• Comment ajouter l'e-commerce à un site existant