最近流行りのあれを利用してReactNativeでチャットボットをつくってみた

こんにちは，ツジです．
今回は最近流行りのOpenAI APIを使って簡単なチャットボットをReactNativeでつくってみたので，その紹介をさせてください．

実際に書いたコード

とりあえず今回作成したコードの全容をお見せします．（ヘッダーコンポーネントなども作成していますが，今回は省略します）
この後にそれぞれのコードの内容を簡単ではありますが解説していこうと思います．

import React, { useState, useCallback } from 'react';
import { GiftedChat, IMessage } from 'react-native-gifted-chat';

import { StyleSheet, View } from 'react-native';

import axios from 'axios';

const ChatScreen = () => {
  const [messages, setMessages] = useState<IMessage[]>([]);

  const sendMessageToChatGPT = async (message) => {
    try {
      const response = await axios.post('https://api.openai.com/v1/chat/completions', 
      {
        model: "gpt-3.5-turbo-0301", // 使用するモデル
        messages: [{ role: 'system', content: 'You' }, { role: 'user', content: message }],
      }, {
        headers: {
          'Authorization': 'Bearer {API KEY}',
          'Content-Type': 'application/json',
        },
        method: 'POST',
      }
    );
      // ChatGPTからの応答を取得
      const reply = response.data.choices[0].message.content;
      return reply;
    } catch (error) {
      console.error('ChatGPT API request error:', error);
      return null;
    }
  };

  const handleSend = useCallback(async (newMessages = []) => {
    const userMessage = newMessages[0];
    setMessages(previousMessages => GiftedChat.append(previousMessages, newMessages));

    // ChatGPTにメッセージを送信して応答を受け取る
    const reply = await sendMessageToChatGPT(userMessage.text);

    if (reply) {
      const botMessage = {
        _id: Math.random().toString(),
        text: reply,
        createdAt: new Date(),
        user: { _id: 2, name: 'ChatGPT' },
        avatar: 'https://placeimg.com/140/140/any',
      };

      setMessages(previousMessages => GiftedChat.append(previousMessages, [botMessage]));
    }
  }, []);

  return (
    <View style={styles.container}>
      <GiftedChat
        messages={messages}
        onSend={handleSend}
        user={{ _id: 1 }}
    />
    </View>
  );
};

const styles = StyleSheet.create({
  container : {
    flex: 1,
  }
});

export default ChatScreen;

実際に動作させた結果がこちらになります．
メッセージを送ってからレスポンスがあるまで少し時間がかかりますが，chatGPTのようにしっかりと質問に答えてくれていますね！

コード解説

使用したパッケージについて

• useState, useCallback（主にチャットの状態管理を扱います）
• GiftedChat, IMessage（チャットのデザインなどについてはこちらを利用しています）
• axios（APIを利用するために使用します）

OpenAI APIから情報（レスポンス）を取得する

const sendMessageToChatGPT = async (message) => {
    try {
      const response = await axios.post('https://api.openai.com/v1/chat/completions', 
      {
        model: "gpt-3.5-turbo-0301", // 使用するモデル
        messages: [{ role: 'system', content: 'You' }, { role: 'user', content: message }],
      }, {
        headers: {
          'Authorization': 'Bearer {API KEY}',
          'Content-Type': 'application/json',
        },
        method: 'POST',
      }
    );
      // ChatGPTからの応答を取得
      const reply = response.data.choices[0].message.content;
      return reply;
    } catch (error) {
      console.error('ChatGPT API request error:', error);
      return null;
    }
  };

基本的には，こちらのOpenAI APIのリファレンスを参照しながらaxiosを利用することで問題なく使えると思います．

ただし，ReactNativeにおいてOpenAI APIを使用する場合にはmethodを明示的に記載する必要があるようです．

const response = await axios.post('https://api.openai.com/v1/chat/completions', 
      {
        model: "gpt-3.5-turbo-0301", // 使用するモデル
        messages: [{ role: 'system', content: 'You' }, { role: 'user', content: message }],
      }, {
        headers: {
          'Authorization': 'Bearer {API KEY}',
          'Content-Type': 'application/json',
        },
        method: 'POST', // 明示的に記載する必要あり
      }
    );

チャット処理について

  const handleSend = useCallback(async (newMessages = []) => {
    const userMessage = newMessages[0];
    setMessages(previousMessages => GiftedChat.append(previousMessages, newMessages));

    // ChatGPTにメッセージを送信して応答を受け取る
    const reply = await sendMessageToChatGPT(userMessage.text);

    if (reply) {
      const botMessage = {
        _id: Math.random().toString(),
        text: reply,
        createdAt: new Date(),
        user: { _id: 2, name: 'ChatGPT' },
        avatar: 'https://placeimg.com/140/140/any',
      };

      setMessages(previousMessages => GiftedChat.append(previousMessages, [botMessage]));
    }
  }, []);

  return (
    <View style={styles.container}>
      <GiftedChat
        messages={messages}
        onSend={handleSend}
        user={{ _id: 1 }}
    />
    </View>
  );

こちらもGiftedChatを利用することで，簡単によくあるチャット機能を実装することが可能になります．
チャットの履歴管理については以下のstateを利用することで実装しています．

const [messages, setMessages] = useState<IMessage[]>([]);

useState<IMessage[]>([])によって，n回目にメッセージを送った際にn-1回目以前のメッセージ内容が変わらないようにしています．

まとめ

どうでしょうか，すごく簡単にChatGPTのようなチャットボットを作成することができたと思いませんか？

APIのレスポンス取得方法やチャットの履歴管理など少し難しい部分もありますが，ReactNativeを使えばこのようなアプリケーションは簡単に作ることができます．

ReactNativeを触ったことがない人は，この機会に是非触ってみてください！

ここまで読んでいただき，ありがとうございました．また次回をお楽しみに！！