AI Prompts for Commerce Engine
Copy these prompts into your AI coding assistant (Claude, Cursor, Copilot, etc.) to generate production-quality Commerce Engine code. Each prompt includes the right context for accurate results.For best results, make sure the Commerce Engine Agent Skill is installed in your project, or paste the LLM docs URL so your assistant can fetch live API details.
Type import rule: All prompts assume types are imported directly from the SDK package (e.g.,
import type { Cart, Product, CreateCartBody } from "@commercengine/storefront-sdk"), never hand-written. If the AI generates custom interfaces for API types, ask it to use the SDK’s named exports instead. See Importing Types for details.Type Lookup
Look Up a Schema Definition
Copy
I need the exact TypeScript definition for the Commerce Engine Cart type.
Fetch it from: curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/schemas/Cart
Then show me how to import and use this type in my code. Remember: always import directly from the SDK package as a named export, never define custom interfaces:
import type { Cart } from "@commercengine/storefront-sdk";
Look Up an SDK Method Signature
Copy
I need the exact TypeScript signature and usage example for the createCart SDK method.
Fetch it from: curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/create-cart
Show me the full method call with proper typing. Import operation types directly from the SDK:
import type { CreateCartBody, CreateCartContent } from "@commercengine/storefront-sdk";
SDK Setup
Initialize SDK (React / Vue / SPA)
Copy
Set up the Commerce Engine TypeScript SDK for a client-side React app.
Requirements:
- Use @commercengine/storefront-sdk
- Use BrowserTokenStorage for automatic token persistence
- Use environment variables for storeId and apiKey (REACT_APP_ prefix)
- Export the SDK instance from lib/storefront.ts
- Include onTokensUpdated and onTokensCleared callbacks
Reference: https://llm-docs.commercengine.io/sdk/
Fetch with: curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/anonymous-user
Initialize SDK (Next.js App Router)
Copy
Set up the Commerce Engine Next.js SDK for an App Router project.
Requirements:
- Use @commercengine/storefront-sdk-nextjs
- Create lib/storefront.ts that re-exports the storefront function
- Add StorefrontSDKInitializer to the root layout
- Show how to use storefront() in client components (no cookies)
- Show how to use storefront(cookies()) in server components
- Use NEXT_PUBLIC_STORE_ID and NEXT_PUBLIC_API_KEY env vars
Reference: https://llm-docs.commercengine.io/sdk/
Initialize SDK (Node.js Backend)
Copy
Set up the Commerce Engine SDK for a Node.js Express backend.
Requirements:
- Use @commercengine/storefront-sdk with MemoryTokenStorage
- Configure for server-side usage with proper timeout
- Show middleware that creates per-request SDK instances with user tokens
- Include health check endpoint using sdk.helpers.retrieveAllCountries()
Reference: https://llm-docs.commercengine.io/sdk/
Authentication
Email OTP Login Flow
Copy
Implement a complete email OTP login flow using the Commerce Engine SDK.
Steps:
1. Call sdk.auth.loginWithEmail({ email, register_if_not_exists: true })
2. Show OTP input UI
3. Call sdk.auth.verifyOtp({ otp, otp_token, otp_action }) with the tokens from step 1
4. Tokens are automatically managed by the SDK after verification
Requirements:
- Handle both login and registration (register_if_not_exists: true)
- Show loading states
- Handle errors for each step (invalid email, wrong OTP, expired OTP)
- Use the { data, error } pattern, not try/catch
Reference: fetch these for exact signatures:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/login-with-email
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/verify-otp
Phone OTP Login Flow
Copy
Implement a phone number OTP login flow using the Commerce Engine SDK.
Steps:
1. Call sdk.auth.loginWithPhone({ phone, country_code, register_if_not_exists: true })
2. Show OTP input UI
3. Call sdk.auth.verifyOtp({ otp, otp_token, otp_action })
Requirements:
- Include country code selector
- Handle errors for each step
- Use { data, error } pattern
Reference: fetch these for exact signatures:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/login-with-phone
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/verify-otp
Next.js Server Action Auth
Copy
Implement Commerce Engine authentication as Next.js Server Actions.
Requirements:
- Create server actions for: sendOTP (email), verifyOTP, logout
- Use storefront(cookies()) in every server action for token persistence
- Use redirect() after successful auth
- IMPORTANT: Auth endpoints that return tokens MUST be in Server Actions, NOT Server Components
- Handle errors and return them to the client
Reference: https://llm-docs.commercengine.io/sdk/
Product Catalog
Product Listing Page
Copy
Build a product listing page using the Commerce Engine SDK.
Requirements:
- Fetch products with sdk.catalog.listProducts()
- Support pagination (page, limit query params)
- Support filtering by category_id
- Display: product name, image, selling_price, slug
- Link each product to /products/[slug]
- Handle loading and error states
- Use { data, error } pattern
- Import types directly from SDK: import type { Product, ListProductsContent } from "@commercengine/storefront-sdk"
- Never create custom Product interfaces — the SDK exports all schema types as named exports
Reference: fetch for exact response shape and TypeScript definitions:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/list-all-products
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/schemas/Product
Product Detail Page (Next.js SSG)
Copy
Build a statically generated product detail page in Next.js App Router using Commerce Engine.
Requirements:
- Use generateStaticParams() to pre-render product pages from sdk.catalog.listProducts()
- Fetch product detail with sdk.catalog.getProduct({ product_id_or_slug: slug })
- Display: name, description, images, price, variants, availability
- Include AddToCart button component (client component)
- Use storefront() without cookies (build context uses memory storage)
- Configure NEXT_BUILD_CACHE_TOKENS=true in next.config.ts for efficient token reuse
Reference: fetch for exact response shape:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/retrieve-a-product-detail
Product Search
Copy
Implement product search using the Commerce Engine SDK.
Requirements:
- Use sdk.catalog.searchProducts({ query: { q: searchTerm } })
- Debounce search input (300ms)
- Show search results with product name, image, price
- Handle empty results and errors
- Support keyboard navigation of results
Reference: fetch for exact signature:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/search-products
Cart & Checkout
Shopping Cart
Copy
Build a complete shopping cart using the Commerce Engine SDK.
Requirements:
- Fetch cart with sdk.cart.retrieveCartUsingUserId(userId)
- Add items with sdk.cart.addDeleteCartItem(cartId, { product_id, variant_id, quantity })
- IMPORTANT: variant_id is ALWAYS required, pass null for products without variants
- Update quantity by calling addDeleteCartItem with new quantity
- Remove items by setting quantity to 0
- Display: items, quantities, selling_price, sub_total, tax_amount, shipping_amount, grand_total
- Delete entire cart with sdk.cart.deleteCart(cartId)
- Import types directly from SDK: import type { Cart, CartItem, UpdateCartItem } from "@commercengine/storefront-sdk"
- Never create custom Cart or CartItem interfaces — the SDK exports all schema types as named exports
Reference: fetch for exact TypeScript definitions and signatures:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/adddelete-cart-item
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/schemas/Cart
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/schemas/UpdateCartItem
Apply Coupon / Promotions
Copy
Implement coupon and promotion handling for the Commerce Engine cart.
Requirements:
- Apply coupon: sdk.cart.applyCoupon(cartId, { coupon_code: "CODE" })
- Remove coupon: sdk.cart.removeCoupon(cartId, { coupon_code: "CODE" })
- List available coupons: sdk.cart.retrieveAllCoupons()
- List available promotions: sdk.cart.retrieveAllPromotions()
- Show discount breakdown in cart summary
- Handle invalid/expired coupon errors
Reference: fetch for exact signatures:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/apply-coupon
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/retrieve-all-coupons
Checkout Flow
Copy
Implement a checkout flow using the Commerce Engine SDK.
Steps:
1. Update cart address: sdk.cart.updateCartAddress(cartId, { shipping_address, billing_address })
2. Check fulfillment: sdk.cart.checkFulfillment(cartId)
3. Get fulfillment options: sdk.cart.retrieveFulfillmentOptions(cartId)
4. Update fulfillment preference: sdk.cart.updateFulfillmentPreference(cartId, { ... })
5. Create order: sdk.order.createOrder({ ... })
6. Check payment status: sdk.order.retrievePaymentStatus(orderId)
Requirements:
- Multi-step form with address, shipping method, payment, review
- Handle errors at each step
- Show order summary with totals
Reference: fetch for exact signatures:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/create-order
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/update-cart-address
Customer Account
Customer Profile
Copy
Build a customer profile/account page using the Commerce Engine SDK.
Requirements:
- Fetch user: sdk.auth.retrieveUser()
- Fetch customer: sdk.customer.retrieveCustomerDetail(userId)
- Update customer: sdk.customer.updateCustomerDetail(userId, { ... })
- Manage addresses: sdk.customer.retrieveAllAddresses(userId), createAddress, updateParticularAddress, removeParticularAddress
- Show order history: sdk.order.retrieveAllOrders()
- Check loyalty points: sdk.customer.retrieveLoyaltyDetails(userId)
Reference: fetch for exact signatures:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/retrieve-a-user
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/operations/retrieve-all-addresses
Webhooks
Webhook Handler
Copy
Set up webhook handlers for Commerce Engine order events.
Requirements:
- Handle these webhook events: order.created, order.confirmed, order.cancelled, payment.successful, payment.failed, shipment.created, shipment.delivered
- Verify webhook signatures
- Process events asynchronously (queue for background processing)
- Return 200 quickly to acknowledge receipt
- Log webhook payloads for debugging
Reference: fetch for webhook payload schemas:
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/webhooks/
curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/webhooks/order.created
Full Application
Complete Next.js Storefront
Copy
Scaffold a complete Next.js App Router storefront using Commerce Engine.
Requirements:
- Use @commercengine/storefront-sdk-nextjs
- Pages: Home, Product List, Product Detail, Cart, Checkout, Account, Orders
- Auth: Email OTP login via Server Actions
- SSG: Pre-render product pages with generateStaticParams
- Cart: Client-side cart with optimistic updates
- Layout: StorefrontSDKInitializer in root layout
- Token caching: NEXT_BUILD_CACHE_TOKENS=true for build optimization
- Error handling: Use { data, error } pattern everywhere
Full SDK reference: https://llm-docs.commercengine.io/
API operations: https://llm-docs.commercengine.io/operations/
React Context + Hooks Setup
Copy
Create a complete React context and hooks setup for Commerce Engine.
Requirements:
- CommerceProvider: Shares SDK instance via context
- AuthProvider: Manages auth state (user, isLoggedIn, login, logout)
- useCart hook: cart state, addItem, updateItem, removeItem, clearCart, itemCount
- useProducts hook: fetch products with filters, pagination, loading state
- All hooks use { data, error } pattern from SDK
- Import ALL types directly from the SDK — never define custom interfaces:
import type { Cart, Product, CartItem, UpdateCartItem } from "@commercengine/storefront-sdk";
import type { CreateCartBody, ListProductsContent } from "@commercengine/storefront-sdk";
Reference: https://llm-docs.commercengine.io/sdk/
Fetch type definitions: curl -H "Accept: text/markdown" https://llm-docs.commercengine.io/storefront/schemas/Cart
Pro tip: When using these prompts, paste the relevant
curl commands so your AI assistant can fetch the latest API schemas directly. This ensures the generated code matches the current API exactly.