Node.js & TypeScriptでLINEBot入門（2）：ChatGPT APIを活用したチャットボット開発

2023 4/23

2023年4月7日 2023年4月23日

Node.jsとTypeScriptを利用して、ChatGPT APIを活用したLINE Botによるチャットボットの開発方法についてまとめていきます。

【得られること】
Node.jsとTypeScriptを使用してLINEBotとChatGPTを組み合わせる基本的な知識を身につけ、実装方法を理解できる
他のAPIやサービスとの連携が可能なBotを開発するための基盤が身につく

ChatGPTについて

ChatGPTとは

ChatGPTとは、OpenAIが開発したGPT-4アーキテクチャを基盤とする大規模な言語モデルで、自然言語理解と生成の両方に優れた性能を発揮します。これにより、自然な会話を実現するチャットボットや、質問応答システムなどの開発が可能になります。ChatGPT APIを利用することで、簡単にアプリケーションやサービスに組み込むことができ、様々な業界や用途に対応する高い汎用性を持っています。

ChatGPT APIとは

ChatGPT APIは、OpenAIが提供するAPIで、開発者がChatGPTの高度な自然言語処理能力を簡単に活用できるように設計されています。このAPIを使うことで、アプリケーションやサービスにChatGPTの機能を組み込むことができ、リアルタイムの会話応答生成や、質問応答システムの構築が容易になります。Node.jsとTypeScriptを用いてChatGPT APIを活用することで、LINE Botを通じたチャットボット開発がスムーズに進み、ユーザーエクスペリエンスの向上や業務効率化に役立てることができます。

LINEBotについて

LINEBotとは、LINE Messaging APIを利用して、LINEアプリ内でチャット型のコミュニケーションを行うことができるボットのことです。ユーザーとの自動応答や、特定のワードに反応するアクションを設定することができ、さまざまなシーンで活用できます。
LINEBotの開発には、Node.jsやPythonなどのプログラミング言語を使った開発が一般的で、SDKも提供されているため初心者の方でも簡単に開発が可能となっています。

詳しくは別記事でも説明していますので、お時間あるときに読んで下さい。

実装の流れ

STEP

実行環境の構築

前回の記事を参考にNode.js + TypeScriptの実行環境を構築

STEP

LINE Botのセットアップ&実装

前回の記事を参考にLINEBotの実装

STEP

ChatGPT APIのセットアップ&実装

前回の記事を参考にChatGPT APIの実装

STEP

ChatGPT APIとLINE Botの連携

LINE Botを経由してChatGPTとやり取りできるチャットボットを実装

STEP

動作検証

実装したLINEBotに対してメッセージを送信し、正常に動作することを確認

開発環境

Node.js：v18.15.0
npm：v9.5.0
TypeScript：v4.9.5
OS：MacOS Monterey

処理フロー

最終的な処理フローは以下のような形になります。

メッセージを送信
LINEからChatGPT用のボットに対してメッセージを送信
APIサーバーへリクエスト
LINE Message API経由で起動しているAPIサーバーをメッセージを含めてリクエスト
ChatGPT APIにリクエスト
APIサーバーからChatGPT APIに対してメッセージを含めてリクエスト
ChatGPT APIから返答
ChatGPT APIからの返答（レスポンス）をAPIサーバーで受け取る
LINE Message APIへレスポンス
APIサーバーからLINE Message APIへChatGPT APIからの返答をレスポンス
メッセージを返信
LINE Message API経由してLINEへChatGPTからの返答を送信

実装手順

各ステップ毎に説明はしていきますが、本記事に全て構築手順や概要を説明しているとかなり長くなってしまうため、別記事にてまとめている内容を参考記事として紹介させていただきます。
そのため、必要なステップのみご覧いただきたい方は適宜読み飛ばして頂ければと思いますが、構築作業が一切完了していない方は各記事を参考に進めてください。

実行環境の構築

本章でのゴール：Node.js + TypeScriptによる実行環境の構築ができていること

まずはNode.js + TypeScriptで実行できる環境を構築します。
構築方法は以下をベースに実施しましたので、まだ構築できていない方は参考にしてください。

この時点でのディレクトリ構成は以下

.
├── README.md
├── dist
│   └── index.js
├── src
│   └── index.ts
├── package-lock.json
├── package.json
└── tsconfig.json

LINE Botのセットアップ&実装

実装方法

本章でのゴール：LINE Botの構築が完了しており、LINE上でメッセージのやり取りができること

次にLINE BotのセットアップとNode.js & TypeScript でLINE Botを実装していきます。
セットアップ方法や構築手順について以下記事を参考にしてください。

主な構築手順

expressによるAPIサーバーの構築
ngrokを使ってローカル環境の外部公開
LINE Messaging APIの設定
LINEBot SDKを使ったLINEBotの実装

ChatGPT APIのセットアップ&実装

実装方法

本章でのゴール：Node.js & TypeScript で構築した実行環境からChatGPT APIとの疎通できていること

次にChatGPT APIのセットアップとNode.js & TypeScript でChatGPT APIを利用してチャットボットを実装していきます。
セットアップ方法や構築手順について以下記事を参考にしてください。

主な構築手順

ChatGPT API のセットアップ
ChatGPT APIの呼び出し処理の実装
チャットボットの実装

ChatGPT APIとLINE Botの連携

いよいよ本題ですが、LINE BotとChatGPTを連携できるようにAPIサーバーの実装を行なっていきます。
実際にはStep②とStep③の処理を組み合わせております。

本記事では会話履歴を考慮したチャットボットまでは実装しておりません。
一つのメッセージに対してChatGPTからの返答を受け取るのみです。

最終的なソースコード

import {
  ClientConfig,
  Client,
  middleware,
  MiddlewareConfig,
  WebhookEvent,
  TextMessage,
  MessageAPIResponseBase,
} from '@line/bot-sdk';
import {
  ChatCompletionRequestMessageRoleEnum,
  Configuration,
  OpenAIApi,
} from 'openai';
import express, { Application, Request, Response } from 'express';
import { load } from 'ts-dotenv';

type Message = {
  inputText: string;
  completionText: string;
};

const env = load({
  CHANNEL_ACCESS_TOKEN: String,
  CHANNEL_SECRET: String,
  PORT: Number,
  OPENAI_API_KEY: String,
  USER_ID_LIST: String,
});

const PORT = env.PORT || 3000;

//LINE Bot
const config = {
  channelAccessToken: env.CHANNEL_ACCESS_TOKEN || '',
  channelSecret: env.CHANNEL_SECRET,
};
const clientConfig: ClientConfig = config;
const middlewareConfig: MiddlewareConfig = config;
const client = new Client(clientConfig);

//ChatGPT API
const configuration = new Configuration({
  apiKey: env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

/**
 * ChatGPT APIとの連携
 * @param {string} text - メッセージ
 * @returns {Promise<string>} - レスポンス
 */
const chatGptHandler = async (text: string): Promise<string> => {
  const errorMessage = 'エラーが発生したためもう一度やり直してください';
  try {
    //③ChatGPT APIの呼び出し
    const response = await openai.createChatCompletion({
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: ChatCompletionRequestMessageRoleEnum.User,
          content: text,
        },
      ],
    });
    const answer = response.data.choices[0].message?.content; //④返答（レスポンス）の取得
    return answer ?? errorMessage;
  } catch (error) {
    console.log(error);
  }
  return errorMessage;
};

/**
 * LINEメッセージの処理
 * @param {WebhookEvent} event
 * @returns {Promise<MessageAPIResponseBase | undefined>}
 */
const textEventHandler = async (
  event: WebhookEvent
): Promise<MessageAPIResponseBase | undefined> => {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return;
  }
  if (event.source.userId !== env.USER_ID_LIST)
    throw new Error('不正なユーザーのためブロック');

  const { replyToken } = event;
  const { text } = event.message;
  const gptResponseText = await chatGptHandler(text); //②ChatGPTとの連携
  const response: TextMessage = {
    type: 'text',
    text: gptResponseText,
  };
  await client.replyMessage(replyToken, response); //⑤LINEに返答（レスポンス）を送信
};

const app: Application = express();

app.get('/', async (_: Request, res: Response): Promise<Response> => {
  return res.status(200);
});

app.post(
  '/webhook',
  middleware(middlewareConfig),
  async (req: Request, res: Response): Promise<Response> => {
    const events: WebhookEvent[] = req.body.events;
    await Promise.all(
      events.map(async (event: WebhookEvent) => {
        try {
          await textEventHandler(event); //①LINEからのメッセージ処理
        } catch (err: unknown) {
          if (err instanceof Error) {
            console.error(err);
          }
          return res.status(500);
        }
      })
    );
    return res.status(200);
  }
);

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}/`);
});

説明の都合上、同一ファイル内に全てコードを書いていますが、適宜メソッド分割や別ファイル追加等の対応はしてください。

処理フロー解説

LINEからのメッセージ処理
textEventHandlerでLINEからのメッセージ処理を実行
ChatGPTとの連携
chatGptHandlerでChatGPT APIとの疎通を実行
ChatGPT APIの呼び出し
LINEから受け取ったメッセージをChatGPT APIへリクエスト
返答（レスポンス）の取得
ChatGPT APIのレスポンスからメッセージを取得
LINEに返答（レスポンス）を送信
ChatGPT APIの返答をLINEへ送信

動作検証

最後に、実際にLINEからメッセージを送信して、ChatGPTに質問してみましょう。

LINE Message APIのWebhookURLの更新が必要な場合は忘れずに実施してください。

返答までに10~20秒ほどかかりましたが、無事に返答を頂くことができました！

補足

デプロイ

ローカル環境では毎回サーバー起動とWebhookURLの更新を手動で実施する必要があるため、継続して利用していくには少し不便です。
ホスティングサービスを利用して、デプロイを行えば基本常時起動できますので以下記事を参考にしてください。

Render&無料プランの場合、しばらく疎通がないとスリープ状態（15秒ぐらいで復帰）になりますのでご注意ください。

セキュリティ対策

LINEBot自体はURLやQRコードを知っていれば、誰でも利用することできてしまいます。（違っていたらすみません）
そのため、ChatGPT APIを悪用される危険性もあります。
よって、今回は簡単ではありますが以下のような実装を組み込んでおります。

if (event.source.userId !== env.USER_ID_LIST)
    throw new Error('不正なユーザーのためブロック');

シンプルに特定のユーザーID以外は利用できないように分岐を追加しています。
他にもっと良い方法があれば教えてほしいですが、一旦これで不要な疎通は防げるはずです。
ユーザーIDの取得方法は公式Docを参考にしてください。
https://developers.line.biz/ja/docs/messaging-api/getting-user-ids/#getting-user-ids

まとめ

Node.jsとTypeScriptを用いてChatGPT APIとLINE Botを連携してチャットボットを開発する方法について解説しました。これらの技術を組み合わせることで、効果的なチャットボットを開発することができます。今後も技術の進歩に目を向けながら、新たな知識やスキルを習得していければと思います。