【AI開発】AIに聞いて開発してみる企画

2025年2月3日

AIチャットボット開発 - プロ視点の完全ガイド

本ガイドは、コストを最小限に抑えつつ、プロレベルのAIチャットボットを開発するための詳細なロードマップです。
MVP（最小限の機能）を短期間で構築し、実運用へとスムーズに移行すること を目標とします。

1. 開発全体の構成

項目	技術/ツール	目的
フロントエンド	React（Vite）	チャットUIの構築
バックエンド	Node.js（Express）	APIサーバーの構築
AIエンジン	OpenAI API（GPT-4）	AIによる応答生成
データ管理	SQLite/PostgreSQL	FAQデータ、ログ管理
デプロイ	Vercel（FE）、Heroku（BE）	無料枠を活用し運用コストを削減
バージョン管理	GitHub	コード管理とCI/CD

2. 開発環境の準備

① 必須ツールのインストール

VS Code（エディタ）
Node.js & npm（バックエンド開発）
Git（バージョン管理）
Postman（APIテスト）

3. バックエンド（APIサーバー）構築

① プロジェクト作成

② 環境変数（APIキー設定）

.env ファイルを作成：

③ Express APIサーバーの実装

server.js を作成：

const express = require("express");
 const axios = require("axios");
 const cors = require("cors");
 require("dotenv").config();
const app = express();
 app.use(express.json());
 app.use(cors());
const port = process.env.PORT || 3000;
app.post("/api/chat", async (req, res) => {
 const { message } = req.body;
 try {
 const response = await axios.post(
 "https://api.openai.com/v1/chat/completions",
 {
 model: "gpt-4",
 messages: [{ role: "user", content: message }],
 max_tokens: 1000,
 },
 {
 headers: {
 Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
 "Content-Type": "application/json",
 },
 }
 );
 res.json({ reply: response.data.choices[0].message.content });
 } catch (error) {
 console.error("Error:", error.message);
 res.status(500).json({ error: "Failed to fetch response" });
 }
 });

app.listen(port, () => { console.log(`Server running at http://localhost:${port}`); });

④ APIサーバー起動 & テスト

Postman で http://localhost:3000/api/chat に POST リクエストを送信し、AI応答を確認。

4. フロントエンド（React）構築

① React プロジェクト作成

② チャットUIの作成

src/App.jsx を以下の内容に変更：

import { useState } from "react";
 import axios from "axios";
function App() {
 const [message, setMessage] = useState("");
 const [response, setResponse] = useState("");
 const handleSendMessage = async () => {
 try {
 const res = await axios.post("http://localhost:3000/api/chat", { message });
 setResponse(res.data.reply);
 } catch (error) {
 console.error("Error sending message:", error);
 setResponse("Failed to get response");
 }
 };
 return (
 <div>
 <h1>AI Chatbot</h1>
 <div>
 <input
 type="text"
 value={message}
 placeholder="Ask something..."
 onChange={(e) => setMessage(e.target.value)}
 />
 <button onClick={handleSendMessage}>Send</button>
 </div>
 <div>
 <strong>AI:</strong> {response}
 </div>
 </div>
 );
 }

export default App;

③ フロントエンドの実行

ブラウザで http://localhost:5173 にアクセスし、チャットボットが動作することを確認。

5. デプロイ（無料枠活用）

① バックエンド（Heroku）

環境変数の設定：

② フロントエンド（Vercel）

デプロイ完了後、VercelのURLにアクセスして動作確認！

6. コスト試算

項目	コスト
OpenAI API	月1,000円～10,000円（従量課金）
サーバー	無料（Heroku/Vercelの無料枠）
ドメイン	0円（無料サブドメイン利用）
開発ツール	0円
合計	月1万円以内で運用可能