Bolt.new AI and Salesforce Commerce Cloud integration: Step-by-Step Guide 2025

You integrate Bolt.new with Salesforce Commerce Cloud (SFCC) the same way you integrate any external platform inside a Bolt sandbox: you call SFCC’s real APIs with proper authentication, expose your own backend routes when needed, and keep all keys in environment variables. In practice, the integration is done through SFCC’s OCAPI (Open Commerce API) or Shop API using client credentials or a site-specific auth token. Bolt itself does not “connect” to SFCC — you write the code that calls SFCC’s APIs, test the flows inside Bolt, then deploy the same code to a real server.

 

What Salesforce Commerce Cloud actually exposes

 

Salesforce Commerce Cloud has two real, documented API surfaces:

• OCAPI – REST APIs for data and shop operations (catalog, baskets, products, orders, customers).
• Shop API (a.k.a. “Shopper APIs”) – newer Salesforce Commerce APIs using SLAS (Shopper Login and API Access) for auth.

To integrate from Bolt.new, you only need two things:

• An API client ID (and secret if using client-credential flow).
• The right endpoint URL (varies by realm + site).

 

Auth model you MUST use

 

SFCC uses real OAuth-style tokens. The two valid patterns:

• Client Credentials – used for server-to-server calls (perfect for Bolt backend routes).
• SLAS Shopper Token – used when acting on behalf of a logged-in shopper.

In Bolt.new you put the API credentials into environment variables via the sidebar (never hardcode them):

• SFCC_CLIENT_ID
• SFCC_CLIENT_SECRET
• SFCC_ORG_ID
• SFCC_SHORT_CODE
• SFCC_SITE_ID

 

How to architect the integration inside Bolt

 

Inside Bolt you typically scaffold:

• Frontend (React / Next.js inside Bolt) that calls your backend.
• Backend routes (Node/Express inside Bolt) that call SFCC securely using your env vars.

This keeps your SFCC keys off the client and avoids CORS issues.

 

Minimal working example in Bolt: call SFCC products

 

This is a real pattern that works. It uses OCAPI to fetch products from a site.

import express from "express"
import fetch from "node-fetch"

const app = express()

// Environment variables in Bolt.new (set them in the sidebar!)
const clientId = process.env.SFCC_CLIENT_ID
const clientSecret = process.env.SFCC_CLIENT_SECRET
const shortCode = process.env.SFCC_SHORT_CODE
const siteId = process.env.SFCC_SITE_ID

// Helper for getting an OAuth token using client credentials
async function getAccessToken() {
  const url = `https://${shortCode}.api.commercecloud.salesforce.com/shopper/auth/v1/organizations/${siteId}/oauth2/token`

  const res = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`
  })

  if (!res.ok) {
    throw new Error("SFCC auth failed")
  }

  const data = await res.json()
  return data.access_token
}

// Example route Bolt frontend can call
app.get("/api/products", async (req, res) => {
  try {
    const token = await getAccessToken()

    const url = `https://${shortCode}.api.commercecloud.salesforce.com/s/` +
                `${siteId}/dw/shop/v21_3/product_search?q=shirts&client_id=${clientId}`

    const sfccRes = await fetch(url, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })

    const data = await sfccRes.json()
    res.json(data)
  } catch (err) {
    res.status(500).json({ error: err.message })
  }
})

export default app

This is the simplest “Bolt backend → SFCC → return data to frontend” pattern. You can test it instantly inside Bolt’s API panel.

 

Frontend usage inside Bolt

 

In a React or Next.js file inside Bolt:

async function loadProducts() {
  const res = await fetch("/api/products") // calls your backend
  const json = await res.json()
  console.log(json)
}

This keeps all SFCC secrets hidden from the browser.

 

What changes when you deploy outside Bolt

 

Very little. Your steps:

• Copy the server code into your real backend environment (Vercel, AWS, Heroku, etc.).
• Move environment variables into that platform’s secret manager.
• Point the frontend to the deployed backend instead of the Bolt local backend.

Since SFCC APIs are standard REST+OAuth, everything is fully portable.

 

Common pitfalls to avoid

 

• Wrong hostname: SFCC uses short-code domains, not custom domains.
• Forgetting client\_id in OCAPI URLs: many endpoints require it even if you send a Bearer token.
• Trying to call SFCC directly from frontend: breaks CORS and exposes secrets.
• Mixing Shop API and OCAPI endpoints without proper tokens: they use different auth flows.

If you follow backend-first integration inside Bolt, SFCC works reliably and quickly.