Make a Brand Review REST API request

Version: 0.4

Make a request to the Brand Review REST API to evaluate whether input content and assets comply with the guidelines defined in a brand kit. Adding AI-powered content evaluation features to your Marketplace app helps content authors prepare on-brand texts, images, and files. For more information, see example scenarios for using this API in your Marketplace app.

This topic describes how to make a simple Brand Review REST API request. After making this request, we recommend you complete the Analyze page content using brand review walkthrough, where you combine this API request with multiple GraphQL queries to develop more complex interactions.

Before you begin

Make sure your app is installed in the SitecoreAI environment where you want to make API requests.
Complete the SDK quick start and initialize the ai package.

In the quick start, you set up your app so it queries the application context and stores the app details in state. This is required to access the Context ID of your SitecoreAI environment when making requests to AI skills APIs.
Retrieve your brand kit ID and section IDs using the Brand Management REST API. You use these IDs to make requests to the Brand Review REST API from your Marketplace app.

To make a Brand Review REST API request:

In the src folder, create a component, for example, components/BrandReview.tsx, then save your changes.

// src/components/BrandReview.tsx

import { ClientSDK } from "@sitecore-marketplace-sdk/client";

export default function BrandReview({
  appContext,
  client,
}: {
  appContext: any;
  client: ClientSDK | null;
}) {
  const generateBrandReview = async () => {
    // Get the Sitecore Context ID from the application context:
    const sitecoreContextId = appContext.resourceAccess?.[0]?.context.live;

    // Check if the Sitecore Context ID is available:
    if (!sitecoreContextId) {
      console.error(
        "Sitecore Context ID not found in application context. Make sure your app is configured to use AI skills APIs.",
      );
      return;
    }

    // Generate brand review:
    const response = await client?.mutate("ai.skills.generateBrandReview", {
      params: {
        query: {
          sitecoreContextId,
        },
        body: {
          brandkitId: "<YOUR_BRAND_KIT_ID>",
          input: {
            content: "<YOUR_CONTENT_TO_REVIEW>",
          },
          sections: [
            {
              sectionId: "<YOUR_BRAND_KIT_SECTION_ID>",
            },
          ],
        },
      },
    });

    console.log(response);
  };

  return <button onClick={generateBrandReview}>Generate Brand Review</button>;
}

Replace the content placeholder with the content to review. If you're building this interaction in the SitecoreAI Page builder, make sure to use the actual contents of a component or page as the input content, not the component itself.

Replace the brand kit placeholders with your brand kit details. To retrieve these details, use the Brand Management REST API.

This script:

Accesses the Context ID of your SitecoreAI environment from the application context.
Makes a mutation using the content to review and the Context ID: client?.mutate("ai.skills.generateBrandReview", {<...>};
Returns a button that makes the request when clicked.

In the SDK initialization code where you run the useMarketplaceClient hook, import the component you created in the previous step:
React

// src/App.tsx import BrandReview from "./components/BrandReview";
Next.js (Pages Router)

// src/pages/index.tsx import BrandReview from "@/components/BrandReview";
In the same file, include the component in the return statement, then save your changes. Make sure to pass client and the application context to the component:
return ( <> {/* ... */} <BrandReview appContext={appContext} client={client} /> </> );
In the SitecoreAI Page builder, open your web browser's Network tab, refresh the page, then open your Marketplace app.
In the Marketplace app, click Generate Brand Review.
On the Network tab, find a POST request made to generate?. This is the request you made when you clicked the button in your app.
On the Network tab, for this request, click the Response tab. The API response appears.

If you have suggestions for improving this article, let us know!

Make a Brand Review REST API request

React

Next.js (Pages Router)