React Query で OpenAI API を呼んでみました。

なお本記事の実装では API Key が漏洩する可能性があります。
あくまで参考程度に留めてください。バックエンドでAPIを呼び出しましょう。

バージョン

公式ライブラリの openai/openai-node を用いました

pnpm add openai

バージョンは v4.20.1 です

// package.json
{
  ...
  "dependencies": {
    "openai": "4.20.1",
    ...
  }
}

v4 で破壊的変更があったらしく、呼び方や関数のシグネチャが変わってます。 マイグレーションガイドが公開されているので詳しくは下記をご覧ください。

• v3 to v4 Migration Guide

注意: バックエンドでAPIを呼び出すべき

openai/openai-node は Node.js 用のライブラリですがブラウザでも動きます。

ただし推奨されていません。
ブラウザで動かすには dangerouslyAllowBrowser というフラグを渡す必要があります。

const openai = new OpenAI({
  apiKey: '',
  dangerouslyAllowBrowser: true, // フラグをセット
})

推奨されていない理由ですが、API Key がばればれだからです。

ユーザーに API Key を入力してもらうサービスでもない限り、フロントエンドでAPIを呼び出すのはリスクです。 　

私は諦めました。
バックエンドでAPIを呼び出しましょう。

サンプルコード

サンプルコードです

import { MouseEventHandler, useRef, useState } from 'react'
import { OpenAI } from 'openai'
import { useMutation } from 'react-query'

// api key をセット
const apiKey = ''
const callOpenAiFn = async (message: string): Promise<string> => {
  const openai = new OpenAI({
    apiKey,
    dangerouslyAllowBrowser: true, // 注意
  })
  const res = await openai.chat.completions.create({
    messages: [{ role: 'user', content: message }],
    model: 'gpt-3.5-turbo',
  })
  return res.choices.at(0)?.message.content ?? ''
}

export const ChatUI = () => {
  const chat = useMutation({
    mutationFn: callOpenAiFn,
  })

  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const [answer, setAnswer] = useState('')

  const handleChat: MouseEventHandler<HTMLButtonElement> = async (e) => {
    e.preventDefault()
    if (textareaRef.current === null) {
      return
    }
    const message = textareaRef.current.value
    const response = await chat.mutateAsync(message)
    setAnswer(response)
  }

  return (
    <>
      <textarea ref={textareaRef} placeholder='入力メッセージ' />
      <button onClick={handleChat}>send</button>
      <div>{answer}</div>
    </>
  )
}