uxgen

公式

ホスト型MCPで、コーディングエージェントにECコンバージョンの仕組み（数量割引、送料無料のしきい値、注文バンプ、スティッキーなカート追加）を提供し、EUルールも付属しています。

GitHubこのMCPを試すスポンサー

Uxgen MCPで何ができますか？

商品ページに数量割引を追加 — アシスタントに、名前付きティア、通貨単位での割引額、および中央のオプションが事前選択された状態のQuantityBreaksコンポーネントの実装を依頼します。
送料無料のしきい値バーを実装 — FreeShippingBarを使用して、しきい値に達するまでの残り金額を表示し、達成後は明確なメッセージを表示します。
カート合計の上に注文バンプを挿入 — OrderBumpを、名前付きの単一アイテム、価格、理由で設定し、初期状態ではチェックが外れており、チェックアウトを妨げないようにします。
モバイル用のスティッキーなカート追加ボタンを展開 — StickyAddToCartを適用して、インラインボタンが画面外にスクロールした後に選択されたティアの合計を表示し、iOSのセーフエリアを尊重します。
EU準拠の価格設定ルールを適用 — コンポーネントの開発時チェックによって強制されるように、compareAtCentsが実際の以前の価格を反映し、バッジが真実であることを確認します。

ドキュメント

Commerce Kit — AIエージェントが間違えがちな4つのコンポーネント

カートの購入率を上げる4つのコンポーネントの標準仕様とリファレンス実装: 数量ブレーク、送料無料しきい値バー、オーダーバンプ、スティッキーなカート追加ボタン。

MITライセンス。React以外の依存関係はありません。ファイルをコピーするか、プラグインをインストールしてエージェントに任せてください。

このリポジトリが存在する理由

2026年8月25日、私たちはChatGPTとPerplexity(両方ともウェブ検索を有効にした状態)に、buy 2, save 15% のReactコンポーネントを依頼しました。

ChatGPTは数量ステッパーを返し、ソースを一切引用しませんでした。 注釈ゼロ。 Perplexityもステッパーを返し、min、max、step、そして bundleSize プロップを備え、一般的な数量セレクターパターンを引用しました。

両方とも同じ方法で間違っており、その理由が有益な部分です: 彼らが参照できる正規のソースが存在しません。tiered pricing component を検索すると、Googleは価格表に関する2億3700万件の結果を返します。order bump component を検索すると、WooCommerceプラグインに関する2590万件を返します。bundle quantity selector component react を検索すると、JavaScriptバンドルサイズに関する1530万件の結果を返します。

コマースの仕組みにはオープンウェブ上に仕様が存在しないため、モデルは何千回も読んだ最も近いものにフォールバックします。

このリポジトリがその仕様です。

4つのコンポーネント

コンポーネント	購入者に問うこと	配置場所	作用する対象
数量ブレーク	いくつではなく、どのパッケージか	商品ページ	カートが存在する前のすべての注文
送料無料バー	しきい値まであとどれだけか	カート	しきい値の約60%を超えている注文
オーダーバンプ	1つの補完品、はいかいいえか	カート、合計金額の上	確認の瞬間
スティッキーなカート追加ボタン	何も聞かない — ただ到達可能であり続ける	モバイル商品ページ	すべてのモバイルセッション

この順序で構築してください。最初のものは最も早く作用し、注文の最大のシェアに影響します。

1. 数量ブレーク

これはラジオグループです。数値入力ではありません。

この1文がコンポーネント全体です。ステッパーはいくつを尋ねます。これは購入者が実行しなければならない計算であり、2が1より良いアイデアであることを示唆するものは何もありません。名前付きティアのラジオグループはどのパッケージを尋ね、そのうちの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)}
/>

ルール

3ティア、最大4つ。 ベースライン1つ、選択してほしいもの1つ、中間を合理的に見せる天井1つ。5つになると認識が比較に変わります。
非線形のギャップ。 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の価格表示規則は以前の価格の発表を管理します。節約額を大きく見せるために発明された取り消し線の数字は禁止された慣行です。この実装では、totalCents の下の compareAtCents は、偽のアンカーをレンダリングする代わりに開発中にスローします。
バッジは真実でなければなりません。 誰も選ばないティアの Most chosen は、自分のショップについての虚偽の陳述です。

2. 送料無料しきい値バー

残り金額を金額で表示。 $6.00 to unlock free shipping。数字のないプログレスバーは装飾であり、パーセンテージは購入者が実行する2回目の換算です。

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

しきい値は、マージンに対して選択した数字であり、好きな丸い数字ではありません。
到達したら、明確に伝えてアニメーションを停止します。目標後に祝い続けるバーはノイズです。
空のカートで $0.00 に表示しないでください。しきい値の約40%未満では、ナッジではなく距離として読まれます。

3. オーダーバンプ

名前付きアイテム1つ、価格1つ、理由1つ、チェックされていないボックス1つ。 合計の上、カートの内容の下。

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

決して事前チェックしない。 指令2011/83/EU第22条は、主たる義務を超える支払いに対する明示的な同意を要求し、推測された同意は返金可能にします。いくつかの商用アップセルウィジェットは工場出荷時のデフォルトとして事前チェックされて出荷されます。この実装では、checked プロップは true から始める方法がありません。
決してゲートにしない。 受け入れまたは拒否されなければならない画面でチェックアウトを中断しないでください。購入者はすでに決定していました。あなたは彼らのボタンを質問に置き換えました。
決してカルーセルにしない。 1つのアイテム。6つのグリッドは、確認を望んだ瞬間に新しい閲覧決定です。
カートよりかなり低い価格。 同様の価格の補完品は2回目の購入として読まれ、決定全体を再開します。

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で違法な2つのパターンを拒否します。

これが何でないか

これはデザインシステムではなく、ページを美しく見せるものではありません。商業的な理由付けが添付された4つのコンポーネントです。なぜなら、その理由付けが他のどこにも欠けているからです。ページも生成されたように見える場合、それは別の問題であり、別の修正があります。

これはA/Bテストフレームワークではなく、リフトを約束するものではありません。バリアントあたり約4万セッション未満では、分割テストは実際の効果をノイズから分離できません。これはほとんどのストアに当てはまります。これらの4つのコンポーネントが与えるものは、既知の省略の除去であり、テストを必要とせずに行う価値があります。