Next.js OpenAI Starter をカスタマイズする

公開日 :

サンプルを起動して、続いて動作の確認をしていきました。今回は簡単なカスタマイズをしていきます。

不要なコードを削除する

色々なサンプルコードがありますが、ファイル自体はいつでも GitHub の下のリポジトリで参照できるので手元では不要なファイルを削除していきます。

  • app - api の下にある chat フォルダ以外全て削除

  • app - api 以外のフォルダを削除

以下のファイルのみとなりました。

random desc

今回は、https://github.com/steven-tey/chathn で展開されているコードを参考にして、作成をしていきます。

functions.ts の作成

上記のコードにはいくつか機能が含まれていますが、app/api/chat/functions.ts の中でも get_top_stories と get_story の２つを実装していきます。

用意したコードは以下のリンクから参照できます。

route.ts の変更

まず最初に、作成をした functions.ts の中の関数を利用できるように、import を実装します。

import { functions, runFunction } from "./functions";

続いてストリーミングにチャットを依頼するコードの openai.chat.completions.create に functions を追加します。

  const response = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    stream: true,
    messages,
    functions,
  });

続いて任意のデータをクライアントに渡すことができるように、以下の宣言を追加します。

typescript const data = new experimental_StreamData(); 最後に OpenAIStream の呼び出しを変更します。ここは色々とコードを書き換えているため、最終的なコードを参考にしてください。

動作確認

まず最初に、更新前の環境で Get top 5 stories on Hacker News をキーワードで検索をしてみます。以下のような結果が表示されています。

random desc

では変更後のページで同じキーワードで検索をします。

random desc

この結果を検証するために、ニュース一覧として利用した https://hacker-news.firebaseio.com/v0/topstories.json にアクセスをすると、以下のようにニュース一覧になっていることがわかります。

random desc

ここから取得した ID のニュースを個別に読み込んでいます。

random desc

最新のニュース一覧を利用して、回答していることを確認することができました。

まとめ

ChatGPT に対して追加のデータソースを与えて、その内容を回答させることができました。この仕組みを利用して、次回は Sitecore Search との連携を実装したいと思います。

参考ページ