We had a requirement to implement SSO using Microsoft Entra ID. Here I'll explain the step-by-step process to implement that.

References

Main Features of SitecoreAI

1. Strategy

This section includes tools for managing brand guidelines, creating briefs, handling campaigns, and later, a full marketing calendar.

2. Channels

This tab gives access to website and channel management, along with insights related to each channel.

3. Design

Here, users can manage normal website work like page setup, updating components, and maintaining forms.

4. Content

This is for managing content across all channels. It also includes media management (similar to DAM, but full Content Hub support is coming). Soon, it will also help handle embargoed or scheduled content releases—something many CMS tools struggle with.

5. Performance

This tab provides dashboards, insights, and reports to understand how your customer journey is performing.

6. Agentic

This is where Sitecore’s AI vision becomes real. Marketers can subscribe to, customize, or even build their own AI agents.

Agentic Studio: The Core of SitecoreAI

Agentic Studio is the main workspace where marketers work together with AI agents to build digital experiences. It comes with 20 pre-built AI agents, which help automate different tasks such as:

Campaign & Strategy Agents : Help create briefs, find the right audience, and optimize budgets.

Content Production Agents : Create brand-safe content, adapt it for different channels, and keep the messaging consistent.

Migration & Management Agents: These agents can help combine many old websites into one system, saving weeks or months of manual work.

Testing & Optimization Agents : Automate A/B testing, monitor results, and help improve performance.

Marketers can also build their own agents using simple no-code tools.

Key Capabilities of SitecoreAI

1. AI-Driven Content Creation

Helps teams create content faster—such as versions, summaries, metadata, translations, and creative assets.

2. Automated Personalization

AI studies user behavior and delivers the right content automatically, reducing manual work.

3. Better Search Results

With Sitecore Search, AI improves search ranking, understands user queries better, gives recommendations, and reduces zero-result pages.

4. Customer Insights & Predictions

With CDP and Personalize, SitecoreAI improves predictive models, journey insights, and user grouping.

5. AI Agents for Automation

These AI agents can help with:

• Creating personalized experiences

• Running optimization tests

• Finding missing content

• Suggesting new pages or components

• Automating marketing workflows

The Sitecore App Marketplace for XM Cloud Has Officially Launched

The Sitecore App Marketplace for XM Cloud is now live, opening up extensive possibilities for customizing and extending the platform. This blog consolidates the key development and configuration steps to help you build your first custom app.

I began by setting up a basic standalone application in XM Cloud to understand how the process works. With this capability, you can now create custom tools for your organization—or even apps for the broader Sitecore community. In this blog, we’ll walk through the essential steps to build an app in your development environment and then register and install it in XM Cloud.

What is the Sitecore Marketplace?

The Sitecore Marketplace enables customers, partners, and developers to build and use applications that extend Sitecore’s functionality. This means you can integrate your custom modules into Sitecore XM Cloud through various extension points.

These apps can be:

• Private (available only to your organization), or

• Public (shared with anyone using XM Cloud, though the public marketplace is not available yet).

Step 1: Create Your App in Cloud Portal

1. Log in to the Cloud Portal using an Admin or Owner account.

2. Navigate to Developer Studio > Create App.
   
   

   
   
   

3. Enter the details:

   • Descriptive name (max 50 characters).

   • Select Custom as the app type.

       4. Click Create – your app is now registered and ready for configuration.

Step 2: Configure Your App

• Extension Points: Choose where your app should appear. You can select multiple points and customize the Route URL or Display Name.

• API Access: Select the APIs your app will use. For XM Cloud integration, enable XM Cloud APIs.
  
  

  
  
  

• Development URL:

  • React apps → http://localhost:5173

  • Next.js apps → http://localhost:3000

• App Logo: Add a public logo URL (or use a temporary one: https://cdn-1.webcatalog.io/catalog/sitecore/sitecore-icon.png?v=1731337318728).

• Activate App: Click Activate > Activate.

Step 3: Set Up Your Development Project

Create a Next.js or React app:

Next.js

npx create-next-app@latest my-test-app
cd my-test-app

React

npm create vite@latest my-test-app
cd my-test-app

Install required SDK packages:

npm install @sitecore-marketplace-sdk/client 
npm install @sitecore-marketplace-sdk/xmc # if your app uses XM Cloud APIs


Step 4: Create the useMarketplaceClient Hook
Create a custom hook to manage the SDK initialization. In your src folder, 
create /utils/hooks/useMarketplaceClient.ts, and paste the below code:

// utils/hooks/useMarketplaceClient.ts
import { ClientSDK } from "@sitecore-marketplace-sdk/client";
import { useEffect, useState, useCallback, useMemo, useRef } from "react";
export interface MarketplaceClientState {
client: ClientSDK | null;
error: Error | null;
isLoading: boolean;
isInitialized: boolean;
}

export interface UseMarketplaceClientOptions {
retryAttempts?: number; // Default: 3
retryDelay?: number; // Default: 1000ms
autoInit?: boolean; // Default: true
}

const DEFAULT_OPTIONS: Required<UseMarketplaceClientOptions> = {
retryAttempts: 3,
retryDelay: 1000,
autoInit: true,
};

let client: ClientSDK | undefined = undefined;

async function getMarketplaceClient() {
if (client) {
return client;
}
const config = {
target: window.parent,
};
client = await ClientSDK.init(config);
return client;
}

export function useMarketplaceClient(options: UseMarketplaceClientOptions = {}) {
const opts = useMemo(() => ({ ...DEFAULT_OPTIONS, ...options }), [options]);

const [state, setState] = useState<MarketplaceClientState>({
client: null,
error: null,
isLoading: false,
isInitialized: false,
});

const isInitializingRef = useRef(false);

const initializeClient = useCallback(async (attempt = 1): Promise<void> => {
let shouldProceed = false;
setState(prev => {
if (prev.isLoading || prev.isInitialized || isInitializingRef.current) {
return prev;
}
shouldProceed = true;
isInitializingRef.current = true;
return { ...prev, isLoading: true, error: null };
});

if (!shouldProceed) return;

try {
const client = await getMarketplaceClient();
setState({
client,
error: null,
isLoading: false,
isInitialized: true,
});
} catch (error) {
if (attempt < opts.retryAttempts) {
await new Promise(resolve => setTimeout(resolve, opts.retryDelay));
return initializeClient(attempt + 1);
}
setState({
client: null,
error: error instanceof Error ? error : new Error('Failed to initialize MarketplaceClient'),
isLoading: false,
isInitialized: false,
});
} finally {
isInitializingRef.current = false;
}
}, [opts.retryAttempts, opts.retryDelay]);

useEffect(() => {
if (opts.autoInit) {
initializeClient();
}
return () => {
isInitializingRef.current = false;
setState({
client: null,
error: null,
isLoading: false,
isInitialized: false,
});
};
}, [opts.autoInit, initializeClient]);

return useMemo(() => ({
...state,
initialize: initializeClient,
}), [state, initializeClient]);

}

This hook handles:
SDK initialization
Error handling and retry logic
Preventing race conditions
Step 5: Use the Hook in Your App
In your main app component (e.g., App.tsx or pages/index.tsx), import and use the hook.
For Next.js (pages/index.tsx):

import { useState, useEffect } from "react";
import type { ApplicationContext } from "@sitecore-marketplace-sdk/client";
import { useMarketplaceClient } from "../utils/hooks/useMarketplaceClient";
 
export default function Home() {
  const { client, error, isInitialized, isLoading } = useMarketplaceClient();
  const [appContext, setAppContext] = useState<ApplicationContext>();
 
  useEffect(() => {
    if (!error && isInitialized && client) {
      client.query("application.context")
        .then((res) => {
          setAppContext(res.data);
        })
        .catch((error) => {
          console.error("Error retrieving application.context:", error);
        });
    }
  }, [client, error, isInitialized]);
 
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return (
    <div className="p-4">
      <h1>Welcome to {appContext?.name || 'My Marketplace App'}</h1>
    </div>
  );
}

Step 6: Start Development
Run your app:
npm run dev
Then:
Open your Sitecore Cloud Portal.
Navigate to Marketplace.


Find your registered app and open it in one of the configured extension points.
Your app will now run inside Sitecore with secure communication.


Development Tips
Always test your app within Sitecore, not just on localhost.
Use the browser console in the Sitecore extension point for accurate logs.
Sitecore-specific functionality only works inside extension points.
Conclusion
The Sitecore XM Cloud Marketplace is a powerful way to extend the platform with custom 
applications tailored to your organization’s needs. By following the steps above, you can 
create, configure, and register your first app—from setting up a development environment to 
embedding it seamlessly in XM Cloud.
As the marketplace continues to evolve, it opens new opportunities for developers to innovate
and share apps across the Sitecore community. If you’re building for your team today, you’re
also preparing for tomorrow’s broader ecosystem.
References
Introduction to Sitecore Marketplace – Overview of the platform and capabilities
Sitecore Marketplace SDK for JavaScript – SDK reference and examples
Understanding Queries – Retrieve data from Sitecore
Understanding Mutations – Trigger actions in Sitecore