Someone reports a storefront issue on your Salesforce Commerce Cloud site through Marker.io. Instead of switching between tabs, your AI tool reads the issue and helps fix it directly in your project. This guide shows how to connect both Marker.io MCP and Salesforce Commerce Cloud MCP to the same AI tool.
What you can do
When both servers are connected, your AI tool can:
Read Marker.io issues, screenshots, properties, and technical context
Work with SCAPI schemas, cartridges, and storefront components
Deploy cartridges and push MRT bundles
Mark issues as resolved in Marker.io when the fix is done
The Salesforce Commerce Cloud MCP server is a development tool. It helps your AI understand your storefront project and work with Commerce Cloud APIs. It supports B2C Commerce, PWA Kit, and Storefront Next projects.
For a full list of Marker.io MCP tools, see MCP Integration (Model Context Protocol).
Before you start
A Marker.io account with at least one website project
Marker.io MCP connected to your AI tool. Follow MCP setup guides if you haven't done this yet.
A Salesforce Commerce Cloud project set up locally
Node.js 22 or later
An MCP-compatible AI tool (Claude Code, Cursor, VS Code, or similar)
Salesforce Commerce Cloud setup
Salesforce provides an official B2C Commerce MCP server that runs locally in your project. It auto-detects your project type and exposes the right tools. See the Salesforce Commerce Cloud MCP documentation for details.
The server reads your dw.json file for credentials. If you don't have one, set these environment variables instead:
SFCC_CLIENT_IDandSFCC_CLIENT_SECRETfor OAuthSFCC_SERVER,SFCC_USERNAME, andSFCC_PASSWORDfor WebDAV access
Add to your AI tool
Run this from your Commerce Cloud project directory.
Example for Claude Code
claude mcp add --transport http marker-io https://connect.marker.io/mcp claude mcp add --transport stdio --scope project b2c-dx-mcp -- npx -y @salesforce/b2c-dx-mcp@latest --allow-non-ga-tools
The server starts automatically and detects your project type from the directory contents.
Using a different AI tool? See MCP setup guides for Marker.io and add the Salesforce server alongside it.
Workflow: fix a storefront issue
Here's what a typical workflow looks like once both servers are connected.
A reporter submits an issue in Marker.io: "The product grid on the category page shows three columns instead of four on desktop."
In your AI tool, ask: "List open issues from Marker.io."
The AI reads the issue details and screenshot.
Ask: "Fix the layout issue mentioned in this Marker.io report."
The AI analyzes your storefront code and updates the component.
Ask: "Mark the Marker.io issue as resolved."
That's it. No tab switching, no copy-pasting.
Tips
You can ask the AI to handle multiple issues in a single prompt.
The AI can read Marker.io screenshots to understand visual context, not just text descriptions.
The server auto-detects whether your project uses PWA Kit, Storefront Next, or cartridges, and exposes the right tools.
For content changes (product descriptions, promotions), edit the content directly in Business Manager.
Need Help?
If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.