はじめに
ChatGPTのAPIを呼び出すためにはAPI Keyの情報が必要となりますが、JavaScriptに直打ちすると誰でもAPI Keyを見られるようになってしまい、とても良くないです。
今回はChatGPTのAPIを呼び出すことができるエンドポイント(API)を、Node.jsを使って作っていきます。
API Keyの作成については、以下の記事を参照ください。
完成物
以下のように、bodyにtextを入れて送ることでChatGPTからの返答を得られるエンドポイントを作成します。
const response = await fetch('http://localhost:3000/message', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text: text })
});
コード
まずはNode.jsでプロジェクトを作成します。
npm init -y
npm install express openai dotenv body-parser cors
package.json
が作成されたら、このようにindex.js
を作成します。
require('dotenv').config();
const http = require('http');
const express = require('express');
const OpenAIApi = require('openai');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const app = express();
const corsOptions = {
origin: '*',
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true
};
app.use(cors(corsOptions));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname)));
const client = new OpenAIApi({
apiKey: process.env['OPENAI_API_KEY']
});
app.post("/message", async (req, res) => {
const { text } = req.body;
const prompt = `${text}`; //もしプロンプトに定形文を追加したければここに記述
try {
const response = await client.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: prompt }]
});
const gptResponse = response.choices[0].message.content;
res.json({ result: gptResponse });
} catch (error) {
console.error("Error with ChatGPT API:", error.message);
res.status(500).json({ error: "エラーが発生しました。再度お試しください。" });
}
});
const server = http.createServer(app);
server.listen(3000, () => {
console.log("Server is running on http://localhost:3000");
});
次に、同じ位置に.env
ファイルを作成します。
ここに次のようにChatGPTのAPI Keyを記述します。
OPENAI_API_KEY=API Keyをここに記述
ここまでできたらサイトを起動します。
node server.js
これで、サーバーの起動中に他のサイトからlocalhost:3000/message
を呼び出すことができるようになります。
コードの解説
ここでCORSの設定をしています。簡単にいえばどのサイトから呼び出せるか、の設定です。
現在はどのサイトからでも呼び出せる'*'
と設定していますが、必要に応じて設定を変更してください。
const corsOptions = {
origin: '*',
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true
};
app.use(cors(corsOptions));
openaiのクライアントを作成します。ここで、.env
ファイルに書き込んだAPI Keyを参照しています。
const client = new OpenAIApi({
apiKey: process.env['OPENAI_API_KEY']
});
ChatGPTにリクエストを送信します。
model
を設定することで
const response = await client.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: prompt }]
});
ここでレスポンスからメッセージのみを抜き出し、JSONで返しています。
const gptResponse = response.choices[0].message.content;
res.json({ result: gptResponse });
ChatGPTからのレスポンスはresponse.data
としなくても取得できるようになりました。
まとめ
このようにエンドポイントを作成することでHTML/CSSだけのサイトからでもChatGPTを呼び出せます!みんなも使ってみてくださいね!