epicmerch-mcp 1.1.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "epicmerch-mcp",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "MCP server for EpicMerch — integrates e-commerce into Claude and ChatGPT",
   "type": "module",
   "main": "src/index.js",

package/skills/epicmerch-orders.md

@@ -39,7 +39,8 @@ export default function Cart({ onCheckout }) {
 
   const remove = async (productId) => {
     await store.cart.remove(productId);
-    store.cart.get().then(setCart);
+    // Optimistic local update — no need to re-fetch the whole cart.
+    setCart(c => ({ ...c, items: (c.items || []).filter(i => i.productId !== productId) }));
   };
 
   const total = cart.items?.reduce((s, i) => s + i.price * i.qty, 0) ?? 0;
@@ -84,22 +85,29 @@ export default function Checkout({ cart, onSuccess }) {
   const placeOrder = async () => {
     await loadRazorpay();
     const total = cart.items.reduce((s, i) => s + i.price * i.qty, 0);
-    const { orderId } = await store.orders.create({
+
+    // ONE call to /customer/orders is enough — the server creates the
+    // EpicMerch order AND the Razorpay order in a single transaction and
+    // returns both back. Do NOT separately call store.payment.createOrder
+    // here; doing so creates an orphan second Razorpay order AND can
+    // trigger an idempotency-key collision against /customer/orders.
+    const orderResult = await store.orders.create({
       orderItems: cart.items.map(i => ({ productId: i.productId, qty: i.qty, price: i.price })),
       shippingAddress: address,
       paymentMethod: 'Razorpay',
       totalPrice: total,
     });
-    const config = await store.payment.getConfig();
-    const { razorpayOrderId } = await store.payment.createOrder(total * 100, orderId);
+
     const rzp = new window.Razorpay({
-      key: config.razorpayKeyId,
-      order_id: razorpayOrderId,
-      amount: total * 100,
+      key: orderResult.razorpayKeyId,
+      order_id: orderResult.razorpayOrderId,
+      amount: orderResult.amount,
+      currency: orderResult.currency,
+      name: orderResult.merchantName,
       handler: async (response) => {
-        await store.payment.verify({ ...response, orderId });
+        await store.payment.verify({ ...response, orderId: orderResult.orderId });
         await store.cart.clear();
-        onSuccess(orderId);
+        onSuccess(orderResult.orderId);
       },
     });
     rzp.open();

package/skills/epicmerch-payments.md

@@ -0,0 +1,86 @@
+---
+name: epicmerch-payments
+description: Set up payments on an EpicMerch store — help the merchant pick between Razorpay (India, default) and Stripe (international), then route to the right setup skill.
+---
+
+# EpicMerch Payments — the umbrella
+
+This is the entry point for any "set up payments" / "configure checkout" / "add card payments" intent. Your job is to figure out **which processor the merchant should use**, then hand off to the matching detailed skill.
+
+## Step 1: Check what's already configured
+
+Before asking anything, call `merchant_get_checkout_settings()`. The response tells you:
+
+- `checkoutType` — current active flow (`"epicmerch"`, `"stripe"`, or `"shiprocket"`)
+- `razorpayKeyId` (string or null) + `razorpayKeySecretIsSet` (bool)
+- `stripePublishableKey` (string or null) + `stripeSecretKeyIsSet` (bool) + `stripeWebhookSecretIsSet` (bool)
+
+Decide based on what's there:
+
+| Current state | Suggested action |
+|---|---|
+| Nothing configured | Help the merchant pick + set up (continue to Step 2) |
+| Razorpay configured, `checkoutType: epicmerch` | Tell them: "Razorpay is already live on your store. Want to add Stripe as a backup / switch to Stripe?" |
+| Stripe configured, `checkoutType: stripe` | Tell them: "Stripe is already live. Want to switch back to Razorpay?" |
+| Both configured, only one active | Tell them which is active + ask if they want to switch |
+
+If something's clearly already set up and they didn't ask to change it, stop here. Don't redo configured work.
+
+## Step 2: Help them pick
+
+If nothing is configured (or they want to add a new one), help them choose:
+
+| Question | Razorpay | Stripe |
+|---|---|---|
+| Where are most of your customers? | India 🇮🇳 | International 🌍 |
+| Currency you charge in? | INR primarily | USD, EUR, GBP, AUD, etc. |
+| Payment methods you want? | UPI, netbanking, Indian cards, wallets | Cards, Apple Pay, Google Pay, Stripe Link |
+| Compliance | RBI-compliant by default | Stripe handles PCI; you handle GDPR |
+| Setup time | ~5 min if account exists | ~10 min (needs webhook config) |
+| Account onboarding | KYC ~24h (already done usually) | Stripe activation can take a day |
+
+Ask the merchant ONE question that disambiguates. Don't make them read the table. The best single question is usually:
+
+> "Where are most of your customers — India, or international?"
+
+- **India only** → Razorpay
+- **International / mostly outside India** → Stripe
+- **Both / not sure** → ask: "What currency do you want to charge in?" then route accordingly.
+
+## Step 3: Hand off to the specific skill
+
+Once you know which one:
+
+- **Razorpay** → hand off to `/epicmerch-razorpay`. Don't try to configure it inline; the specific skill has the right Razorpay-dashboard URLs, key format hints, and the activation step.
+- **Stripe** → hand off to `/epicmerch-stripe`. Same reasoning — that skill has the webhook URL, the test recipe, and the activation step.
+
+If you're running inside a client that doesn't support slash command handoff (e.g. **Codex**), invoke the same MCP tools yourself:
+
+**For Razorpay inline:**
+```
+merchant_configure_razorpay({ keyId: "rzp_live_...", keySecret: "..." })
+merchant_set_checkout_type({ type: "epicmerch" })
+merchant_get_checkout_settings()    // verify
+merchant_diagnose()                  // confirm readiness
+```
+
+**For Stripe inline:**
+```
+merchant_configure_stripe({ publishableKey: "pk_live_...", secretKey: "sk_live_...", webhookSecret: "whsec_..." })
+merchant_test_stripe_connection()
+merchant_set_checkout_type({ type: "stripe" })
+```
+
+## Step 4: After setup
+
+Once whichever processor is live, suggest:
+
+- "Want to test? Place a small test order on your storefront. With test keys, no real money moves; with live keys, you can refund it after."
+- "Need to set up Shiprocket for shipping? Use `merchant_get_logistics_settings` first to see what's there."
+- "Ready to launch? Run `merchant_diagnose()` — I'll check everything."
+
+## Style
+
+- Don't ask "Razorpay or Stripe?" out of context. ALWAYS check current state first (Step 1) — if it's set up, just confirm.
+- Don't pile up questions. One at a time.
+- Never paste the merchant's secret back at them — refer to it as `"the secret you provided"`. Treat secrets as write-only.

package/skills/epicmerch-razorpay.md

@@ -0,0 +1,98 @@
+---
+name: epicmerch-razorpay
+description: Set up Razorpay payments for an EpicMerch store conversationally — get the Key ID + Secret from Razorpay's dashboard, save them, and activate the EpicMerch Checkout flow.
+---
+
+# EpicMerch Razorpay Setup
+
+You're helping a merchant configure Razorpay as their payment processor. This pairs Razorpay with EpicMerch's default checkout flow (Razorpay for payments + Shiprocket for shipping). Walk them through these steps.
+
+## Step 1: Confirm they have a Razorpay account
+
+Ask: "Do you already have a Razorpay account at dashboard.razorpay.com? If not, sign up first — it's free and KYC takes ~24 hours."
+
+If they're in India and just starting out, Razorpay is the most common choice. For international merchants, hand off to `/epicmerch-stripe` instead.
+
+## Step 2: Decide test vs live mode
+
+Ask: "Are you setting up for testing (`rzp_test_...` keys), or going live with real customers (`rzp_live_...`)?"
+
+Make sure they understand:
+- **Test keys** — no real money. Use Razorpay's test card numbers from their docs. Switch to live before launching.
+- **Live keys** — real money. Account must be activated (KYC complete + bank account linked).
+
+## Step 3: Collect their API keys
+
+Tell them:
+
+> "In a new browser tab, open https://dashboard.razorpay.com → Settings → API Keys → Generate Key (or Show, if you've generated one before).
+>
+> Copy these two values:
+> - **Key ID** — looks like `rzp_live_XXXXX` or `rzp_test_XXXXX`
+> - **Key Secret** — long random string. Razorpay only shows it ONCE when you generate. If you've already saved it somewhere safe, paste it now."
+
+If the merchant lost their secret, tell them: "You'll need to regenerate the key pair in Razorpay's dashboard. The old Key ID stops working when you do this, so update both fields below."
+
+## Step 4: Save them
+
+Call:
+
+```
+merchant_configure_razorpay({
+  keyId:     "rzp_live_XXXXX",
+  keySecret: "your_secret_here"
+})
+```
+
+The server encrypts the secret before storing. The response confirms the save with `razorpayKeyId` echoed back and `razorpayKeySecretIsSet: true`.
+
+## Step 5: Activate the checkout
+
+Razorpay only powers payments under EpicMerch's default checkout flow. Activate it:
+
+```
+merchant_set_checkout_type({ type: "epicmerch" })
+```
+
+This sets the storefront to use EpicMerch Checkout (Razorpay payments + Shiprocket shipping). If the merchant was previously on Stripe or Shiprocket-managed checkout, this switches them over.
+
+## Step 6: Verify it took effect
+
+Call `merchant_get_checkout_settings()` and confirm the response includes:
+- `checkoutType: "epicmerch"`
+- `razorpayKeyId` matching what you just set
+- `razorpayKeySecretIsSet: true`
+
+If those line up, you're done.
+
+## Step 7: Smoke test (optional but recommended)
+
+Tell the merchant: "Want me to do a quick health check? I'll look at your full store readiness, including payment config."
+
+Then call `merchant_diagnose()`. Read off the `payment.razorpayConfigured` value — should be `true` — and the `readinessScore`.
+
+## Step 8: Done
+
+Say:
+
+> "Razorpay is now live on your storefront. Customers will see Razorpay's payment widget at checkout — cards, UPI, netbanking, wallets. **Make sure you're using live keys before launch** — test keys won't charge real money."
+
+If they're on test keys, remind them again: "When you're ready to launch, repeat Steps 3–4 with live keys."
+
+## Style
+
+- Ask one question at a time. Don't dump all the steps at once.
+- After each `merchant_*` call, read back the relevant field so the merchant sees progress.
+- If a save fails (e.g. validation error from the server), surface the error message verbatim — don't paraphrase.
+
+## Troubleshooting
+
+If `merchant_get_checkout_settings` shows `razorpayKeySecretIsSet: false` after Step 4, the secret didn't persist. Causes:
+- Empty string passed (Razorpay secrets are 30+ chars; if the merchant pasted nothing, the field stays empty)
+- Encryption key mismatch on the server side (rare; tell the merchant to check with support)
+
+If Step 5 errors with "must be one of: ...", you typed the wrong checkout type. Use exactly `"epicmerch"` (lowercase).
+
+## Handoff
+
+If the merchant says "actually I want Stripe instead" — switch to `/epicmerch-stripe`. If "what's the difference between Razorpay and Stripe?" — use `/epicmerch-payments` to compare.

package/skills/epicmerch-storefront.md

@@ -0,0 +1,389 @@
+---
+name: epicmerch-storefront
+description: One-shot full EpicMerch storefront scaffold — SDK + Login + ProductCard + ProductList + Cart + Checkout + OrderHistory + .env with auto-generated API key. The "do everything" route under the /epicmerch umbrella.
+---
+
+# EpicMerch Full Storefront Scaffold
+
+You are integrating EpicMerch into this project. EpicMerch is a complete e-commerce backend that handles auth, inventory, orders, and payments. Follow every step below in order without asking for confirmation unless a step explicitly says to ask.
+
+**Idempotency rule (apply throughout):** Before writing any file in the scaffold steps below, check if it already exists. If it does, SKIP that file and tell the user "X already exists — keeping it". Never overwrite existing files. The merchant may already have a polished version of any of these components; preserving their work is more important than completing the scaffold.
+
+## Checklist
+
+- [ ] **Step 0: Survey the project**
+
+List which of the scaffold target files already exist in this project:
+- `src/lib/epicmerch.js`
+- `src/components/Login.jsx`
+- `src/components/ProductCard.jsx`
+- `src/components/ProductList.jsx`
+- `src/components/Cart.jsx`
+- `src/components/Checkout.jsx`
+- `src/components/OrderHistory.jsx`
+- `.env.example`
+- `.env`
+
+Briefly tell the user which already exist (those will be skipped) and which will be created. Then proceed.
+
+- [ ] **Step 1: Detect framework**
+
+Read `package.json`. Determine the framework:
+- If `"react"` or `"vite"` in dependencies → framework = `react`, envPrefix = `VITE_`
+- If `"next"` in dependencies → framework = `react`, envPrefix = `NEXT_PUBLIC_`
+- If `"vue"` in dependencies → framework = `react`, envPrefix = `VITE_`; tell the user: "Vue is not yet natively supported — installing React templates instead."
+- Otherwise → framework = `react`, envPrefix = `VITE_`
+
+Tell the user: "Detected [framework]. Installing EpicMerch SDK..."
+
+- [ ] **Step 2: Install the SDK**
+
+Check `package.json` first. If `"epicmerch"` is already in `dependencies`, skip the install and tell the user "epicmerch SDK already installed". Otherwise:
+
+Run: `npm install epicmerch`
+
+- [ ] **Step 3: Create SDK initializer**
+
+**If `src/lib/epicmerch.js` already exists, skip this step entirely** and tell the user "src/lib/epicmerch.js already exists — keeping it". Otherwise, write `src/lib/epicmerch.js` using the `envPrefix` detected in Step 1 to substitute the env var names:
+
+- For `VITE_` prefix (Vite / React):
+```js
+import EpicMerch from 'epicmerch';
+
+export const store = new EpicMerch({
+  apiKey: import.meta.env.VITE_API_KEY,
+  ...(import.meta.env.VITE_API_URL && { baseUrl: import.meta.env.VITE_API_URL }),
+});
+```
+
+- For `NEXT_PUBLIC_` prefix (Next.js):
+```js
+import EpicMerch from 'epicmerch';
+
+export const store = new EpicMerch({
+  apiKey: process.env.NEXT_PUBLIC_API_KEY,
+  ...(process.env.NEXT_PUBLIC_API_URL && { baseUrl: process.env.NEXT_PUBLIC_API_URL }),
+});
+```
+
+- [ ] **Step 4: Scaffold auth**
+
+**If `src/components/Login.jsx` already exists, skip this step** and tell the user "Login.jsx already exists — keeping it". Otherwise write `src/components/Login.jsx`:
+
+```jsx
+import { useState } from 'react';
+import { store } from '../lib/epicmerch';
+
+export default function Login({ onLogin }) {
+  const [phone, setPhone] = useState('');
+  const [otp, setOtp] = useState('');
+  const [step, setStep] = useState('phone');
+
+  const sendOtp = async () => {
+    await store.auth.sendOtp(phone, 'phone');
+    setStep('otp');
+  };
+
+  const verify = async () => {
+    const result = await store.auth.verifyOtp(phone, otp, {});
+    if (result.token) {
+      store.setCustomerToken(result.token);
+      localStorage.setItem('customerInfo', JSON.stringify(result));
+      onLogin(result);
+    }
+  };
+
+  return (
+    <div>
+      {step === 'phone' ? (
+        <>
+          <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="+919876543210" />
+          <button onClick={sendOtp}>Send OTP</button>
+        </>
+      ) : (
+        <>
+          <input value={otp} onChange={e => setOtp(e.target.value)} placeholder="Enter OTP" />
+          <button onClick={verify}>Verify</button>
+        </>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 5: Scaffold product catalog**
+
+For each of the two files in this step, check existence individually. If a file already exists, skip writing it and tell the user "X already exists — keeping it". Otherwise write it.
+
+Write `src/components/ProductCard.jsx`:
+
+```jsx
+export default function ProductCard({ product, onAddToCart }) {
+  return (
+    <div className="product-card">
+      <img src={product.images?.[0]} alt={product.name} />
+      <h3>{product.name}</h3>
+      <p>₹{product.price}</p>
+      <button onClick={() => onAddToCart(product._id)}>Add to Cart</button>
+    </div>
+  );
+}
+```
+
+Write `src/components/ProductList.jsx`:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { store } from '../lib/epicmerch';
+import ProductCard from './ProductCard';
+
+export default function ProductList() {
+  const [products, setProducts] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [category, setCategory] = useState(undefined);
+  const [query, setQuery] = useState('');
+
+  useEffect(() => { store.categories.list().then(setCategories); }, []);
+
+  useEffect(() => {
+    if (query.trim()) {
+      store.products.search(query).then(d => setProducts(d.products ?? d));
+    } else {
+      store.products.list({ type: category, limit: 12 }).then(d => setProducts(d.products ?? d));
+    }
+  }, [query, category]);
+
+  const addToCart = (productId) => store.cart.add(productId, 1);
+
+  return (
+    <div>
+      <input
+        placeholder="Search products..."
+        value={query}
+        onChange={e => setQuery(e.target.value)}
+      />
+      <div>
+        {categories.map(c => (
+          <button key={c} onClick={() => { setQuery(''); setCategory(c === 'All' ? undefined : c); }}>{c}</button>
+        ))}
+      </div>
+      <div className="product-grid">
+        {products.map(p => <ProductCard key={p._id} product={p} onAddToCart={addToCart} />)}
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 5b: Wire up an existing search bar (only if `ProductList.jsx` was skipped)**
+
+If you wrote a fresh `ProductList.jsx` in Step 5, skip this step — the canonical scaffold already has search wired.
+
+If `ProductList.jsx` was SKIPPED because it already existed, the merchant has their own UI. They may have a search bar somewhere — in a `Navbar`, a `Header`, a dedicated `SearchBar.jsx`, a search page, etc. — that isn't currently calling EpicMerch's search API. Detect and offer to wire it up.
+
+**Detection.** Look through `src/` for files containing any of these signals (case-insensitive):
+- `<input` whose `placeholder` mentions `search`
+- A state variable named `query`, `search`, `searchTerm`, `searchQuery`, or `keyword`
+- A handler named `onSearch`, `handleSearch`, `onQueryChange`, or similar
+
+For each match, check whether the file already calls `store.products.search(`. If yes, it's wired — skip silently.
+
+**For each unwired match:** show the merchant the file path and the snippet you found, then say:
+
+> "I noticed a search input in `<path>` that doesn't call EpicMerch's search yet. The one-line wire-up is:
+>
+> ```js
+> import { store } from '../lib/epicmerch';  // add at top if missing
+>
+> // inside the search handler / useEffect:
+> store.products.search(query).then(d => setProducts(d.products ?? d));
+> ```
+>
+> Want me to apply this to your component? (yes / no — I'll leave it alone if no.)"
+
+**WAIT for an explicit yes before editing.** If the merchant declines, move on without changing the file.
+
+If you find no search bar anywhere in `src/`, skip this step silently — don't tell the merchant "no search bar found", just continue to Step 6.
+
+- [ ] **Step 6: Scaffold cart + orders**
+
+For each of the three files in this step (Cart.jsx, Checkout.jsx, OrderHistory.jsx), check existence individually. If a file already exists, skip writing it and tell the user "X already exists — keeping it". Otherwise write it.
+
+Write `src/components/Cart.jsx`:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { store } from '../lib/epicmerch';
+
+export default function Cart({ onCheckout }) {
+  const [cart, setCart] = useState({ items: [] });
+
+  useEffect(() => { store.cart.get().then(setCart); }, []);
+
+  const remove = async (productId) => {
+    await store.cart.remove(productId);
+    store.cart.get().then(setCart);
+  };
+
+  const total = cart.items?.reduce((s, i) => s + i.price * i.qty, 0) ?? 0;
+
+  return (
+    <div>
+      {cart.items?.map(item => (
+        <div key={item.productId}>
+          <span>{item.name} x{item.qty}</span>
+          <span>₹{item.price * item.qty}</span>
+          <button onClick={() => remove(item.productId)}>Remove</button>
+        </div>
+      ))}
+      <p>Total: ₹{total}</p>
+      <button onClick={onCheckout}>Checkout</button>
+    </div>
+  );
+}
+```
+
+Write `src/components/Checkout.jsx`:
+
+```jsx
+import { useState } from 'react';
+import { store } from '../lib/epicmerch';
+
+const loadRazorpay = () =>
+  new Promise((resolve) => {
+    if (window.Razorpay) return resolve(true);
+    const script = document.createElement('script');
+    script.src = 'https://checkout.razorpay.com/v1/checkout.js';
+    script.onload = () => resolve(true);
+    script.onerror = () => resolve(false);
+    document.body.appendChild(script);
+  });
+
+export default function Checkout({ cart, onSuccess }) {
+  const [address, setAddress] = useState({ street: '', city: '', postalCode: '', country: 'India' });
+
+  const placeOrder = async () => {
+    await loadRazorpay();
+    const total = cart.items.reduce((s, i) => s + i.price * i.qty, 0);
+    const { orderId } = await store.orders.create({
+      orderItems: cart.items.map(i => ({ productId: i.productId, qty: i.qty, price: i.price })),
+      shippingAddress: address,
+      paymentMethod: 'Razorpay',
+      totalPrice: total,
+    });
+    const config = await store.payment.getConfig();
+    const { razorpayOrderId } = await store.payment.createOrder(total * 100, orderId);
+    const rzp = new window.Razorpay({
+      key: config.razorpayKeyId,
+      order_id: razorpayOrderId,
+      amount: total * 100,
+      handler: async (response) => {
+        await store.payment.verify({ ...response, orderId });
+        await store.cart.clear();
+        onSuccess(orderId);
+      },
+    });
+    rzp.open();
+  };
+
+  return (
+    <div>
+      <input placeholder="Street" onChange={e => setAddress(a => ({ ...a, street: e.target.value }))} />
+      <input placeholder="City" onChange={e => setAddress(a => ({ ...a, city: e.target.value }))} />
+      <input placeholder="Postal Code" onChange={e => setAddress(a => ({ ...a, postalCode: e.target.value }))} />
+      <button onClick={placeOrder}>Place Order</button>
+    </div>
+  );
+}
+```
+
+Do NOT add any Razorpay script tag to `index.html` — the script loads dynamically only when the user clicks Place Order.
+
+Write `src/components/OrderHistory.jsx`:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { store } from '../lib/epicmerch';
+
+export default function OrderHistory() {
+  const [orders, setOrders] = useState([]);
+
+  useEffect(() => { store.orders.list().then(setOrders); }, []);
+
+  return (
+    <div>
+      <h2>Your Orders</h2>
+      {orders.map(order => (
+        <div key={order._id}>
+          <span>Order #{order._id.slice(-6)}</span>
+          <span> — ₹{order.totalPrice}</span>
+          <span> — {order.status}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 7: Generate API key via MCP + write `.env`**
+
+This step has two parts: write `.env.example` (the template), then generate a real API key and write a working `.env`.
+
+**Part A — `.env.example`:** If `.env.example` already exists, skip writing it and tell the user ".env.example already exists — keeping it". Otherwise write `.env.example`:
+
+```
+VITE_API_KEY=your_epicmerch_api_key_here
+# VITE_API_URL is OPTIONAL — only set it for local development.
+# Production: leave it unset; the SDK defaults to https://api.epicmerch.in/api
+# Local dev: VITE_API_URL=http://localhost:5002/api
+```
+
+Check `.gitignore` — if `.env` is not listed, append `.env` to `.gitignore` before any `.env` file is written.
+
+**Part B — generate a real API key + write `.env`:**
+
+First, read `.env` if it exists. If it already contains a `VITE_API_KEY=` line whose value is NOT the placeholder string `your_epicmerch_api_key_here` (i.e. there's already a real key), skip Part B entirely and tell the user "Existing API key in .env — keeping it".
+
+Otherwise, the merchant is authenticated via the EpicMerch MCP (this skill assumes the MCP is connected — that's how it was invoked). Generate a key by calling the MCP tool:
+
+```
+merchant_generate_api_key({ name: "Storefront" })
+```
+
+The response will include the new key. Extract it (the field is typically `key` or `apiKey` — check the response shape). Then write/update `.env`.
+
+**Production (default).** Write only the key — the SDK already knows the prod URL:
+
+```
+VITE_API_KEY=<the generated key from the MCP response>
+```
+
+**Local development.** Only if the merchant is clearly running against a local EpicMerch server (e.g. they explicitly said so, or their existing `.env` already had a `localhost` URL, or the MCP was wired with `EPICMERCH_API_URL=http://localhost:...`), ALSO write the override:
+
+```
+VITE_API_KEY=<the generated key from the MCP response>
+VITE_API_URL=http://localhost:5002/api
+```
+
+When in doubt, default to the production form (no `VITE_API_URL` line). Don't ask the merchant — guess from context.
+
+**Fallback if MCP isn't available:** If the `merchant_generate_api_key` tool fails or isn't connected, tell the user: "MCP tool unavailable. Generate a key manually at https://epicmerch.in/dashboard → API Keys and add it to .env." Do NOT fail the whole flow — continue to Step 8.
+
+- [ ] **Step 8: Tell the user what to do next**
+
+Print a summary using the actual state of the project:
+
+- List the files you CREATED in this run (skip the ones that were already present).
+- If you skipped any, briefly mention them as "kept as-is".
+- If Step 5b wired up a search bar in an existing component, mention which file you edited and that it now calls `store.products.search()`.
+- If the API key was generated automatically, mention that ".env now has a working VITE_API_KEY — your storefront should load real product data on next refresh."
+- Then output the next-steps block exactly:
+
+```
+Next steps:
+1. (API key auto-generated and saved to .env — if not, get one at https://epicmerch.in/dashboard → API Keys)
+2. Restart your dev server (npm run dev) to pick up the .env changes
+3. Import the new components into your App.jsx where you need them
+
+Need help with payments, analytics, or notifications? Ask me!
+```