Creating Multilingual Content Using Webhooks and AI in XM Cloud

If you’re a global enterprise with customers worldwide, you must translate content into multiple languages. However, this process can be complex and potentially expensive, involving multiple content teams, translation tools, and workflows. Luckily, Sitecore XM Cloud offers multilingual capabilities that make the process easier, especially if you integrate AI.

This blog will explain how AI can automatically populate content in any language by adding a version item in XM Cloud using webhooks. We’ll explore how to integrate the OpenAI API into your workflow, starting with a step-by-step guide on working with the API itself.

We’ll then cover how to add and enable additional languages in Sitecore XM Cloud, including how to capture the "Add Version" event information through webhooks. You’ll learn how to call the OpenAI API in a Next.js application to translate all fields of a Sitecore item and update the new version’s content using GraphQL Mutations. As a bonus, we’ll also get into the costs of using the OpenAI API.

The Process

The diagram below shows how we used Webhooks and AI to translate the content and automatically create new version items.

The OpenAI API

We used the OpenAI API to accomplish this task, but you can use any AI API. After creating and funding an account, you must create an API key and use an API testing tool such as Postman to send requests to the API endpoint.

Create a POST method call in Postman and set the following:

URL: https://api.openai.com/v1/chat/completions

Authorization: Use a Bearer authorization with the OpenAI APIKey.

Body: We have to define the model, prompt, and maximum number of tokens we will use in a call. We must balance using fewer tokens for faster, cost-effective responses and more for detailed, context-rich outputs. Check the example.

{
  "model": "gpt-4o",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Tell me in a 10 lines paragraph why Sitecore XM Cloud is a great choice when talking about Digital Experience Platforms."
        }
      ]
    }
  ],
  "temperature": 1,
  "max_tokens": 1000,
  "top_p": 1,
  "frequency_penalty": 0,
  "presence_penalty": 0,
  "response_format": {
    "type": "text"
  }
}

Response:

{
    "id": "chatcmpl-AXD3JwXfvMzn8bZJdYO76fnCbmwpb",
    "object": "chat.completion",
    "created": 1732478361,
    "model": "gpt-4o-2024-08-06",
    "choices": [
        {
            "index": 0,
            "message": {
                "role": "assistant",
                "content": "Sitecore XM Cloud is a leading choice among Digital Experience Platforms (DXPs) due to its comprehensive capabilities in managing and delivering personalized content experiences across multiple channels. Its cloud-native architecture ensures scalability, flexibility, and streamlined deployment, which allow businesses to quickly adapt and respond to ever-changing market demands. With robust tools for content creation, management, and optimization, it empowers marketing teams to deliver relevant and engaging customer experiences seamlessly. The platform's integration capabilities with third-party applications further enhance its versatility, offering a unified solution that leverages existing tech investments. Its AI-driven personalization and analytics features provide deep insights into customer behavior, helping to tailor content strategies effectively.
Additionally, the intuitive user interface and developer-friendly environment make it accessible for both marketers and developers, promoting collaboration and innovation. Security and compliance features are top-notch, ensuring that data governance standards are met. Lastly, the continuous delivery of updates and new features from Sitecore assures organizations of remaining at the forefront of digital transformation efforts.",
                "refusal": null
            },
            "logprobs": null,
            "finish_reason": "stop"
        }
    ],
    "usage": {
        "prompt_tokens": 31,
        "completion_tokens": 195,
        "total_tokens": 226,
        "prompt_tokens_details": {
            "cached_tokens": 0,
            "audio_tokens": 0
        },
        "completion_tokens_details": {
            "reasoning_tokens": 0,
            "audio_tokens": 0,
            "accepted_prediction_tokens": 0,
            "rejected_prediction_tokens": 0
        }
    },
    "system_fingerprint": "fp_831e067d82"
}

Check the choices.messages object, where the content value contains the AI’s response.

Another important value to consider is total_tokens, which determines the cost of the API call.

Once you are familiar with the OpenAI API and its capabilities, you can proceed to the next steps.

Enable Multilanguage in XM Cloud

Now, let’s learn how to add languages to a site in XM Cloud.

First, go to the content tree and find System → Languages to add a new language. For this example, we chose Portuguese.

With this configuration, you can see the language of every item in the content tree.

Below the language label, it says «0 versions», meaning we need to add a version to start generating content in Portuguese. Select the desired language, then go to the Versions tab in the ribbon menu and click Add, or use the «Add new version» link that appears in the yellow prompt. Once you’ve done this, you’ll have a Portuguese version of the item ready to add content.

After creating the item in the desired language and setting its content, you might add the language code to the site’s URL: https://www.demo.localhost/pr-BR. However, you might encounter a 404 error.

The language hasn’t been added to the site configurations. To see the content in our local environment, we must add the language code into the next.js.config file in the locales list. This will recompile your rendering container and enable the language on the site.

Below, the 404 error has disappeared and the Portuguese text is visible.

One best practice to remember is enabling the Fallback Language functionality to display default language content when content is unavailable in the selected language.

Get the Add Version Event Info

Webhooks allow us to manage various item events in XM Cloud. In this case, we’ll use a Webhook Event Handler to handle the item_versionAdded event.

The event data should be handled like this:

The item:versionAdded event sends all relevant information to the Webhook. The Webhook then extracts the new version's ItemId, language, and version number. This data is then passed to the CallGraphQLMutationAsync method, which uses it to call the XM Cloud API. Code snippets can be found here.

Calling the OpenAI API and Translating Content

On the XM Cloud side, we must retrieve the item information via GraphQL and fetch all the content fields.

Explanation: The method receives the itemId in the request body, which is then used to create a GraphQL query to retrieve the list of fields. The resulting JSON structure is linked to the prompt and then passed to the callOpenAIAPI method. Below are the parameters:

The language is inserted in the prompt as the ${language} token. It’s important to note that we’re requesting to translate only the JSON values, not the tags.

The code of method callOpenAIAPI:

Explanation: The first part involves creating the body to send to the OpenAI API. The parameters are set in the body, including the APIKey. Using the POST method, we can call the API, and the response is received in the following line:

const content = data.choices[0]?.message?.content;

Note that the response from the API may contain some unexpected special characters. To handle this, we can “clean” the content using a regular expression that replaces all unnecessary characters with blank spaces:

content.replace(/```json\n?|```/g, '').replace(/\n/g, '')

By doing this, we obtain all the fields with their content translated. You can view the code here.

Using Mutations to Update the New Version Item

The final step in this process is to update the item’s content with the translated text. We can use GraphQL mutations to accomplish this:

Explanation: The mutationToExecute variable forms the mutation query to send to the Authoring API. This query uses the itemId, language, and version of the item to be updated. The translatedObject results from the previous step contain the JSON with all the translated fields. A key component is the getFieldsData method, which iterates through all the fields and generates the correctly formatted input for the fields parameter in the mutation query. Once the mutation is executed, we have an item with translated text in XM Cloud. All this functionality will be leveraged simply by clicking the Add New Version link or the Add button.

OpenAI API Costs

Costs are directly tied to the number of tokens used in an API call. This includes both the words in the prompt and the response. The more tokens you use, the more detailed and accurate the response will be, increasing the cost. Below is a test we performed with different prompts.

Prompt 1

Prompt 2

When used for translation, the OpenAI API cost is relatively low.

Translated Example

Here is an example of an English essay translated into French, Portuguese, German, and Spanish using our approach.

Wrapping Up

Integrating AI with Sitecore XM Cloud and using Webhooks can allow you to create ready-to-publish multilingual content for your website. These capabilities can save marketers time and help global enterprises go to market quickly with translated content for a worldwide audience.

If you want to maximize the capabilities of Sitecore XM Cloud (or other Sitecore products), Oshyn is available to help. As a certified Sitecore partner, we have decades of experience working with an array of products and building engaging websites for customers. If you need technical help implementing these products, learning how to incorporate AI, or having a marketing team to help you use all of Sitecore’s marketing capabilities, then we can help. Contact us to find out how we can support your digital experience needs.