Skip to main content

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

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

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)

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)

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)

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

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

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

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

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)

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
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

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

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

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

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

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

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

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.