Sitecore Search with XM Cloud step-by-step

Here’s a step-by-step to integrate Sitecore Search with XM Cloud for AI-powered search and content discovery on a headless site:

Step 1: Prerequisites

• XM Cloud project set up (usually with Next.js or React).
• Access to Sitecore Search account.
• API keys for Sitecore Search.
• Node.js installed locally.

Step 2: Configure Sitecore Search

1. Create a Sitecore Search instance in your Sitecore account.
2. Set up Sources:

- Web Crawler: Crawl XM Cloud-rendered pages.- API Crawler: Pull content via XM Cloud Delivery API. - Ingestion API: Push structured content directly.

1. Map XM Cloud fields to Sitecore Search attributes using Extractors.
2. Publish the configuration.

Step 3: Index XM Cloud Content

• If using API Crawler:

- Get XM Cloud Delivery API endpoint (GraphQL or REST). - Configure connector in Sitecore Search to fetch content.

• If using Ingestion API:

- Push content from XM Cloud to Sitecore Search via POST requests.

Step 4: Install Sitecore Search SDK

For a Next.js headless site:

npm install @sitecore-search/react

Step 5: Initialize SDK

Create a searchClient.js file:

import { createClient } from '@sitecore-search/react'; export const searchClient = createClient({ 
  apiKey: process.env.SITECORESEARCHAPI_KEY, 
  endpoint: 'https://api.sitecoresearch.com', 
}); 

Add your API key in .env.local: SITECORE_SEARCH_API_KEY=your-api-key

Step 6: Implement Search UI

Example in SearchPage.js:

import { createClient } from '@sitecore-search/react'; export const searchClient = createClient({ 
  apiKey: process.env.SITECORESEARCHAPI_KEY, 
  endpoint: 'https://api.sitecoresearch.com', 
}); 

Step 7: Add AI-Powered Features

• Enable Recommendations in Sitecore Search dashboard.
• Use Personalization API to fetch user-specific results.
• Example:

const recommendations = await searchClient.getRecommendations({ 
  userId: 'anonymous', 
  limit: 5, 
});

Step 8: Deploy

• Host on Vercel or Netlify.
• Secure API keys in environment variables.
• Set up webhooks for automatic redeployment when content changes.

Happy Coding!