【Dify×Notion】ノーコードで高性能なチャットボットを作る方法【チュートリアル】

0:00 皆さんこんにちはノーション公式 アンバサダーのツブレです本日も動画を見 ていただきありがとうございます今日の 動画はいつもと少し違うテーマになるん ですがAIツールとノーションの 掛け合わせの可能性についてお話ししたい と思っていますタイトルはDEFY掛 ノーションでチャットボットを作る方法と いうことで今回は個人的に研究をお勧めて たDEFYというツールとノーションを 組み合わせてチャットボットを作る方法に ついて解説してみたいと思います実際に 企業様にもノーション上に入れたデータを チャットボット化してこんなん作れます よっていう提案をしたら喜んでもらえたの で今回他の人にももしかしたら参考になる 部分あるんじゃないかなという風に思って 動画化しています色々とTwitterで ついてたんですがようやく形になったと いう感じですねまず始めに今回使うツール のDEFYについて説明したいと思います こち基本的には無料で使えるツールで

0:47 WiFi何ができるかって言うと書いて ある通りなんですけど先進的なAI アプリケーションのためのイノベーション エンジンということでちょっと何書いて あるかよくわかんないんですがこんな感じ のおしゃれなサイトでございますとで読ん でもAIについて詳しくない人は何が書い てあるかよくわからないと思うので僕なり に噛み砕いて持ってきたんですがまず こちらに書いてある文章でllmアプリ 開発プラットフォームっていう風に書かれ てますllmっていうのが日本語に訳すと 大規模言語モデルのことで皆さんご存知だ と思うんですけどChatGPTの中で 動いてるAIの脳みそみたいな部分を想像 してもらえればと思います今回紹介する このDEFYはllmのアプリ開発 プラットフォームなんでDEFY自体が 言語モデルをを持っているわけではないと いうところを抑えておきましょうfifは

1:33 脳みそ部分を持っていないのでチット GPTだったりあとclodですねあと Googleのjemiなんかでもいいと 思うんですけどその辺りのAIの脳みそ 部分と組み合わせて使用するっていうのが 一般的な使い方になりますあとここに出 てるオープンソースっていう言葉なんです けどこれエンジニアの方じゃないと聞き 馴染みない言葉だと思うんですがこの DEFYっていうものはWeb上でも使う ことできますしあとオンプレってよく言わ れたりするんですけどこのパソコンだっ たりあと会社にあるサーバーだったりで Webの世界と繋がなくてもDEFYを 動かすっていうことが可能だったりします なんですが今回はWeb上での利用という ことでこちらの方が楽に設定済ませること ができるのでこちらを使って説明していき たいと思いますWEBを使う場合はこちら のDEFYのホームページの右上の始める ボタンですねこちらをクリックすることで

2:18 誰でも無料で始めることができますもし 興味ある方は是非こちらクリックして始め てみてくださいちょっとこう難しい話続い ちゃったんで実際に何ができるのっていう ところを説明していきたいと思いますでも 見ていただいた方がね多分分かりやすいと 思うのでデモページを作ってきましたまず デモの1つ目としてDEFYテスト用ペー ジっていうのを準備してきたんですが こんな感じでノーション上にちょっと架空 の情報も混じってるんですがつやの プロフィールページみたいなのを準備して きましたこちらはAIに書いてもらった ところがあるので間違った情報も含まれ てるかもしれないんですがこんな感じの プロフィールページがあったとしますで dfyで作ったチャットボットノーション 上に埋め込んでるんですがスタート チャットということでプラヤの経歴を教え てみたいな感じででチャットに聞いてみ たいと思いますまこんな感じでチャット ボットが回答してくれましたねブライの

3:04 会社について教えてみたいに聞くとこんな 感じで僕の会社が出てきましたね一方で ソフトバンクの社長を教えてみたいな感じ で聞いてみると申し訳ありませんがその 質問には回答できませんということで 先ほどのページにない情報に関しては答え ないような設定になっていますAIって うまく設定してやらないとハルシネーショ ンっていう風に呼ばれたりするんですけど 間違った情報をあかも本当のことみたいに 回答しちゃうっていうことがあると思うん ですけど今回チャットボットはそのような ことがないように制御を加えていますこの 設定もすごい簡単にできるので設定の仕方 後ほどまた改めて説明しますもう1つ例を 準備してあります今度は企業データベース ということで簡単なデータベースにはなる んですが各企業の資本金と代表の情報が 載っているページになります実際に デファイに質問してみましょう会社への

3:50 資本金はいくらこんな感じで聞いてみたい と思います会社への資本金は100万円 ですと書いてきました会社Bの代表は誰 みたいに聞いてみます今度は田中さんです という風に書いてきましたね今度は会社D の授業内容を教えてという風に聞いてみ ます申し訳ありませんがその質問には回答 できませんという風に帰ってきました実際 に確認しておきましょうか会社Aの資本金 と会社Bの代表がそれぞれ100万円田中 さんという形で回答が変ってきたんですが あったそうですね資本金が100万円で 代表が田中さんという風になっていました こんな感じでノーションに入っている情報 だけを回答してくれるチャットボットと いうのがdfiを使って作ることができ ますでざっくり仕組みを図で説明した方が 分かりやすいと思うので簡単ですが図を 作って持ってきました今回ユーザーが僕で DEFYのチャットボットに対して質問を

4:35 したら返答が返ってきたという形になっ てるんですが質問した裏で何が行われてる のかと言と今回はclodのAPIを使っ てるんですがAIのAPIを実行してそれ に対して応答が返ってくるそしてユーザー に対して返答を返してくれるみたいな形に なっています事前にコンテキストっていう ことでFiのチャットボットに情報を事前 に読み込ませるということをしています この事前に与える情報が先ほどの ノーションページというカクリになってい て設定方法はまた後ほど説明するんですが ノシの情報をDEFYに食べさせておく ことでその情報だけ返答してくれるような チャットボットが作れるという形になり ますこの動画では実際にWiFiの チャットボットを作ってみたいと思います 慣れてくると本当に5分ぐらいでこの チャットボット作れるようになるので簡単 に作れるんだっていうことを皆さんにお 伝えできればなという風に思っています

5:21 ここからは作り方のデモということで説明 していければと思いますデモするんですが DEFYのアカウント作成だったりあと AIツールのpiiキーの取得みたいな 初期設定の部分は今回の動画の本筋とはれ てしまうので割愛しようと思いますこの 部分も慣れてる人であれば5分かからずで 終わるとは思うんですがアカウント作成は 先ほどの始めるボタンをクリックして進め ていただくだけAPIキーの取得は取得の 仕方検索していただくとたくさん記事出て くると思うので是非自分で取得して設定し てみてください今回はアカウント作成と APIキーの設定が済んでいるという前提 で一緒に進めていきますそれではまず ノーションのページを作ってどんな チャットボットを作るのかというところを 決めていくところから始めていきたいと 思います新しいページを作ってこちらに 情報を入れていきたいと思います今回は

6:06 パブリシティ使って白の時間管理 iPhoneアプリのマニュアルを作って くださいというプロンプトでこんな感じの マニュアル作ってもらったのでこんな感じ でノーションに貼り付けておきますどんな アプリか全くわかんないですが色々できる アプリっぽいですねこんな感じで マニュアルページを作成しましたそうし ましたら次にDEFYにこのページを慣 レッチとして読み込ませる処理をしていき たいと思いますffiの画面開いて いただくとこんな感じになります僕の場合 はすでにチャットボットとナレッジいくつ か入れてしまってるんですが先ほどの ページを読み込ませるにはナレッジを作成 のボタンをクリックしますでノーション から同期のところで既にこちら紐付けが 完了してしまってるんですがまだの方は ノーションと接続して先ほどのページを紐 づけるようにしてくださいおそらくこの ようなページが表示されるのでページを 選択するの部分から先ほどのページを選ぶ

6:52 ようにしてくださいでdfy上でこちらの ページを選択した状態で次へボタンを クリックしますテキストの前処理と クリーニングということでこちらの部分は 細かくカスタマイズしたい方は変更して いただいてもいいと思うんですがノシの ページぐらいの情報量だったらどれ欄でも 変わらないと思うのでデフォルトのままで 大丈夫だと思います保存して処理を クリックしますこれ今0%っっていう風に なっているんですが100%になりました ねこのくらいのテキスト量だったら数秒 程度でノシのページの読み込みが完了し ますレッジの作成が完了したので今度は スタジオの方に移りましょう今回は チャットボットを作っていくのでアプリを 作成するで最初から作成でチャットボット を選択します架空のアプリ timeflowProのチャットボット という風に名前をつけておきます作成する ボタンをクリックしますチャットボットで 設定するところは2つだけでまず始めに

7:39 こちらのコンテキストの部分に先ほど 読み込ませたユーザーのマニュアルを追加 していきます追加ボタンをクリックすると 今まで読み込ませたものが一覧で表示さ れるので今回はこの1番上ですねタム frowProを選択して追加を押します こちらの部分複数マニュアル読み込ませる ことも可能なのでさらに追加したい場合は ポチポチと押していくださいで次に手順の 部分にプロンプトを書いていきます ユーザーからの質問に対しコンテキストの 情報を元に回答してください本テキストの 情報を元に回答できない場合は申し訳あり ませんがの質問には回答できませんと返答 してくださいこんな感じにしておきたいと 思います右側にプレビュー画面が表示さ れるのでポットと話すの部分から何か質問 してみたいと思います例えばアプリが応答 しませんみたいに聞くとこんな感じで返答

8:27 が返ってきましたねショートカット教えて みたいにも聞いてみましょうあいいですね これらのショートカットを覚えておくと 便利ですあとこのアプリどんな機能がある んですかねマニュアル読んでないんで わかんないんですけどプロジェクト管理 できるとか聞いてみましょうかあ プロジェクト管理もできそうですね時間 計測は時間計測は以下の手順で行えますと のことですブヤさんの年齢を教えてみたい に聞いてみましょうあ申し訳ありませんが その質問には回答できませんということで マニュアルにない情報だったので返答し ないという設定もできていそうです ばっちりですねこんな感じでチャット ボット作ることができました5分かからず で作れたのが分かるあるかと思いますで 今回作ったチャットボットはURL共有が 可能ですほど作ったチャットボットの URLを吐き出してそれを他の人にお渡し するとあのチャットボットは誰でも使える ようになります最初に説明した通りなん

9:12 ですがノーション上にこの吐き出した URLを埋め込むこともできますこの チャットボットみたいな感じでノーション に埋め込んで質問するということもでき ますあとこの部分実際に操作してみると 右上の公開スルーのボタンからサイトに 埋め込むを選択してこちらのURLですね こちらをしておきます能章に戻って先ほど のURLを貼り付けて埋め込みを押すと さっきのチャットボットがここで使える ようになります例えばプロジェクト管理の 方法を教えてみたいに聞くとこんな感じで アプリの使い方を教えてくれますね章に 埋め込む場合はちょっと見づらいので コールアウトで囲んだブロックの中にこの 埋め込みブロック入れておくといいかも しれないですね見栄えが良くなりました こんな感じでノーションのページを元にし たチャットボットがDEFYを使うことで 簡単に作れます最後にいくつか細かい部分 説明しておきたいと思いますまず想定さ

9:59 れる質問としてノーションAIで良くない みたいなのがあるかと思います僕の回答と してはノーションAIも良さがあるんです がこのDefにも良さがあるかなという風 に思っていて1番顕著なところだと ノーションAIはノーションのワーク スペースにメンバーとして追加する必要が あってのメンバー1人ごとに課金が必要に なりますこれ月額10ドルかかるので 決して安い金額じゃないっていうところが あるかなという風に思っているのと メンバーに追加しないとノーションAI 使えないので一般公開するみたいなことも できないんですねなんですけどこのFFの チャットボットは一般公開できるすなわち URLを知ってる人であれば誰でも チャットが使えるっていう状態を実現 できるのでノシにある情報を吸い上げて チャットボットを作るっていう意味におい てはノーションAIでもDEFYでも実現 可能なんですがコスト面だったり一般公開 するかどうかみたいなところでDEFYの

10:46 良さがあるというところですただDEFY 自体は無料なんですけど裏側で動いてる AI先ほどの図で言うとこの左上の部分 ですねAIのAPIは利用料金がかかり ますこちら重量課金になっていて1回実行 するごとにまいくらかお金がかか るっていう形になってるんですけど本当 これすごい安くて1回実行しても0.1円 より安い値段で先ほどの情報量だったら 返してくれると思います詳しい料金は それぞれのAIツールの料金モデル見て いただければなって思うんですけど例えば GPT4Oのminiであればこれ 100万トークンですね100万トークに 対して0.6ドルっていう風になってるの でノーションAI使うよりは圧倒的に安い 金額で使うことができるかと思います ロードの方も同じぐらいの料金感ですね この俳句っていうやつが現状だと1番

11:32 コスパいいモデルになるんですがこれも 100万トークンに対してインプットが 0.8$出力が4ドルという風になってる ので100万トークンってそうそういか ない文字料なのでここの金額に達するまで も相当使い込まないといかないかなという 風に思います繰り返しにはなるんですが1 回実行しても相当安い値段で運用すること できるので安心してお使いいただいていい かなと思いますモデルの選択のところだけ 失敗すると高いモデルいつの間にか使っ ちゃったっていうことことになると思うの でこの点だけ注意するようにしてください 一応説明しておきますねここの部分ですね ここの部分でモデルを変えることができ ますGPT4であればこちらのミニって いうやつがコスパ良くてロードのモデルで あればハクっていう1番上のやつですね こちら使っていただくのがおすすめですで たまにめちゃめちゃ高いやつあるのでちら だけ気をつつけるようにしてください最後

12:18 これからに期待なところということで現 時点でできないところについても説明して おきたいと思います色々研究してみたん ですが2024年12月現在でまず ノーションのリアルタイムの同機ができ ないですノーション上でドキュメントを 書き換えても先ほどのチャットボットは 古い状態のドキュメントを読み込ませた 状態になっているのでドキュメント更新し た場合にはもう1度DEFY側で再度 ナレッジの読み込み直しが必要になります ノーション側でマニュアルを更新した場合 にはマニュアルV1V1.1V1.2 みたいな感じでノーション側でバージョン 管理しておくのがおすすめでナレッジも 残した状態でコピーして新しく作ってい くっていうのがいいかなという風に思って いますそしておくことでDEFYに 読み込ませる時も前回読み込ませたのがV 1.0だった今回はV1.1を読み込ま

13:05 せようみたいな形で管理が繁雑にならなく て済むと思うのでノーション側で バージョン管理してやるのがおすすめです 後頭だと分かりづらかったと思うので一応 説明しておくとこんな感じで元々の マニュアルがV1.0というのがあったと したらマニュアルを更新する場合にはV 1.1ということでコピーして作って 新しいページをディファイ側にまた 読み込ませるっていうのがお勧めですあと 読み込み量の制限がありうっということ ことでちゃんと検証できてないんですけど データ量が多いデータベースに関しては 全部のデータ読み取ってなさそうな気配を 感じましたこれはそのうちもしかしたら 治るのかもしれないんですけど現時点だと 挙動を見てる感じノーションAPIで1回 で取ってこれる量だけしか読み取ってくれ なさそうな状態だったかなという風に思い ます大量のデータを一気にディファイに 読み込ませてコンテキスト化するっていう

13:50 ことは現時点だと難しそうな感じでした これはそのうち治ってくれそうな気もし ますねであと最後データベースに関しては プロパティの情報だけしかが読んでくれ ませんでしたペジ内のコンテンツは 読み込めないので注意ということで序盤で 説明したこちらの企業データベースなん ですけどこの会社Aという情報の資本金と 代表というところはこのデータベース自体 を読み込ませればWii側は認識してくれ たんですがこの会社への中に入っている これも架空の会社概要ですねこのような 情報はこのデータベースを読み込ませても 1回では読み取ってくれませんでしたこの 会社への中身の情報も読み込ませたい場合 には会社へというページをまた別で 読み込ませる処理が必要になるのでこの点 注意していただければと思いますなので 結論現時点でどういうケースだと使えるか なっていうところ考えてみたんですが

14:37 あまり情報の更新頻度が高くない情報に 対するチャットボットだったら十分実用 できかなという風に思っています先ほどの アプリのマニュアルだったりあとなんかの 説明書ですねあとよくある質問集みたいな 情報であればWiFiに読み込ませておく と便利なチャットボットが作れると思うの で現時点でも十分実用的かなという風に 思います逆に言うと頻繁に更新される ドキュメントに関しては現時点だと 使い勝手良くないかなという風に思ってい てドキュメントが更新されるたびに再度 読み込み直しが必要になるっていう点で ちょっと運用のコストがぐーっと上がって しまうのでそういった場合には別の方法を 検討した方がいいかなという風に思います 今後ディファイ側もどんどん進化していく と思うので是非興味ある人は気が向いた タイミングでチャットボットの作成試して みていただければと思いますもしかしたら 情報古くなってる部分もあるかもしれない のでそういった場合にはコメント欄で教え

15:22 てもらえると嬉しいですということで今回 の動画ではDEFYとノーションで チャットボットを作る方法について解説し てみました今回の動画は以上となります 最後までご視聴いただきありがとうござい ました