はじめに

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を作成します。

script.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を記述します。

.env

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を呼び出せます！みんなも使ってみてくださいね！