# VercelでOpenAI APIを呼び出すChatアプリの作り方

## 目次
1. はじめに
2. 必要な環境とツール
3. プロジェクトのセットアップ
4. OpenAI APIの設定
5. チャットアプリの構築
6. Vercelを使用したデプロイ
7. まとめ

## 1. はじめに
このガイドでは、VercelでOpenAI APIを利用して、シンプルなチャットアプリを構築し、デプロイする方法を紹介します。Vercelのフレームワークを使用することで、迅速にデプロイ可能な環境を整備し、手軽にAPIを活用したアプリケーション開発を進めることができます。

## 2. 必要な環境とツール
本プロジェクトを開始するにあたって、以下のツールおよびアカウントを準備してください。

- Node.js: 最新のLTSバージョン
- Vercelアカウント
- OpenAIアカウントとAPIキー
- GitHubアカウント

次に、プロジェクトのセットアップを行います。

## 3. プロジェクトのセットアップ
プロジェクトのディレクトリを作成し、Node.jsのプロジェクトを初期化します。

![img](/mosaic-code.jpg)

次にReactアプリケーションとしてセットアップします。

![img](/mosaic-code.jpg)

このコマンドで、基本的なReactプロジェクトが作成されます。

## 4. OpenAI APIの設定
次に、OpenAI APIを利用するため、APIキーを取得し、環境変数として設定します。OpenAIの公式サイトでアカウントを作成し、APIキーを取得してください。

プロジェクトのルートに`.env.local`というファイルを作成し、以下のようにAPIキーを記述します。

![img](/mosaic-code.jpg)

## 5. チャットアプリの構築
### 5-1. 基本的なUIの作成

まずはシンプルなチャットUIを作成します。`client/src/App.js`を以下のように編集しましょう。

![img](/mosaic-code.jpg)

### 5-2. OpenAI APIとの連携

APIとの連携部分を作成します。プロジェクトのルートに`api/openai/chat.js`を作成し、以下のように実装します。

![img](/mosaic-code.jpg)

## 6. Vercelを使用したデプロイ
最後に、Vercelを使用してプロジェクトをデプロイしましょう。

1. プロジェクトのリポジトリを作成し、GitHubにアップロードします。
2. Vercelにログイン後、新規プロジェクトを作成し、GitHubからリポジトリをインポートします。
3. 環境変数として、先に用意したOpenAI APIのキー`REACT_APP_OPENAI_API_KEY`を設定します。
4. デプロイを実行し、数分後には公開されたURLからチャットアプリへアクセスできるようになります。

## 7. まとめ
Vercelを活用することで、OpenAI APIを利用したチャットアプリを迅速に開発しデプロイできることが確認できました。このガイドにより、OpenAIのAPIとVercelの強力な連携を体験し、さらなる開発へとステップアップする足掛かりになれば幸いです。今後は、UIの改善や、より高度な機能を実装するなど、アプリケーションのさらなる発展にチャレンジしてみてください。 [cv:issue_marketplace_engineer]

# VercelでOpenAI APIを呼び出すChatアプリの作り方

## 目次
1. はじめに
2. 必要な環境とツール
3. プロジェクトのセットアップ
4. OpenAI APIの設定
5. チャットアプリの構築
6. Vercelを使用したデプロイ
7. まとめ

## 1. はじめに
このガイドでは、VercelでOpenAI APIを利用して、シンプルなチャットアプリを構築し、デプロイする方法を紹介します。Vercelのフレームワークを使用することで、迅速にデプロイ可能な環境を整備し、手軽にAPIを活用したアプリケーション開発を進めることができます。

## 2. 必要な環境とツール
本プロジェクトを開始するにあたって、以下のツールおよびアカウントを準備してください。

- Node.js: 最新のLTSバージョン
- Vercelアカウント
- OpenAIアカウントとAPIキー
- GitHubアカウント

次に、プロジェクトのセットアップを行います。

## 3. プロジェクトのセットアップ
プロジェクトのディレクトリを作成し、Node.jsのプロジェクトを初期化します。

```bash
mkdir openai-chat-app
cd openai-chat-app
npm init -y
```

次にReactアプリケーションとしてセットアップします。

```bash
npx create-react-app client
```

このコマンドで、基本的なReactプロジェクトが作成されます。

## 4. OpenAI APIの設定
次に、OpenAI APIを利用するため、APIキーを取得し、環境変数として設定します。OpenAIの公式サイトでアカウントを作成し、APIキーを取得してください。

プロジェクトのルートに`.env.local`というファイルを作成し、以下のようにAPIキーを記述します。

```
REACT_APP_OPENAI_API_KEY=your_openai_api_key
```

## 5. チャットアプリの構築
### 5-1. 基本的なUIの作成

まずはシンプルなチャットUIを作成します。`client/src/App.js`を以下のように編集しましょう。

```javascript
import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState('');
  const [chatHistory, setChatHistory] = useState([]);

  const sendMessage = async (event) => {
    event.preventDefault();

    if (message.trim() === '') return;

    const newUserMessage = { type: 'user', text: message };
    setChatHistory([...chatHistory, newUserMessage]);

    const response = await callOpenAIAPI(message);
    const newBotMessage = { type: 'bot', text: response };

    setChatHistory((prev) => [...prev, newBotMessage]);
    setMessage('');
  };

  const callOpenAIAPI = async (userMessage) => {
    try {
      const response = await fetch('/api/openai/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: userMessage }),
      });
      const data = await response.json();
      return data.response;
    } catch (error) {
      console.error('Error calling OpenAI API:', error);
      return 'Error fetching response. Please try again.';
    }
  };

  return (
    <div>
      <h1>OpenAI Chatbot</h1>
      <div className="chat-history">
        {chatHistory.map((entry, index) => (
          <div key={index} className={`chat-entry ${entry.type}`}>
            <span>{entry.text}</span>
          </div>
        ))}
      </div>
      <form onSubmit={sendMessage}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

export default App;
```

### 5-2. OpenAI APIとの連携

APIとの連携部分を作成します。プロジェクトのルートに`api/openai/chat.js`を作成し、以下のように実装します。

```javascript
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(404).send({ message: 'Not found' });
  }

  const { message } = req.body;

  try {
    const response = await axios({
      url: 'https://api.openai.com/v1/engines/davinci-codex/completions',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      },
      data: {
        prompt: message,
        max_tokens: 50,
      },
    });

    res.status(200).json({ response: response.data.choices[0].text });
  } catch (error) {
    console.error('OpenAI API Error:', error);
    res.status(500).json({ error: 'Error generating response' });
  }
}
```

## 6. Vercelを使用したデプロイ
最後に、Vercelを使用してプロジェクトをデプロイしましょう。

1. プロジェクトのリポジトリを作成し、GitHubにアップロードします。
2. Vercelにログイン後、新規プロジェクトを作成し、GitHubからリポジトリをインポートします。
3. 環境変数として、先に用意したOpenAI APIのキー`REACT_APP_OPENAI_API_KEY`を設定します。
4. デプロイを実行し、数分後には公開されたURLからチャットアプリへアクセスできるようになります。

## 7. まとめ
Vercelを活用することで、OpenAI APIを利用したチャットアプリを迅速に開発しデプロイできることが確認できました。このガイドにより、OpenAIのAPIとVercelの強力な連携を体験し、さらなる開発へとステップアップする足掛かりになれば幸いです。今後は、UIの改善や、より高度な機能を実装するなど、アプリケーションのさらなる発展にチャレンジしてみてください。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

VercelでOpenAI APIを呼び出すChatアプリの作り方

目次

1. はじめに

続きを読むには単価診断を受けてください（30秒）