uxgen

आधिकारिक

होस्टेड MCP जो कोडिंग एजेंट को ईकॉमर्स कन्वर्ज़न मैकेनिज्म देता है: क्वांटिटी ब्रेक, फ्री-शिपिंग थ्रेशोल्ड, ऑर्डर बंप और स्टिकी ऐड-टू-कार्ट, साथ में EU नियम जुड़े हुए।

GitHubइस MCP को आज़माएँप्रायोजित

Uxgen MCP के साथ आप क्या कर सकते हैं?

उत्पाद पृष्ठ पर मात्रा ब्रेक जोड़ें — अपने सहायक से QuantityBreaks घटक को नामित टियर, मुद्रा बचत और पूर्व-चयनित मध्य विकल्प के साथ लागू करने के लिए कहें।
मुफ़्त शिपिंग सीमा बार लागू करें — FreeShippingBar का उपयोग करके सीमा तक पहुँचने तक शेष राशि को मुद्रा में प्रदर्शित करें, और प्राप्त होने पर स्पष्ट संदेश दिखाएँ।
कार्ट कुल राशि के ऊपर एक ऑर्डर बंप डालें — OrderBump को एक नामित आइटम, मूल्य और कारण के साथ कॉन्फ़िगर करें, यह सुनिश्चित करते हुए कि यह अनचेक शुरू होता है और कभी भी चेकआउट को अवरुद्ध नहीं करता है।
मोबाइल के लिए स्टिकी ऐड-टू-कार्ट तैनात करें — StickyAddToCart लागू करें ताकि इनलाइन बटन दृश्य से बाहर स्क्रॉल होने के बाद चयनित टियर का कुल योग दिखाया जा सके, iOS सुरक्षित क्षेत्रों का सम्मान करते हुए।
EU-अनुपालन मूल्य निर्धारण नियम लागू करें — सुनिश्चित करें कि compareAtCents वास्तविक पिछली कीमतों को दर्शाता है और बैज सत्य हैं, जैसा कि घटकों के विकास-समय जाँच द्वारा लागू किया गया है।

दस्तावेज़

Commerce Kit — चार घटक जिन्हें AI एजेंट गलत समझता है

विहित स्पेक और संदर्भ कार्यान्वयन उन चार घटकों के लिए जो बास्केट बढ़ाते हैं: क्वांटिटी ब्रेक्स, फ्री-शिपिंग थ्रेशोल्ड बार, ऑर्डर बम्प, और स्टिकी ऐड-टू-कार्ट।

MIT. React के अलावा कोई निर्भरता नहीं। फ़ाइल कॉपी करें, या प्लगइन इंस्टॉल करें और अपने एजेंट को यह करने दें।

यह रिपॉजिटरी क्यों मौजूद है

25 अगस्त 2026 को हमने ChatGPT और Perplexity, दोनों को वेब सर्च सक्षम के साथ, buy 2, save 15% के लिए एक React कंपोनेंट के लिए पूछा।

ChatGPT ने एक क्वांटिटी स्टेपर लौटाया और कोई स्रोत उद्धृत नहीं किया। शून्य एनोटेशन। Perplexity ने भी एक स्टेपर लौटाया, जिसमें min, max, step और एक bundleSize प्रॉप था, जो सामान्य क्वांटिटी-सेलेक्टर पैटर्न का हवाला देता था।

दोनों एक ही तरह से गलत हैं, और कारण उपयोगी हिस्सा है: उनके परामर्श के लिए कोई विहित स्रोत नहीं है। tiered pricing component खोजें और Google 237 मिलियन परिणाम प्राइसिंग टेबल के बारे में लौटाता है। order bump component खोजें और यह 25.9 मिलियन WooCommerce प्लगइन्स के बारे में लौटाता है। bundle quantity selector component react खोजें और यह 15.3 मिलियन परिणाम JavaScript बंडल आकार के बारे में लौटाता है।

कॉमर्स मैकेनिक्स का खुले वेब पर कोई स्पेक नहीं है, इसलिए एक मॉडल उस निकटतम चीज़ पर वापस गिर जाता है जिसे उसने हज़ार बार पढ़ा है।

यह रिपॉजिटरी वह स्पेक है।

चार घटक

घटक	यह खरीदार से क्या पूछता है	यह कहाँ रहता है	किस पर कार्य करता है
क्वांटिटी ब्रेक्स	कौन सा पैकेज, कितने नहीं	उत्पाद पृष्ठ	हर ऑर्डर, कार्ट मौजूद होने से पहले
फ्री-शिपिंग बार	थ्रेशोल्ड से कितनी दूर	कार्ट	ऑर्डर पहले से थ्रेशोल्ड के ~60% से ऊपर
ऑर्डर बम्प	एक पूरक, हाँ या नहीं	कार्ट, कुल राशि के ऊपर	पुष्टिकरण क्षण
स्टिकी ऐड-टू-कार्ट	कुछ नहीं — यह बस पहुंच योग्य रहता है	मोबाइल उत्पाद पृष्ठ	हर मोबाइल सत्र

उन्हें उसी क्रम में बनाएं। पहला सबसे पहले और ऑर्डर के सबसे बड़े हिस्से पर कार्य करता है।

1. क्वांटिटी ब्रेक्स

यह एक रेडियो समूह है। यह कभी संख्या इनपुट नहीं है।

वह एक वाक्य पूरा घटक है। एक स्टेपर कितने पूछता है, जो खरीदार को करने वाला अंकगणित है, और इसमें कुछ भी यह सुझाव नहीं देता कि दो एक से बेहतर विचार है। नामित टियर का एक रेडियो समूह कौन सा पैकेज पूछता है, और उनमें से एक स्पष्ट रूप से समझदार है।

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)}
/>

नियम

तीन टियर, अधिकतम चार। एक आधार रेखा, एक जिसे आप चुना चाहते हैं, एक छत जो मध्य को उचित दिखाती है। पांच एक पहचान को तुलना में बदल देता है।
गैर-रैखिक अंतराल। 1 / 3 / 6, 1 / 2 / 3 नहीं। समान चरण मूल्य सूची के रूप में पढ़े जाते हैं; असमान चरण रचित ऑफ़र के रूप में पढ़े जाते हैं।
टियर का नाम दें। Three tins — the usual reorder, Quantity: 3 नहीं। नाम वह काम करता है जो संख्या नहीं कर सकती।
बचत को मुद्रा में दिखाएं, केवल प्रतिशत के रूप में नहीं। Save $9.00 उत्तर है; Save 15% एक रूपांतरण है जिसे खरीदार को चलाना पड़ता है।
कुल के नीचे यूनिट मूल्य दिखाएं। $48.00 · $16.00 each। हर कार्यान्वयन में सबसे अधिक छोड़ी गई पंक्ति जिसे हमने देखा है।
मध्य टियर को पूर्व-चयनित करें। चयनित स्थिति को सिफारिश के रूप में पढ़ा जाता है। सबसे सस्ते पर डिफ़ॉल्ट करना सबसे कम खर्च करने की सिफारिश करता है।
बटन को चयन से बांधें। Add 3 tins — $48.00।

बाधाएं जो EU में कानून हैं

compareAtCents एक मूल्य होना चाहिए जो आपने वास्तव में वसूला। EU मूल्य-संकेत नियम पूर्व-मूल्य घोषणाओं को नियंत्रित करते हैं। बचत को बढ़ाने के लिए आविष्कृत एक कट-थ्रू आंकड़ा एक निषिद्ध अभ्यास है। इस कार्यान्वयन में, compareAtCents नीचे totalCents विकास में फेंकता है बजाय एक झूठे एंकर को प्रस्तुत करने के।
एक बैज सत्य होना चाहिए। Most chosen एक टियर पर जिसे कोई नहीं चुनता, आपकी अपनी दुकान के बारे में एक झूठा बयान है।

2. फ्री-शिपिंग थ्रेशोल्ड बार

शेष राशि को पैसे में दिखाएं। $6.00 to unlock free shipping। संख्या के बिना एक प्रगति बार सजावट है, और प्रतिशत खरीदार के लिए चलाने के लिए एक दूसरा रूपांतरण है।

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

थ्रेशोल्ड एक आंकड़ा है जिसे आपने अपने मार्जिन के खिलाफ चुना है, न कि एक गोल संख्या जो आपको पसंद आई।
एक बार पहुंचने पर, स्पष्ट रूप से कहें और एनिमेट करना बंद करें। एक बार जो लक्ष्य के बाद जश्न मनाता रहता है वह शोर है।
इसे $0.00 पर खाली कार्ट में न दिखाएं। थ्रेशोल्ड के लगभग 40% से नीचे यह एक दूरी के रूप में पढ़ा जाता है, न कि एक प्रोत्साहन के रूप में।

3. ऑर्डर बम्प

एक नामित वस्तु, एक मूल्य, एक कारण, एक अनचेक बॉक्स। कुल राशि के ऊपर, कार्ट सामग्री के नीचे।

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

कभी पूर्व-टिक नहीं। निर्देश 2011/83/EU का अनुच्छेद 22 मुख्य दायित्व से परे किसी भी भुगतान के लिए स्पष्ट सहमति की आवश्यकता है और एक अनुमानित हाँ को वापसी योग्य बनाता है। कई वाणिज्यिक अपसेल विजेट फैक्ट्री डिफ़ॉल्ट के रूप में पूर्व-टिक भेजते हैं। इस कार्यान्वयन में checked प्रॉप के पास true शुरू करने का कोई तरीका नहीं है।
कभी गेट नहीं। चेकआउट को एक स्क्रीन के साथ बाधित न करें जिसे स्वीकार या अस्वीकार किया जाना चाहिए। खरीदार ने फैसला किया था; आपने उनके बटन को एक प्रश्न से बदल दिया।
कभी कैरोसेल नहीं। एक वस्तु। छह का ग्रिड उस क्षण एक नया ब्राउज़िंग निर्णय है जब आप एक पुष्टिकरण चाहते थे।
कार्ट से काफी नीचे मूल्य। समान मूल्य पर एक पूरक दूसरी खरीद के रूप में पढ़ा जाता है और पूरे निर्णय को फिर से खोलता है।

4. स्टिकी ऐड-टू-कार्ट (मोबाइल)

बटन स्क्रीन छोड़ देता है जिस क्षण खरीदार विवरण पढ़ता है। 390px व्यूपोर्ट पर यह अधिकांश सत्र है।

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

केवल इनलाइन बटन के दृश्य से बाहर स्क्रॉल होने के बाद प्रकट होता है, कभी उसके ऊपर नहीं।
चयनित टियर का कुल वहन करता है, ताकि एक नज़र ऊपर स्क्रॉल करने की जगह ले।
iOS पर सुरक्षित क्षेत्र का सम्मान करता है। env(safe-area-inset-bottom) कार्यान्वयन में है।
768px से ऊपर छिपा हुआ, जहां इनलाइन बटन अभी भी पहुंच योग्य है।

Claude Code प्लगइन के रूप में इंस्टॉल करें

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

फिर, एजेंट में:

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.

कौशल ऊपर के नियमों को वहन करता है, इसलिए एजेंट एक स्टेपर के बजाय एक रेडियो समूह बनाता है, और उन दो पैटर्न को अस्वीकार करता है जो EU में अवैध हैं।

यह क्या नहीं है

यह एक डिज़ाइन सिस्टम नहीं है, और यह आपके पृष्ठ को अच्छा नहीं दिखाएगा। यह चार घटक हैं जिनके साथ वाणिज्यिक तर्क जुड़ा है, क्योंकि वह तर्क वही है जो हर जगह गायब है। यदि आपका पृष्ठ भी उत्पन्न दिखता है, तो यह एक अलग समस्या है जिसका एक अलग समाधान है।

यह एक A/B परीक्षण ढांचा नहीं है, और यह आपको लिफ्ट का वादा नहीं करता है। प्रति संस्करण लगभग चालीस हज़ार सत्रों से नीचे एक स्प्लिट टेस्ट एक वास्तविक प्रभाव को शोर से अलग नहीं कर सकता, जो अधिकांश स्टोर हैं। ये चार घटक आपको जो देते हैं वह एक ज्ञात चूक का निष्कासन है, जिसे करने के लिए परीक्षण की आवश्यकता नहीं है।