😎

Azure OpenAI ✖️ LINE MessagingAPI を使って自分だけのAIチャットボットを作ろう！

2023/10/16に公開

LINE

昨今ちまたで話題の OpenAI。AIと普段使ってるサービスを連携させて面白いものを作りたいなぁと考えるエンジニアの同志達に向けたハンズオン 🖐️ となります。
この記事の目標としては、LINE botにメッセージを送信すると、AIが返信をくれるサービスをリリースすることです。
セットアップで詰まるところはどんどんコメント欄に質問していただいたら、がんがん返していきますので、ご遠慮なく質問してください！

では、Let's ハンズオン！

今回作成するシステムの概要

今回作成するシステムは Azure 上で作成します。
下の図をご覧ください。

Azure

以下の様な技術を使います。

Azure OpenAI
Azure App Service
Azure Bot Service
Managed ID
LINE MessagingAPI
javascript

工夫次第でめちゃくちゃ面白いものが作れる予感...！！
みなさん頑張っていきましょう！

前提条件

以下のインストールおよびサブスクリプションの契約が必要となります。

Node.js
- https://nodejs.org/en/blog/release/v16.20.2
- Node.js v16.20.2
- npm v8.19.4
Bot Framework Emulator
- https://github.com/Microsoft/BotFramework-Emulator/releases/tag/v4.14.1
Azure
- https://azure.microsoft.com/ja-jp/pricing/purchase-options/pay-as-you-go

リソースグループの作成

まずは何がともあれリソースグループの作成です。
全体図で言うとここの部分です。
Azure

まずは、Azure 上で動作させるので、何がともあれ Azure の無料アカウントを作成してみましょう！
Azure の無料アカウントを使ってクラウドで構築

Microsoft アカウントを作成して Azure へログインすれば OK です。

こんな感じの画面が出てきたでしょうか。

Azure

何がともあれ、リソースグループを作成しましょう！
上の検索窓にリソースグループと入力して検索してください。

Azure

リソースグループの画面に進んだら、左上らへんにある作成をクリックして、リソースグループを作成しましょう！
次へを進んで、タグは別になくて大丈夫です。
Azure

作成できましたか？

Azure

Azure OpenAI セットアップ

次に Azure OpenAI のセットアップです。全体図で言うとここの部分です。
Azure dashboard

ここまで作成できたら、また検索窓にOpenAIと入力して Azure OpenAI の画面を開いてください。

また、左上らへんにある作成ボタンをクリックです。
リソースグループは先ほど作成したものを指定し、あとは下の画像のように設定してください。
Azure

ネットワークはインターネットを含むすべてのネットワークがこのリソースにアクセスできます。を選択してください。
タグは特に何もつけなくて OK です。

作成ボタンをクリックしてください。デプロイが進行するはずです。(5 分ぐらいでしょうか。)
デプロイが完了すれば、リソースへ移動です。

次はモデルを Deploy する必要があります。

画面左上らへんにあるAzure OpenAI Studioへ移動をクリックしてください。

Azure

新しいデプロイの作成をクリック → 新しいデプロイの作成をクリックしてください。

以下の様な画面が出てくると思うので、いい感じに入力して作成をクリック

Azure

このデプロイはすぐ完了します。
下の画面のようになりましたか？

Azure

ここまで来れば、AzureOpenAI のセットアップは完了です！
次に進みましょう！

Azure Bot Service のセットアップ

次は Azure Bot Service をセットアップしていきます。
全体図で言うとここです。

Azure

まずはローカルでJavaScriptで少しだけコーディングしてみます。
お好きなディレクトリに移動して、以下のコマンドを実行してください。

私はtmpフォルダで作業することにします。

npm init -y

package.json が作成されたら、以下のコマンドを実行してください。

npm install --save-dev yo generator-botbuilder

次にスケルトンの作成をしていきます。

npx yo botbuilder

上記コマンドを実行すると、ウィザードが上がってきます。

PS C:\Users\yusuke\dev\03.azure\tmp> npx yo botbuilder

Welcome to the Microsoft Bot Builder generator v4.17.0.

Detailed documentation can be found at https://aka.ms/botbuilder-generator

? What's the name of your bot? chatbot
? What will your bot do? Demonstrate the core capabilities of the Microsoft Bot Framework
? What programming language do you want to use? JavaScript
? Which template would you like to start with? Echo Bot - https://aka.ms/bot-template-echo
? Looking good.  Shall I go ahead and create your new bot? Yes

...

Run `npm audit` for details.
------------------------
 Your new bot is ready!
------------------------
Open the README.md to learn how to run your bot.
Thank you for using the Microsoft Bot Framework.

上記のような表示がされればOKです！

そして今回使用するのはchatbotだけなので、残りのフォルダは削除してください。

Azure

一旦ターミナルやpowershellでchatbotへ入り、以下のコマンドを実行です。

npm install

問題なく終了すれば、以下のコマンドでVSCodeを開きます。

code .

デバッグ実行したいので、VSCodeの左側のデバッグをクリックしてください。
そこでlaunch.jsonを作成します。をクリック。
Azure

デバッガーの選択ではNode.jsを選択してください。

launch.jsonは以下のように記載してください。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "プログラムの起動",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js",
      "envFile": "${workspaceFolder}/.env"
    }
  ]
}

ここまで出来たらセーブして、F5を押してください。
デバッグ実行が開始されます。
デバッグコンソールへ以下の表示がされればOKです。(これからlocalhost:3978へアクセスしに行きます。)
Azure

次にBot Framework Emulatorを使って動作確認していきます。

Bot Framework Emulatorのインストールはこちら

MACの方はこちら
- BotFramework-Emulator-4.14.1-mac.dmg
Windowsの方はこちら
- BotFramework-Emulator-4.14.1-windows-setup.exe

以下のようなエミュレータが起動出来ればOKです。

Azure

Open Botを開き、以下のように入力してください。

Azure

Connectをクリックして、以下のような表示になったでしょうか。
Hello and Welcome!と表示されればOKです。

Azure

今のところはオウム返ししてくるBotになります。

Azure

これをOpenAIに接続し、AIと会話出来るチャットボットにするためにbot.jsを以下のコードに差し替えてください。

bot.js

/* eslint-disable */
const { ActivityHandler, MessageFactory } = require('botbuilder');
const axios = require('axios');

const OPENAI_RESOURCE = process.env.OPENAI_RESOURCE;
const OPENAI_DEPLOYMENT = process.env.OPENAI_DEPLOYMENT;
const OPENAI_API_VERSION = process.env.OPENAI_API_VERSION;
const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
const OPENAI_COMPLETION_URL = `https://${OPENAI_RESOURCE}.openai.azure.com/openai/deployments/${OPENAI_DEPLOYMENT}/chat/completions?api-version=${OPENAI_API_VERSION}`;

var getCompletion = async function (text) {
  var data = {
    messages: [
      {
        role: 'user',
        content: text,
      },
    ],
  };
  var res = await axios({
    method: 'post',
    url: OPENAI_COMPLETION_URL,
    headers: {
      'Content-Type': 'application/json',
      'api-key': OPENAI_API_KEY,
    },
    data,
  });
  return (res.data.choices[0] || []).message?.content;
};

class EchoBot extends ActivityHandler {
  constructor() {
    super();
    this.onMessage(async (context, next) => {
      try {
        const replyText = await getCompletion(context.activity.text);
        await context.sendActivity(replyText);
      } catch (error) {
        console.log(
          '🚀 ~ file: bot.js:43 ~ EchoBot ~ this.onMessage ~ error:',
          error.message
        );
      }
      await next();
    });

    this.onMembersAdded(async (context, next) => {
      const membersAdded = context.activity.membersAdded;
      const welcomeText = 'Hello and welcome!';
      for (let cnt = 0; cnt < membersAdded.length; ++cnt) {
        if (membersAdded[cnt].id !== context.activity.recipient.id) {
          await context.sendActivity(
            MessageFactory.text(welcomeText, welcomeText)
          );
        }
      }
      // By calling next() you ensure that the next BotHandler is run.
      await next();
    });
  }
}

module.exports.EchoBot = EchoBot;

次に.envファイルを修正します。

.env

MicrosoftAppType=
MicrosoftAppId=
MicrosoftAppPassword=
MicrosoftAppTenantId=
OPENAI_RESOURCE=xxxxxxxxxxxxxxxxx
OPENAI_DEPLOYMENT=xxxxxxxxxxxxxxxxx
OPENAI_API_VERSION=2023-03-15-preview
OPENAI_API_KEY=xxxxxxxxxxxxxxxxx

それぞれの値の確認方法は以下です。

OPENAI_RESOURCE
- Azureポータルより、Azure OpenAIのリソース名を参照
OPENAI_DEPLOYMENT
- Azure OpenAI Studioのデプロイの箇所より、デプロイ名を参照
OPENAI_API_VERSION
- 2023-03-15-preview と入力
OPENAI_API_KEY
- AzureポータルのAzure OpenAIのキーとエンドポイントの箇所より、キー 1 を参照

これで再度実行してみましょう！
以下のようにAIが返信してくれるはずです。

Azure

ここまで出来たら、次にAzureにてAzure Bot Serviceを作成します。

Azure

Bot Service → 作成をクリックしてください。

Azure Botというサービスが表示されるので、選択し作成をクリック。(かなり下の方です。)
Azure

作成画面ではボットハンドルとリソースグループを指定してください。

Azure

もう少し下のほうにMicrosoft App ID (Managed ID)の作成項目があります。

アプリの種類をユーザ割り当て済みマネージドIDへ変更してください。

こちらの設定は以上です。
確認と作成をクリックして、BotServiceを作成してください。

今のところはリソースグループを確認すると３つ出来ていれば順調です。

Azure

App Service のセットアップ

ここからはBot Serviceの裏側で動作するApp Serviceを作成していきます。
全体図で言うとここです。

Azure
まずは、Azureポータルへログインし、App Serviceを検索してください。

Azure

App Serviceの画面へ進んだら、Webアプリ作成をクリックしてください。

Azure

nodeのバージョンはご自身の環境に併せて設定してください。
以下のコマンドで調べることが出来ます。

node -v

価格プランはBasicを選択してください。

Azure

デプロイ・ネットワーク・監視は初期設定のままでOK
そこまで出来たら、確認及び作成をクリックしてください。

WebAppが作成されたらOKです！

App ServiceへDeploy

ここまでできたら後はデプロイとなります。
VSCodeを開けて、画面左側の拡張機能のAzureのアイコンをクリックし、App Serviceを選択してください。

右クリックメニューよりDeploy to Web Appを選択し、デプロイを開始してください。

Azure

問題なくデプロイが完了したら、Application Settingの箇所を選択し、右クリックから Upload local Settingsを選択。
.envファイルの内容が自動でUploadされます。

これにてローカルでの作業は完了です。
次にAzureポータルへ再度アクセスしてください。
先ほどBotService作成時に生成したマネージドIDをAppServiceへ適用していきます。

Azureポータル→App Service→IDを選択

ユーザ割り当て済みのタブを選択し、ユーザ割り当て済みマネージドIDを追加をクリック。

Azure

先ほど作成したマネージドIDを選択し、追加をクリック

Azure

続いて最後に環境変数の設定です。
そのままAppServiceの構成より以下のように環境変数を設定していきます。

MicrosoftAppId→マネージドIDのプロパティよりクライアントIDをコピーして設定
MicrosoftAppType→UserAssignedMSI と入力
MicrosoftAppPassword→こちらは設定しなくてOK
MicrosoftAppTenantId→マネージドIDのプロパティよりテナントIDをコピーして設定

上記、入力出来たら、保存をクリックしてください。

LINE MessagingAPIの設定

ここからはBot ServiceとLINEの連携を行っていきます。
全体図で言うとここです。

Azure

まずはApp ServiceとBot Serviceを連携させます。
Azureポータル→Bot Service→構成→メッセージングエンドポイントへAppServiceの概要の規定のドメインに記載されているURLに/api/messagesと追記して設定してください。

Azure

次はBot ServiceにLINEを設定していきます。

AzureポータルよりBot Serviceを開き、チャンネルからLINEを選択
LINEのチャネルシークレットとチャネルアクセストークンを入力します。

以下サイトより、コンソールへログインし、プロバイダーを作成してください。
Messaging APIを使用します。
LINE Developers

以下のようなプロバイダーを作成してください。

Azure

作成したら、チャネルの基本設定より、チャネルシークレットを、
MessagingAPIの箇所でチャネルアクセストークンを発行してください。

発行したら、Azureポータルに戻り、チャネルシークレットとチャネルアクセストークンを入力後、
Webhook の URLを生成してください。

上記で生成したURLをWebhook URLに貼り付ければOKです。

Azure

これで設定は全て完了です。
お疲れさまでした。

動作確認

では、LINE botへメッセージを送信してみましょう！

Azure

AIが返信してくれましたか？
ここまで出来たら完了です！
本当にお疲れさまでした。

お片付け

最後にずっと残してて課金されないようにお片付けです。

以下、2つの操作を実行すれば OK です。

Azure OpenAI Studio からデプロイの削除
Azure よりリソースグループの削除

しっかりお片付けして本日は終わりです。

お疲れ様でした。

最後に

なかなか盛りだくさんの内容なので、詰まっちゃった方はぜひコメント欄にてどしどし質問してくださいね！

GitHubで編集を提案

Azure OpenAI ✖️ LINE MessagingAPI を使って自分だけのAIチャットボットを作ろう！

目次

はじめに

では、Let's ハンズオン！

今回作成するシステムの概要

前提条件

リソースグループの作成

Azure OpenAI セットアップ

Azure Bot Service のセットアップ

App Service のセットアップ

App ServiceへDeploy

LINE MessagingAPIの設定

動作確認

お片付け

最後に

Discussion