uxgen

officiel

MCP hébergé qui fournit à un agent de codage les mécanismes de conversion e-commerce : remises par quantité, seuil de livraison gratuite, offre complémentaire et ajout au panier collant, avec les règles de l'UE associées.

GitHubEssayer ce MCPSponsorisé

Que pouvez-vous faire avec Uxgen MCP ?

Ajouter des paliers de quantité à une page produit — Demandez à votre assistant d’implémenter le composant QuantityBreaks avec des paliers nommés, des économies en devise et une option intermédiaire présélectionnée.
Implémenter une barre de seuil de livraison gratuite — Utilisez FreeShippingBar pour afficher le montant restant en argent jusqu’à l’atteinte du seuil, avec un message clair une fois celui-ci atteint.
Insérer une offre complémentaire au-dessus des totaux du panier — Configurez OrderBump avec un seul article nommé, un prix et une raison, en veillant à ce qu’il soit décoché au départ et ne bloque jamais le paiement.
Déployer un bouton d’ajout au panier collant pour mobile — Appliquez StickyAddToCart pour afficher le total du palier sélectionné après que le bouton en ligne sort de l’écran, en respectant les zones sûres iOS.
Appliquer des règles de prix conformes à l’UE — Assurez-vous que compareAtCents reflète les prix antérieurs réels et que les badges sont véridiques, comme l’exigent les vérifications au moment du développement des composants.

Documentation

Commerce Kit — les quatre composants qu'un agent IA rate

La spécification canonique et l'implémentation de référence pour les quatre composants qui augmentent le panier : les paliers de quantité, la barre de seuil de livraison gratuite, l'offre complémentaire et le bouton d'ajout au panier collant.

MIT. Aucune dépendance au-delà de React. Copiez le fichier, ou installez le plugin et laissez votre agent s'en charger.

Pourquoi ce dépôt existe

Le 25 août 2026, nous avons demandé à ChatGPT et Perplexity, tous deux avec la recherche web activée, un composant React pour buy 2, save 15%.

ChatGPT a renvoyé un sélecteur de quantité sans citer aucune source. Zéro annotation. Perplexity a aussi renvoyé un sélecteur, avec min, max, step et une prop bundleSize, citant des modèles génériques de sélecteur de quantité.

Les deux se trompent de la même manière, et la raison est la partie utile : il n'existe aucune source canonique à consulter. Recherchez tiered pricing component et Google renvoie 237 millions de résultats sur les grilles tarifaires. Recherchez order bump component et il renvoie 25,9 millions de résultats sur les plugins WooCommerce. Recherchez bundle quantity selector component react et il renvoie 15,3 millions de résultats sur la taille des bundles JavaScript.

Les mécaniques commerciales n'ont aucune spécification sur le web ouvert, donc un modèle retombe sur ce qu'il a lu mille fois de plus proche.

Ce dépôt est cette spécification.

Les quatre composants

Composant	Ce qu'il demande à l'acheteur	Où il se trouve	Agit sur
Paliers de quantité	quel lot, pas combien	page produit	chaque commande, avant qu'un panier n'existe
Barre de livraison gratuite	à quelle distance du seuil	panier	commandes déjà au-dessus d'environ 60 % du seuil
Offre complémentaire	un complément, oui ou non	panier, au-dessus des totaux	le moment de confirmation
Bouton d'ajout au panier collant	rien — il reste simplement accessible	page produit mobile	chaque session mobile

Construisez-les dans cet ordre. Le premier agit le plus tôt et sur la plus grande part des commandes.

1. Paliers de quantité

C'est un groupe de boutons radio. Ce n'est jamais un champ numérique.

Cette seule phrase est tout le composant. Un sélecteur demande combien, ce qui est un calcul que l'acheteur doit faire, et rien en lui ne suggère que deux est une meilleure idée qu'un. Un groupe de boutons radio avec des paliers nommés demande quel lot, et l'un d'eux est visiblement le plus sensé.

import { QuantityBreaks } from "./src/quantity-breaks"

<QuantityBreaks
  tiers={[
    { units: 1, name: "One tin",   totalCents: 1900, compareAtCents: 1900 },
    { units: 3, name: "Three tins — the usual reorder",
      totalCents: 4800, compareAtCents: 5700, badge: "Most chosen", preselected: true },
    { units: 6, name: "Six tins — the year",
      totalCents: 9000, compareAtCents: 11400 },
  ]}
  currency="USD"
  onChange={(tier) => setSelected(tier)}
/>

Les règles

Trois paliers, quatre au maximum. Un de base, un que vous voulez voir choisi, un plafond qui rend le milieu raisonnable. Cinq transforme une reconnaissance en comparaison.
Écarts non linéaires. 1 / 3 / 6, pas 1 / 2 / 3. Des pas réguliers se lisent comme une liste de prix ; des pas irréguliers se lisent comme des offres composées.
Nommez les paliers. Three tins — the usual reorder, pas Quantity: 3. Le nom fait le travail que le nombre ne peut pas faire.
Affichez l'économie en devise, pas seulement en pourcentage. Save $9.00 est la réponse ; Save 15% est une conversion que l'acheteur doit faire.
Affichez le prix unitaire sous le total. $48.00 · $16.00 each. La ligne la plus ignorée dans chaque implémentation que nous avons examinée.
Présélectionnez le palier intermédiaire. L'état sélectionné est lu comme une recommandation. Par défaut sur le moins cher recommande de dépenser le moins.
Liez le bouton à la sélection. Add 3 tins — $48.00.

Les contraintes qui font loi dans l'UE

compareAtCents doit être un prix que vous avez réellement facturé. Les règles européennes d'indication des prix encadrent les annonces de prix antérieurs. Un chiffre barré inventé pour gonfler l'économie est une pratique interdite. Dans cette implémentation, compareAtCents sous totalCents lève une erreur en développement plutôt que d'afficher une ancre fausse.
Un badge doit être vrai. Most chosen sur un palier que personne ne choisit est une déclaration fausse sur votre propre boutique.

2. Barre de seuil de livraison gratuite

Affichez le montant restant en argent. $6.00 to unlock free shipping. Une barre de progression sans chiffre est une décoration, et un pourcentage est une seconde conversion que l'acheteur doit faire.

<FreeShippingBar subtotalCents={4400} thresholdCents={5000} currency="USD" />

Le seuil est un chiffre que vous avez choisi en fonction de votre marge, pas un nombre rond qui vous plaisait.
Une fois atteint, dites-le simplement et arrêtez l'animation. Une barre qui continue de célébrer après l'objectif est du bruit.
Ne l'affichez pas à $0.00 dans un panier vide. En dessous d'environ 40 % du seuil, elle se lit comme une distance, pas comme une incitation.

3. Offre complémentaire

Un article nommé, un prix, une raison, une case non cochée. Au-dessus des totaux, sous le contenu du panier.

<OrderBump
  item={{ name: "Steel scoop", priceCents: 600, reason: "Measures one serving exactly." }}
  onToggle={(added) => setBump(added)}
/>

Jamais pré-cochée. L'article 22 de la directive 2011/83/UE exige un consentement exprès pour tout paiement au-delà de l'obligation principale et rend un « oui » implicite remboursable. Plusieurs widgets commerciaux de vente incitative sont livrés pré-cochés par défaut. Dans cette implémentation, la prop checked n'a aucun moyen de démarrer true.
Jamais un blocage. N'interrompez pas le paiement avec un écran qui doit être accepté ou refusé. L'acheteur avait décidé ; vous avez remplacé son bouton par une question.
Jamais un carrousel. Un seul article. Une grille de six est une nouvelle décision de navigation au moment où vous vouliez une confirmation.
Prix bien en dessous du panier. Un complément à un prix similaire se lit comme un second achat et rouvre toute la décision.

4. Bouton d'ajout au panier collant (mobile)

Le bouton quitte l'écran dès que l'acheteur lit la description. Sur une fenêtre de 390 px, c'est la majeure partie de la session.

<StickyAddToCart label="Add 3 tins" totalCents={4800} currency="USD" onAdd={add} />

Apparaît uniquement après que le bouton intégré a défilé hors de vue, jamais par-dessus lui.
Porte le total du palier sélectionné, donc un coup d'œil remplace le défilement vers le haut.
Respecte la zone de sécurité sur iOS. env(safe-area-inset-bottom) est dans l'implémentation.
Masqué au-dessus de 768 px, où le bouton intégré reste accessible.

Installation comme plugin Claude Code

/plugin marketplace add kinerette/uxgen-commerce-kit
/plugin install commerce-kit@uxgen

Ensuite, dans l'agent :

Use the commerce-kit skill. Add quantity breaks to this product page:
three tiers at 1 / 3 / 6, the middle one marked and preselected,
saving shown in currency, and bind the add-to-cart button to the selection.

La compétence contient les règles ci-dessus, donc l'agent construit un groupe de boutons radio au lieu d'un sélecteur, et refuse les deux modèles illégaux dans l'UE.

Ce que ce n'est pas

Ce n'est pas un système de design, et cela ne rendra pas votre page belle. Ce sont quatre composants avec le raisonnement commercial attaché, parce que ce raisonnement est ce qui manque partout ailleurs. Si votre page a aussi l'air générée, c'est un problème séparé avec une solution séparée.

Ce n'est pas un cadre de tests A/B, et cela ne promet pas d'amélioration. En dessous d'environ quarante mille sessions par variante, un test fractionné ne peut pas distinguer un effet réel du bruit, ce qui est le cas de la plupart des boutiques. Ce que ces quatre composants vous donnent, c'est la suppression d'une omission connue, qui n'a pas besoin d'un test pour valoir la peine d'être faite.

Lectures connexes

Construit par uxgen, le MCP qui transmet ces mécaniques à un agent de codage.