Dify入門ガイド：作成したAIアプリ、どう公開する？Web公開・API活用する3つの方法

こんにちは、サイオステクノロジーの遠藤です。

みなさん、Difyを利用して生成AIアプリ開発してますか？ノーコード・ローコードでアプリを作成できて、高度なAIアプリを素早く開発できるのが魅力的ですよね。

しかし、Dify上で作成したアプリを実際にどのように公開・活用できるのかについて、具体的な情報が少なく、戸惑うこともあるのではないでしょうか？

そこで本記事では、Difyで作成したアプリを外部に公開し、さまざまな方法で活用する方法を3つ紹介します。

シングルページWebアプリとして公開する
外部のWebアプリに埋め込む
Backend APIとして利用する

なお今回の記事の内容はクラウド版のDifyをベースに記述しております。Difyをより柔軟に活用したい方は、ぜひ参考にしてください！

では始めていきましょう！

1 シングルページWebアプリとして公開する
2 外部のWebアプリに埋め込む
3 Backend APIとして利用する
4 まとめ

シングルページWebアプリとして公開する

１つ目の方法はシングルページWebアプリとして公開する方法です。

この方法は、コミュニティ版を利用して自分で構築しているかクラウド版のDifyを利用しているのかによって公開される場所が変わってきます。

コミュニティ版を利用している場合には、そのDifyアプリケーションが動作しているサーバー上でアプリが動作しますが、クラウドサービスを利用している場合、そのアプリはUdify.appにホストされる仕様になっています。

またこの機能はクラウド版を利用している場合、特に作業をせずともデフォルトで公開されるものとなっています。

ではアプリ画面上でどの用に公開されているか確認していきましょう。

まず公開を試すためにDifyの画面上部の「スタジオ」 >「最初から作成」 > 「チャットボット」を選択し、簡単なチャットボットを作成しました。手順には作成したアプリだとわかりやすいように以下のようなシステムプロンプトを設定しました。

あなたはコンテキストに基づいてユーザーからの質問に回答するチャットボットです。コンテキストに基づいて回答できない場合には「コンテキストに基づいて回答が出来ませんでした。質問を変更してください。」と返答してください。

まず手順をいまから公開するアプリケーションに設定するためにアプリケーション作成画面の右上にある「公開する」をクリックします。

そうすると「更新」ボタンがあるのでこれをクリックして今のアプリの状態を公開するアプリへ反映します。更新が完了したら、「アプリを実行」をクリックすれば作成したアプリケーションを開いてくれます。

チャットボットで作成されたアプリケーションだと以下の画像のようなUIでアプリケーションがUdify.appに公開されます。質問に対してお嬢様口調で返答してくれていることからしっかりシステムプロンプトが反映されていることがわかります。

さてこの機能ですが注意点があります。サクッとアプリがデプロイされるのは大変ありがたいのですが、公開URLを知っているだけで特に認証無しでアプリケーションの使用が出来てしまいます。知らない人にこの公開URLを知られるとアプリが使用され、Difyのアプリで設定しているOpenAI等のトークンも使用されてしまうといったことも考えられますので、運用には注意が必要です。

ちなみにデフォルトでオンになっているこの機能ですが、オフにすることも可能です。

オフにするには「スタジオ」左の「監視」タブの「公開URL」の右上にある稼働中のトグルをオフに設定することが出来ます。

公式ガイド : シングルページWebアプリとして公開

外部のWebアプリに埋め込む

２つ目の方法は、外部のWebアプリケーションにiframeやscriptタグで埋め込む方法です。iframeであればiframeタグを埋め込んだ場所にアプリケーションが表示され、scriptタグであれば、Webアプリケーション右下にチャットボタンが現れ、それをクリックすることでアプリケーションを利用できるようになります。

では実際に埋め込む方法を確認していきましょう。

埋め込みを行う方法を確認するには「シングルページWebアプリとして公開する」でも開いた「スタジオ」左の「監視」タブを選択し、「埋め込み」をクリックします。

そうするとウェブサイトに埋め込む方法がポップアップで表示されるので、「チャットアプリをWebサイトに埋め込む方法を選択します」から真ん中のものを選択します。選択するとHTMLコードが表示されるので、右上のコピーボタンを押して自分が掲載したいページのHTMLにコードを追加します。

今回は私はChatGPTにビジネスサイトっぽいHTMLを生成してとお願いをして、そのHTMLにDifyからコピーを行ったHTMLを追加してみました。作成してみると、画面の右下にチャットボタンのようなものが追加されるので、クリックしてみましょう。

クリックしてみると、企業サイトでよく見るようなチャットボットサポートのような表示がされ、質問を投げることができます。質問を行ってみた結果、しっかりお嬢様口調で答えてくれているので作成したアプリケーションが呼び出せていることが確認できました。

ちなみにこちらの方法につきましても、１つ目の方法と同じく公開URLをオンにしていないと使用できないのでご注意ください。

Backend APIとして利用する

３つ目の方法は、Backend APIとして利用する方法です。Difyでは作成したアプリケーションをREST API形式で提供する機能が備わっており、APIを通じて安全に機能を呼び出し視覚的インターフェースでアプリケーションをリアルタイムに設計・運営することが出来ます。

では実際にBackend APIとして利用する方法についてもアプリケーション上で確認していきましょう。

まず今までと同じように作成した「スタジオ」左の「監視」タブを開きましょう。

開けたら、「バックエンドサービスAPI」の中にある「APIキー」をクリックします。

そうするとAPIシークレットがポップアップで出てくるので、「新しいシークレットキーを作成」をクリックします。

そうすると、APIシークレットキーが表示されるのでクリップボードマークをクリックしてコピーをしましょう。

またAPIシークレットキーですが、Difyアプリケーション上でも「APIの悪用を防ぐために、APIキーを保護してください。フロントエンドのコードで平文として使用しないでください。」とあるように管理には気をつけましょう。

ここまでの作業が完了したら、APIの利用方法について確認しましょう。APIの使用はスタジオの左のタブの中にある「APIアクセス」か、バックエンドサービスAPIの中の「APIリファレンス」をクリックすることで見ることが出来ます。

以下の画像は表示されるAPIリファレンスの一部です。使用できるAPIとしては非常に多く、基本のチャットメッセージを送信するAPIに加えて、フィードバックメッセージをエンドユーザーが送ることでアプリケーションの出力を開発者が期待される出力を最適化させるために使用する「メッセージフィードバック」APIや、現在のメッセージに対する次の質問の提案する「次の推奨質問」APIなどおもしろいAPIが提供されているようです。本ブログではチャットメッセージを送信するAPIの使い方を確認していきます。

では、APIリファレンスを参考にcurlを使用してAPIを叩いてみます。今回は「東京について教えて」というメッセージを送ってみました。

curl -X POST '<https://api.dify.ai/v1/chat-messages>' --header 'Authorization: Bearer｛api-key｝' --header 'Content-Type: application/json' --data-raw '{
    "inputs": {},
    "query": "東京について教えて",
    "response_mode": "blocking",
    "conversation_id": "",
    "user": "abc-123"
}'

結果がUnicodeエスケープシーケンスで表示されるので、分かりづらいですね。Difyアプリケーション上からも確認できるのでそちらでレスポンスを確認してみましょう。