【React】ChatGPTのAPIを導入する

今回はChatGPTのAPIを利用して、Reactアプリのブラウザ上で入力した内容に、ChatGPTの回答が表示されるプログラムを書いていきます。

Contents

1 ChatGPTのAPIキー
2 Reactアプリ作成
3 .envファイルとChatgptファイルを作成
4 axios
5 Chatgpt.js
6 App.js
7 全体コード
8 まとめ

ChatGPTのAPIキー

ChatGPTのAPIは、すでに取得済みである事を前提に進めていきます。

公式サイトの下記をクリックして、APIキーを作成しておいてください。

Reactアプリ作成

Reactでアプリを作成します。

npx create-react-app myapp

.envファイルとChatgptファイルを作成

Chatgpt.jsファイルを作成します。

.envファイルをpackage.jsonファイルと同じ階層に作成ください。
階層が同じかどうかを、Windowsだったらdirコマンド、Macだったらlsコマンドで必ず確認してください。

ここまでで、次のようなディレクトリ構造になっています。

axios

axiosをインストールします。

npm install axios

Chatgpt.js

Chatgpt.jsにコードを書いていきます。

importで必要なライブラリを読み込みます。

import React, { useState } from 'react'
import axios from 'axios'

関数を作成して、その下にuseStateを定義します。
入力して送信するuseStateと、ChatGPTのレスポンスを保存するuseStateの２つをつくります。

function Chatgpt() {


const [question, setQuestion] = useState("");


const [chatGptAnswer, setChatGptAnswer] = useState("");

.envファイルにAPIキーを書きます。

ChatGPTのAPIキーを.envファイルに書くときは、下記のように必ずREACT_APP_をつけてください。
XXXXの部分には、ご自身のAPIキーを書きましょう。

REACT_APP_OPENAI_API_KEY=sk-XXXX

Chatgpt.jsファイルに戻り、APIキーを.envファイルから取得するコードを追加します。

const apiKey =process.env.REACT_APP_OPENAI_API_KEY

関数handleSubmitを作成して、ChatGPTへリクエストを送り、レスポンスを受け取る記述をします。

messages配列にある、questionは先ほどuseStateで定義したquestionを指します。

const handleSubmit = async(e) => {
e.preventDefault();
await axios.post('https://api.openai.com/v1/chat/completions',
{
"model": "gpt-3.5-turbo",
"messages": [{"role": "user", "content": question}]
},
{
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${apiKey}`,
}
}
)
.then(response => {
setChatGptAnswer(response.data.choices[0].message.content);
setQuestion("")
})
.catch((error) => {
console.error('An error occurred:', error.response.data);
})


}

ブラウザから入力した値を取得するhandleChange関数を記述します。
入力された値は、useStateのquestionに一時保存されます。

const handleChange = (e) => {
if(e.target.value) {
setQuestion(e.target.value)
}
}

ブラウザから入力したときに、エンターで入力値が送信されるように、handleKeyPressを記述します。

const handleKeyPress = (e) => {
if (e.key === "Enter") {
e.preventDefault()
handleSubmit(e)
}
}

ブラウザに表示される部分を記述します。
ボタンをクリックしたら、handleSubmit関数が呼び出されるようにします。

pタグで囲ったchatGptAnswerは、useStateで定義したものです。
ここにChatGPTのレスポンスが表示されます。

return (
<div>
<input type="text" onChange={(e) => handleChange(e)} value={question} onKeyPress={(e) => handleKeyPress(e)} />
<button onClick={(e) => handleSubmit(e)}>ChatGPTへ質問</button>
{chatGptAnswer && (
<p>{chatGptAnswer}</p>
)}
</div>
)
}

最後に関数を他のファイルでインポートできるように、エクスポートしておきます。

export default Chatgpt

App.js

次にApp.jsで、作成した内容をブラウザに表示するよう記述します。

Chatgpt関数をインポートします。

import logo from './logo.svg';
import './App.css';
import Chatgpt from './Chatgpt';

App関数の中に、<Chatgpt />を記述して、ブラウザに表示させます。

function App() {
return (
<div className="App">
<header className="App-header">
<Chatgpt />
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}


export default App;

これでプログラムの記述は完了しました。Reactを実行して試してみましょう。

npm start

ブラウザには次のように表示されていると思います。
表示されない場合は、プログラムの打ち間違いがないか確認しましょう。

日本で２番目に高い山は？と入力してエンターしてみます。

ChatGPTの回答がブラウザに表示されます。

槍ヶ岳は、日本で５番目に高い山で、２番目ではありません。ChatGPTは優れたAIですが、回答はダブルチェックする必要があるようです。
ChatGPTの性能が上がってくれると、もっと使いやすくなりそうですね。

全体コード

Chatgpt.jsファイルの全体のコードは次のとおりです。

import React, { useState } from 'react'
import axios from 'axios'



function Chatgpt() {


const [question, setQuestion] = useState("");


const [chatGptAnswer, setChatGptAnswer] = useState("");


const apiKey =process.env.REACT_APP_OPENAI_API_KEY


const handleSubmit = async(e) => {
e.preventDefault();
await axios.post('https://api.openai.com/v1/chat/completions',
{
"model": "gpt-3.5-turbo",
"messages": [{"role": "user", "content": question}]
},
{
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${apiKey}`,
}
}
)
.then(response => {
setChatGptAnswer(response.data.choices[0].message.content);
setQuestion("")
})
.catch((error) => {
console.error('An error occurred:', error.response.data);
})


}


const handleChange = (e) => {
if(e.target.value) {
setQuestion(e.target.value)
}
}


const handleKeyPress = (e) => {
if (e.key === "Enter") {
e.preventDefault()
handleSubmit(e)
}
}


return (
<div>
<input type="text" onChange={(e) => handleChange(e)} value={question} onKeyPress={(e) => handleKeyPress(e)} />
<button onClick={(e) => handleSubmit(e)}>ChatGPTへ質問</button>
{chatGptAnswer && (
<p>{chatGptAnswer}</p>
)}
</div>
)
}


export default Chatgpt

まとめ

今回は、ReactにChatGPTのAPIを導入する方法を書きました。
最後までお読みいただきありがとうございました。