Tailwind Logo

Next.js OpenAI Starter サンプルを Sitecore Search と連携する

Next.js

公開日: 2024-02-05

前回の記事では、Json のデータで提供されている情報をチャットが対応できるように AI の持っているデータを拡張して動作させました。今回は、Sitecore Search が持っているデータを連携させて、対応させたいと思います。

Sitecore Search からデータを取得する

サイトコアが提供している Sitecore Search は REST API を利用して検索結果のデータを Json で取得することができます。例えば、以下のようなリクエストを準備します。

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

ここでは XM Cloud といううキーを度を利用して検索を実行している形となります。実際に Postman を利用して投稿してデータを取得している結果は以下の通りです。

chatsearch01.png

このデータを前回まで作成していたコードに追加していきます。

Functions.ts を変更する

まず functions の定義に対して、以下のコードを追加します。

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"],
    },
  },

knowledge_search の呼び出しの定義に関して、description には優先的に検索をしてもらうために上記のような文章を入れておきました。

続いて 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;
  }
}

ここで定義している knowledge_search の関数では、Sitecore Search から query を利用して検索結果の Json のデータを取得するようにします。まず、Query に関して interfaces/search/index.ts のファイルを作成して、以下のように Query に対して変数を渡せるようにします。

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}"
                        }
                    }
                }
            ]
        }
    }
    `;
};

上記のクエリに関して、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;
}

上記には process.env.NEXT_PUBLIC_SEARCH_DISCOVER が記載されています。 .env.local に対して、Sitecore Search の URL を記載してください。

これで、チャットが Search に問い合わせをして、その結果を利用することが可能になりました。

動作検証

それでは実際に手元で動作させてみます。この knowledge_search() を呼び出した時には Console に Query が表示されるため、きちんと質問が Search に問い合わせをしたデータを利用しているのかわかります。

まず簡単に please show XM Cloud Documentと質問してみます。Console に対して query が表示されて、Search からデータを取得していることがわかります。

chatsearch03.png

まとめ

Sitecore Search の結果を利用して Chat が可能になりました。もちろん Sitecore Search で検索をすると取得することができるコンテンツですが、チャット形式で取得することができるのがこの連携の狙いです。

関連タグ