Tailwind Logo

Integrate Next.js OpenAI Starter sample with Sitecore Search

Next.js

Published: 2024-02-05

In the previous article, we extended the data that AI has to work so that chat can respond to the information provided by Json data. This time, we would like to link the data that Sitecore Search has and make it correspond.

Retrieve data from Sitecore Search

Sitecore Search, provided by Sitecore, uses a REST API to retrieve search result data in Json. For example, prepare the following request

JSON 
{
    "context": {
        "page": {
            "uri": "/"
        },
        "locale": {
            "country": "us",
            "language": "en"
        }
    },
    "widget": {
        "items": [
            {
                "entity": "content",
                "rfk_id": "rfkid_7",
                "search": {
                    "content": {},
                    "query": {
                        "keyphrase": "XM Cloud"
                    }
                }
            }
        ]
    }
}

Here, the search is being performed using the XM Cloud key. The following is the result of actually using Postman to post and retrieve data.

chatsearch01.png

This data will be added to the previously created code.

Modify Functions.ts

First, add the following code to the functions definition

TypeScript 
  {
    name: "knowledge_search",
    description:
      "Answer information about Sitecore's products documentation using Sitecore Search's API",
    parameters: {
      type: "object",
      properties: {
        query: {
          type: "string",
          description: "the query to search for",
        },
     },
      required: ["query"],
    },
  },

Regarding the definition of the knowledge_search call, I have included the above text in the description in order to have a preferred search.

Then add the following code to runFunction

TypeScript 
export async function runFunction(name: string, args: any) {
  switch (name) {
    case "knowledge_search":
      return await knowledge_search(args["query"]);
    case "get_top_stories":
      return await get_top_stories();
    case "get_story":
      return await get_story(args["id"]);
    default:
      return null;
  }
}

In the knowledge_search function defined here, we will use query from Sitecore Search to retrieve Json data from the search results. First, create a file interfaces/search/index.ts for the query and pass variables to the query as follows

TypeScript 
export const GetResutlsByQUery = (query: string) => {
  return `
    {
        "context": {
            "page": {
                "uri": "/"
            },
            "locale": {
                "country": "us",
                "language": "en"
            }
        },
        "widget": {
            "items": [
                {
                    "entity": "content",
                    "rfk_id": "rfkid_7",
                    "search": {
                        "content": {},
                        "query": {
                            "keyphrase": "${query}"
                        }
                    }
                }
            ]
        }
    }
    `;
};

For the above query, add a function to function.ts.

TypeScript 
export async function knowledge_search(query: string) {
  console.log("query", query);

  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");

  var raw = GetResutlsByQUery(query);

  const response = await fetch(process.env.NEXT_PUBLIC_SEARCH_DISCOVER || "", {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
  });

  const responseJson = await response.json();
  const data = responseJson.widgets[0].content;

  return data;
}

The above contains process.env.NEXT_PUBLIC_SEARCH_DISCOVER. For .env.local, include the URL for Sitecore Search.

Chat can now query Search and use the results.

Verification of Operation

Now let's see it in action. When this knowledge_search() is called, a Query is displayed in the Console, so we know that the question is using the data we queried in the Search.

First we simply ask the question please show XM Cloud Document, and you will see the query against the Console, indicating that we are getting data from Search.

chatsearch03.png

Summary

Chat is now available using Sitecore Search results. Of course, you can get this content by searching with Sitecore Search, but the goal of this linkage is to make it available in a chat format.

Tags