たった 10 分！？ ノーコードで独自のデータを参照する生成AI チャットボットを作成してみた！ 

# この記事について
Google Cloud の Dialogflow CX のデータストアエージェント（生成AI 機能）を使って、データストア（Cloud Storage）にある独自のデータを参照する生成AI チャットボットをノーコードで作っちゃおう！というものです。

今回は、チャットの細かな画面の遷移や個別の応答については一旦置いておいて、独自のデータを参照して生成AI のチャットボットが回答を返してくれることを目指します。

# 各サービス・機能・メリットの説明
**1.Dialogflow CX**
Dialogflow CX は多機能で複雑な会話が可能なチャットボットを開発するためのプラットフォーム。GUI での簡単な操作でチャットボットを開発できる。

機能例）予約、担当者を呼び出す、Slackとの統合など

**2. データストアエージェント（生成AI 機能）**
社内規約や商品カタログ、FAQ といったデータをデータストア（データの保管庫）に入れておけば、そのデータを使って生成AI が質問に対するレスポンスを生成してくれる。Google の大規模言語モデル（PaLM2）でレスポンスを生成。

https://cloud.google.com/dialogflow/cx/docs/concept/data-store-agent?hl=ja

**3.Dialogflow CX のメリット**
従来のチャットボットは、質問と回答を人手で定義する必要があるため、開発に時間がかかります。さらに、定義された内容と実際の入力がわずかにでも異なると、チャットボットが理解できない場合があります。また、選択肢からしか質問できないチャットボットも存在します。

一方、Dialogflow CXは、提供されたデータや基盤モデル（PaLM2）が持つ知識に基づいて回答を生成します。また、多様な言い回しに対しても、高い確率で意図を理解することができます。生成AI機能を活用することで、従来よりも流暢な会話が可能なチャットボットを、短時間で、かつノーコードで開発できるというメリットがあります。

# 0.環境準備
今回は、すでに Google Cloud にログインができて[**プロジェクト**](https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja)が作成されている前提で進めます。

Google Cloud の始め方はこちらをご参照ください。

https://cloud-ace.jp/column/detail148/



:::note info
**個人でのご利用なら Gmail アカウントで簡単に始められて無料枠もあるので、是非お気軽にお試しください。（クレジットカードの登録が必要です）**
:::

:::note warn
**こちらの作業により、多少の課金が発生する場合があります。実施の際は、ご注意ください**
:::

:::note warn
**この作業用にテスト用のプロジェクトを個別に作成することをオススメいたします。そうすると、作業後にプロジェクトを削除するだけで、すべてのクリーンアップが完了します。（不要な課金を避けることができます）**
:::

# 1.Cloud Storage（GCS）にデータを保存する
Cloud Storage（GCS）は、Google Cloud が提供するストレージサービスです。今回は、GCS をデータストアとして参照します。

https://cloud.google.com/storage?hl=ja

今回 GCS には先日公開した僕のブログ記事を PDF 化して保存します。

https://qiita.com/ralios/items/a05eb2555d2e220bcfd0

***つまり、僕の記事を参照してラリオスについて回答するラリオスチャットボットを作成しよう！というわけです。***

それでは早速 PDF ファイルを GCS にアップロードしましょう。操作は簡単で、コンソールで GCS にバケット（データの入れ物）を作って、画面上でアップロードするだけです。


### 1-1. バケットの作成
Google Cloud にログインしたコンソール画面の左上にある「ナビゲーションメニュー」をクリックして、「Cloud Storage」を選択します。

![バケットの作成](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2011.31.34.png)
<br>
画面が切り替わったら上部の「作成」ボタンを押します。

![バケットの作成](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2011.39.55.png)
<br>
バケットにグローバルで一意（世界で唯一）の名前をつけます。今回は「raliosbot」という名前をつけています。

![バケットの作成](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2011.42.44.png)

:::note info
後ほどデータストアを接続する際に、この名前のバケットを選択します
:::
<br>
データの保存場所から「ロケーションタイプ」を選択します。今回は、「ロケーションタイプ」を「リージョン」に設定して「asia-northeast1 (東京)」を選択しています。

![バケットの作成](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2011.46.22.png)

*※ ロケーションに関する詳細はこちらをご参照ください。*

https://cloud.google.com/storage/docs/locations?hl=ja

<br>
残りの設定はデフォルトのまま「作成」ボタンを押します。

![バケットの作成](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2011.56.42.png)
<br>
公開アクセスに関するダイアログが表示されますが、今回は外部にデータを公開する必要がないので、「アクセスを禁止」にチェックを入れた状態で「確認」ボタンをクリックします。

![バケットの作成](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2012.02.24.png)
<br>
### 1-2. ファイルのアップロード
「ファイルをアップロード」をクリックして、該当のファイルをアップロードします。（今回は僕のブログ記事の PDF をアップロードしています）

![ファイルのアップロード](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2012.06.50.png)

# 2. API を有効化する

Google Cloud では必要に応じてプロジェクト毎に API を有効化します。ほとんどの API はデフォルトで有効になっていますが、Dialogflow は手動で有効にする必要があります。

### 2-1.Dialogflow API を有効化する
「ナビゲーションメニュー」から「API とサービス」を選択し「ライブラリ」を開きます。

![API の有効化](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2012.28.22.png)
<br>
検索バーに「Dialogflow」と入力して Enter キーを押します。

![API の有効化](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2012.34.15.png)
<br>

Dialogflow API を選択します。

![API の有効化](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2012.37.36.png)
<br>
「有効にする」ボタンを押します。これで、「Dialogflow CX」を使う準備は完了です！

![API の有効化](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2012.48.31.png)

# 3. Dialogflow CX でエージェント（チャットボット）を作成する
Dialogflow CX を使うとノーコードでエージェント（チャットボット）を作成することができます。

### 3-1. Dialogflow のコンソールを開く
こちらにアクセスして「コンソールへ移動」をクリックします。

https://cloud.google.com/dialogflow?hl=ja

![Dialogflow にアクセス](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2012.59.42.png)
<br>
該当のプロジェクトを選択します。（今回は「test-ralios」）

![Dialogflow にアクセス](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2013.02.57.png)
<br>
### 3-2. エージェントを作成する
「Create Agent」をクリックします。

![エージェントを作成する](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2013.06.20.png)
<br>
「Build your own」を選択します。

![エージェントを作成する](https://storage.googleapis.com/raliosblog/Screenshot%202023-12-25%2013.08.20.png)
<br>
「Display Name」、「Location」、「Time zone」、「Default language」を設定します。今回は以下のように設定しました。

<table>
 
  <thead>
    <tr>
      <th>項目</th> <th>設定</th>
    </tr>
  </thead>
  <tr>
    <td> Display Name </td> <td> raliosbot </td>
  </tr>
  <tr>
    <td> Location </td> <td>asia-northeast1 (Tokyo, Japan)</td>
  </tr>
  <tr>
    <td> Time zone </td> <td>(GMT+9:00) Asia/Tokyo</td>
  </tr>
   <tr>
    <td> Default language </td> <td>ja — Japanese</td>
  </tr>
</table>

設置が完了したら「Create」をクリックします。

![エージェントを作成する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/ccf759a6-1680-4dae-31fe-8f288ebdd530.png)
<br>
画面が切り替わったら「Start Page」をクリックします。

![エージェントを作成する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/9a5198c0-88e7-70c4-bdc6-5a10adf4bdc0.png)
<br>
「Default Welcome Intent」をクリックして、チャットボットの初期設定をしていきます。

![エージェントを作成する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/38060994-7b1d-bb47-c018-468131eeb019.png)
<br>
右側に設定画面が開くので、少し下にスクロールして「Agent says」のところに、チャットボットの初期応答の文言を入力します。今回は「**こんにちは！ ラリオスのことなら何でも聞いてください！**」と入力しました。これでエージェント（チャットボット）の初期設定は完了です。

![Screenshot 2023-12-25 13.40.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/698cbb21-e1c8-c64b-cc73-9c11639e321e.png)


:::note warn
文言の入力後、「Save」を押し忘れないよう注意しましょう！
:::

# 4. データストアを接続する
参照するデータ（僕のブログ記事の PDF）にアクセスできるように、データストア（今回は Cloud Strage）に接続します。

### 4-1. データストアを選択する
画面左上の「Manege」タブを選択した後、左側のメニューから「Data Stores」をクリックします。

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/1de933fc-8470-5600-3daf-49451b50ede1.png)
<br>
「CONTINUE AND ACTITATE THE API 」クリックした後、次の画面で同意します。

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/7adc1de8-a603-7ad7-a0e6-8043daa15202.png)

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/dea68aa5-ade8-fcb3-262e-c7436b47908b.png)
<br>
架空で構わないので会社名を入力して「続行」をクリックします。

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/ba2a8100-21a0-f28a-acae-35ff4955d163.png)
<br>
「新しいデータストアを作成」をクリックした後、データストアから「Cloud Storage」を選択します。

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/3530cc00-048c-62e9-613c-638c1aee4879.png)

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/a3b4fb71-c8c1-cfa3-59fe-7855f27eddff.png)
<br>
「参照」ボタンを押して、先ほど作成したバケット「raliosbot」を選んだら「選択」ボタンをクリックします。「非構造化ドキュメント」にチェックが入っていることを確認したら「続行」ボタンをクリックします。

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/ba791bb9-2990-a8e1-c877-41cd2ca6a4d3.png)

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/3301f7ef-06de-268c-3b5a-6290bbf0a8db.png)

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/c723554b-6f82-09bb-e598-51dedd029c7d.png)
<br>
データストア名を入力したら「作成」ボタンを押します。今回はわかりやすく「raliosbot-datastore」という名前をつけました。

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/4d3a186e-0b65-6e3f-dec5-257f339df300.png)
<br>
そうすると今作成したデータストアが表示されるので、それを選択して「作成」ボタンをクリックします。データストア「raliosbot-datastore」が作成されたことを確認することができます。「raliosbot-datastore」のリンクをクリックすると、Cloud Storege にアップロードしたデータに接続されていることを確認することもできます。

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/abc05381-8020-6a21-de35-abf6ce68026a.png)

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/8b3dc0a3-4ab6-f03d-bd6d-2e35eb214d97.png)

![データストアを選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/1fd6478d-ef49-e917-7238-fa7582e93a4a.png)

### 4-2. データストアを接続する
それではここからは、先ほど作成したエージェント（チャットボット）とデータストアを接続していきましょう！ データストアの接続が完了すると、そこに保管されているデータを参照してチャットボットが回答を生成します。

画面左上の「アプリ」をクリックして、画面が切り替わったら先ほど作成したエージェント（今回は「raliosbot」をクリックします。そうすると、エージェント設定の画面に戻ることができます。

![データストアを接続する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/19fd6f8d-a8f6-4198-6d25-54eb65316224.png)

![データストアを接続する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/3792db92-40b1-becf-b1db-c9541f002429.png)
<br>
エージェントの画面に戻ったら「Start Page」を選択して、「Add state handler」をクリックします。チェックボックスが出てきたら「Data stores」にチェックを入れて「Apply」します。

![データストアを接続する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/205582d3-e434-a6f8-865b-e2455c38e0d1.png)

![データストアを接続する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/1a0f61e6-d382-c962-0184-9505fd11d419.png)

![データストアを接続する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/3a8437f6-e4cc-efe5-d126-41caaeda57f5.png)
<br>
そうすると「Start Page」のダイアログに「Data stores」という項目が追加されるので、その右側の「＋」ボタンをクリックします（①）。そして右側に設定画面が開くので、「Unstructured Documents」（②）のプルダウンから、先ほど作成したデータストア「raliosbot-datastore」を選択してください（③）。選択したあとは必ず画面右上の「Save」ボタンを押してください。

![データストアを接続する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/790bc8c0-4933-5018-af0b-d4c68a13c837.png)

:::note warn
データストアの選択後、「Save」を押し忘れないよう注意しましょう！
:::

# 5. エージェント（チャットボット）をテストする！
さあ、いよいよエージェント（チャットボット）の設定が完了しました。Dialogflow CX にはテスト機能が搭載されていますので、そちらを使ってテストしてみたいと思います。

### 5-1. テストエージェントを開く
画面右上の「Test Agent」をクリックすると、テスト画面を開くことができます。

![エージェントをテストする](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/77125f05-4a4b-7f20-079e-12ec0f236673.png)

### 5-2. エージェント（チャットボット）をテストする
テスト画面を開くと右下にプロンプト（質問）を入力する欄が出てくるので、そこにプロンプトを入力してエージェントをテストします。

![エージェントをテストする](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/e4dfbf88-a5d7-0bb7-8165-b9f76d1ddb6d.png)
<br>
まずは、「こんにちは！」と入力してみます。すると初期設定で入力した「**こんにちは！ラリオスのことなら何でも聞いてください！**」が返ってきます。

![エージェントをテストする](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/ff7c5603-b315-b8b0-13ef-fa73da8d72a6.png)

<br>
いくつか質問してみましたが、ちゃんとデータストア（Cloud Storage）に保管した PDF（僕のブログ記事）を参照して回答を生成していることがわかります。

![エージェントをテストする](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/ea5268ef-d83e-141d-6b1a-bf0baebb77d5.png)

![エージェントをテストする](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/50f6e1d0-4e12-83d7-7250-3c88d8ac41d2.png)

![エージェントをテストする](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/74c4d883-caec-b823-030a-7a1d9fa3ccaa.png)

# 6. クリーンアップ
Google Cloud の[**コンソール画面**](https://console.cloud.google.com/)に移動します。画面左上のナビゲーションメニューから「IAMと管理」を選択して「リソース管理」に進みます。

![クリーンアップ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/fa720495-5aec-09f5-ce0e-c15e2110c6ce.png)
<br>
該当のプロジェクトを選択します。（今回は「test-ralios」）

![クリーンアップ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/3cc13865-cb29-4e9f-5954-3eaee52cb5d1.png)

画面にしたがって、プロジェクト ID を入力して「このままシャットダウン」をクリックすれば完了です。これによってリソースは削除され**課金をストップ**することができます。なお、30 日以内であれば、プロジェクトを復元することも可能です。

![Screenshot 2023-12-25 15.59.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633280/f02954b6-461a-6a3d-b474-15075ed54b2a.png)
<br>

プロジェクトの管理に関する詳細は、こちらもご参照ください。

https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja#shutting_down_projects

# 6.まとめ
はい。というわけで、いかがだったでしょうか？ ノーコード（画面上でポチポチするだけ）で、独自のデータを参照してエージェント（チャットボット）に回答を生成させることができました。

この記事を書くのには何時間もかかりましたが、**チャットボットの作成はおおよそ 10 分程度**です。

もちろん、画面を遷移させたり Slack に連携させるなど高度な利用をするためには、もっと時間もかかりますし、細かな設定が必要です。でも、まずは簡単に使い始めることができるということはご理解いただけたかなと思います。是非みなさんも触ってみて、いろいろ遊んでみてください！

# おまけ

https://cloud-ace.jp/event/?ref=nav

https://cloud-ace.jp/free-gcp-training/