From Prompt to Production: Agentic Sitecore Workflows with MCP

-

Two practical paths: Option A (Marketer MCP, no code) and Option B (Community MCP server, extensible). We’ll go from a natural‑language prompt to a published landing page.

Previously on the blog This article continues my earlier post, MCP‑Powered AI Development Workflow in Sitecore XM Cloud — a quick conceptual primer.

Why MCP (in one paragraph)

MCP → Safe, typed tools

Model Context Protocol (MCP) turns natural language into governed, typed tool calls. In Sitecore, Marketer MCP exposes tools like create page, add component, and upload asset that map to the Agent API so agents can take real actions with guardrails and auditing.

The agentic workflow: how it works

When you chat with Claude (which is already connected to your Marketer MCP), Claude acts as an AI agent — it calls the Sitecore APIs on your behalf, fetches IDs, makes decisions, and creates items without you needing to open Sitecore at all.

Architecture Overview

Prerequisites

  • An XM Cloud project (non‑prod environment is fine).
  • Automation credentials (Client ID/Secret) to request OAuth tokens against https://auth.sitecorecloud.io/oauth/token
  • Access to Marketer MCP for Option A. If it doesn’t appear in your LLM client, your org/user likely lacks enablement/permissions.
  • A supported LLM client (Claude Desktop, Cursor IDE, Copilot Studio).
  • (Recommended) A Next.js front end on Vercel configured to query Experience Edge.
  • Node 18+ and Git
Background reading New to MCP? Skim the overview: MCP‑Powered AI Development Workflow in Sitecore XM Cloud.

Option A — Use Marketer MCP (No Code)

Step A1 — Connect your LLM client

1. Open Claude Desktop Settings

Go to Settings → Connectors (or use the "+" button in the chat → Connectors).

2. Add a new MCP Server

Click Add new MCP Server and enter the following:
Server name: Marketer MCP (or any name you prefer)
Server URL: The Sitecore Marketer MCP remote URL 
(https://edge-platform.sitecorecloud.io/mcp/marketer-mcp-prod)

Authentication type: Set to External / OAuth 2.0

In clients like Claude Desktop or Cursor, you point to the remote MCP URL, keep auth type external, and you're in.

3. Authorize with Sitecore

Once you connect, an authorization dialog will appear. In the Marketer MCP authorization request dialog, click Allow Access. You'll be prompted to log in to your Sitecore Cloud Portal, then select the organization and tenant you want to use. 

4. Start using it

Once connected, you can use natural language in Claude to trigger Sitecore actions — for example, creating pages, adding components, or localizing content — without navigating the Sitecore UI or writing API calls.

Step A2 — Prompt to create the page + component

Claude — Prompt
Create a Landing Page titled "Spring Sale 2026" under "/Campaigns" using our standard Page template.
Add a Hero component in the main placeholder with headline "Up to 50% Off" and a CTA labeled "Shop Now" linking to "/products".
Return the new item’s path and ID.

You will receive a similar response for the above prompt, and the page will be created as shown in the screenshot below.



Step A3 — Publish to Experience Edge

Claude — Prompt
Publish the new page and its dependencies to Experience Edge.

Step A4 — Validate on the front end

Check the route Open your site (e.g., /campaigns/spring-sale-2026) on Vercel. If you use ISR or content webhooks, ensure the rebuild is triggered.

Option B — Use the Community MCP Server (Extensible)

Prefer full control? Run the open‑source mcp‑sitecore‑server. You can compose tools across Item Service, GraphQL, and SPE and expose a single, high‑level action.

Approach 1: Setting Up the Sitecore Community MCP Server (No Install Required)

Step 1 — Configure Your MCP Client

Add the following to your MCP client config (e.g. Claude Desktop's claude_desktop_config.json):

Claude_desktop_config.json
{
  "mcpServers": {
    "Sitecore": {
      "type": "stdio",
      "command": "npx",
      "args": ["@antonytm/mcp-sitecore-server@latest"],
      "env": {
        "TRANSPORT": "stdio",
        "GRAPHQL_ENDPOINT": "https://<your-instance>.sitecorecloud.io/sitecore/api/graph/",
        "GRAPHQL_SCHEMAS": "edge",
        "GRAPHQL_API_KEY": "<your-api-key>",
        "GRAPHQL_HEADERS": "",
        "POWERSHELL_SERVER_URL": "https://<your-instance>.sitecorecloud.io/",
        "POWERSHELL_USERNAME": "admin",
        "POWERSHELL_PASSWORD": "<your-password>",
        "POWERSHELL_DOMAIN": "sitecore",
        "ITEM_SERVICE_SERVER_URL": "https://<your-instance>.sitecorecloud.io/",
        "ITEM_SERVICE_USERNAME": "admin",
        "ITEM_SERVICE_PASSWORD": "<your-password>"
      }
    }
  }
}
`npx` will automatically pull the latest version of `@antonytm/mcp-sitecore-server` at runtime — no global install step required. 

Step 2 — Restart Claude Desktop

After saving the config, fully restart Claude Desktop. The Sitecore MCP server will appear as a connected tool.

Step 3 — Prompt your request

After restarting Claude Desktop, a hammer icon appears in the chat input bar. You can then provide a prompt to create a page under the Campaigns site. Claude silently invokes the MCP tool and creates the item in Sitecore. The complete workflow for processing the request is outlined below.

Approach 2: Extending and Deploying Your Own MCP Server

Step 1 — Fork the Repository

git clone https://github.com/Antonytm/mcp-sitecore-server
cd mcp-sitecore-server
npm install

Step 2 — Add a Custom Tool

Tools are defined in the src/tools/ directory. Add a new file, for example src/tools/myCustomTool.ts. Then register it in src/index.ts alongside the other tools.
export const myCustomTool = {
  name: "my-custom-tool",
  description: "Does something custom in Sitecore",
  inputSchema: {
    type: "object",
    properties: {
      itemPath: { type: "string" }
    },
    required: ["itemPath"]
  },
  handler: async (input: { itemPath: string }) => {
    // Your custom logic here
    return { result: `Processed ${input.itemPath}` };
  }
};

Step 3 — Build

npm run build

Step 4 — Test Locally

node dist/index.js --config ./config.json

Step 5 — Deploy to a Hosting Provider

You can host your custom MCP server on any Node.js-compatible host (Azure App Service, Vercel, Railway, etc.).

Then update the MCP server URL in Claude's connector settings to point to your deployed instance.

ⓘ Note — GraphQL Authoring API & PowerShell

The GraphQL Authoring API and PowerShell/SPE integration were not fully verified against XM Cloud cloud-hosted instances and appear not to be fully supported in the current version of mcp-sitecore-server.

✅ GraphQL edge (read-only)  |  ✅ Item Service API (create/update)  |  ✗ GraphQL mutations  |  ✗ PowerShell/SPE

What works today: Simply ask Claude — "Create a page called Summer Sale 2026 under Campaigns" — and the Item Service handles it instantly with no code. These capabilities can be further extended via the open-source repo at github.com/Antonytm/mcp-sitecore-server .

References

Popular Posts

Fetch component-level data in Next.js app using GraphQL - Sitecore Headless Development

-
Image
When we develop headless application in Next Js, we need to fetch the data from Sitecore for our components. Mostly, we do this by implementing and exporting getStaticProps for static generation ( SG ), or getServerSideProps for server-side rendering ( SSR ). The SitecorePagePropsFactory class uses an instance of the ComponentPropsService class that helps to identify which components require retrieval of data. The ComponentPropsService is provided by the NPM package @sitecore-jss/sitecore-jss-nextjs. For more details please refer this link . Use GraphQL to fetch component-level data in JSS Next.js apps GraphQL queries are very helpful when we need to fetch specific content for the components. It provides the flexibility to combine multiple data sources in a single query, and receive the requested data in a single response.  Let's try to implement one use case of this where we'll fetch the State List for our Next.js component from Sitecore using GraphQL query.  These are ...
Read more

All Blog Posts - 2024

-
Sitecore AI Capabilities ⮚  Enabling Image AI Analysis in Sitecore ⮚  Leverage Azure AI for Sentiment Analysis in Your Next.js Application Sitecore XM Cloud and Headless Development ⮚  Adding Built-in Components in Sitecore XM Cloud Pages ⮚  Scalable Webhooks for XM Cloud Forms: Capturing Data Using Vercel, MongoDB and Node.js ⮚  Building Modular Architecture with Sitecore Headless Sitecore Content Hub One ⮚  Sitecore Content Hub One Development: A Step-by-Step Guide ⮚  Implementing Content Hub One Item APIs in a React App Using Client Credentials and OAuth2 Sitecore XP ⮚  Track Published Items in Sitecore ⮚  Sitecore Custom Logger ⮚  Rule Set Editor: Opening Blank Window When Editing Rules ⮚  Implementing CSP with Nonce in Sitecore ⮚  Token-Based Authorization with Sitecore Services Client ⮚  Enhancing Sitecore Security: Implementing PBKDF2 for Password Encryption Sitecore Experience Edge - GraphQL APIs ...
Read more

Generate a sitemap for Sitecore Headless Next.js app

-
Image
A Sitemap is an important part of SEO for any public-facing website. This is a list of URLs you want to crawl by the google bots for indexing. NextJS makes it easy for us to achieve this. So let’s see how to add a sitemap to your NextJS project. What is an XML Sitemap? An XML sitemap or simply sitemap.xml is a file that lists all the important URLs or pages so that search engines can easily crawl them. When we go for /sitemap.xml path in any websites which implemented the Sitemap, we could see an XML file as the result included with all the links in that website.  How to Add an XML Sitemap in a Next.js App? Assumption - You have set up your project using the Sitecore Containers template for Next.js. If not please refer this link . Install the Next-Sitemap package We are going to use a package next-sitemap for generating the sitemap in our Next.js app. The following command will install the package inside our Next.js app. npm i next-sitemap Add the next-sitemap config file In t...
Read more

GraphQL query to fetch the country specific state list - Sitecore Headless Development

-
Image
Application Architecture: We have a multilingual site which is developed based on Sitecore headless architecture using Next Js as front end application. We are using Sitecore 10.3 with Experience Edge service. The Sitecore solution is deployed on Sitecore XM managed cloud and the front end Next JS application deployed on Vercel cloud platform. Use Case:  We need to pre-populate the State dropdown for the selected country. The country is auto selected based on the Sitecore IP Geolocation Service call at the time of Site rendering. Solution: We're going to use the GraphQL query to fetch the country specific state list. We'll make this GraphgQL call from Next JS  application at the time of component rendering.  Following query parameters will be passed to get the country specific state list. rootItemId - This is CountryState root folder item id. language - This is selected country language code. For example en-US is the code for USA English site. templates - This i...
Read more