【Next.js×AI】キャラクター設定自動生成ツールの開発実践

1. 技術スタック

技術要素	バージョン	採用理由
Next.js	14.1.0	API RoutesとSSRの統合環境
Tailwind CSS	3.3.3	迅速なUI開発
OpenAI API	GPT-3.5 Turbo	自然なテキスト生成

2. コア実装

2.1 APIルート実装

// pages/api/generate.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_KEY,
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { traits, genre } = req.body;
  
  const prompt = `
    ${traits.join(",")}の特徴を持つ${genre}キャラクター設定を生成:
    ・幼少期の出来事
    ・秘密の動機
    ・口癖
  `;

  const response = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: prompt }]
  });

  res.status(200).json(response.choices[0].message.content);
}

2.2 フロントエンド実装

// components/Generator.js
import { useState } from 'react';

export default function Generator() {
  const [traits, setTraits] = useState('');
  const [result, setResult] = useState('');

  const generate = async () => {
    const res = await fetch('/api/generate', {
      method: 'POST',
      body: JSON.stringify({
        traits: traits.split(','),
        genre: 'fantasy'
      })
    });
    setResult(await res.json());
  };

  return (
    <div>
      <input 
        value={traits}
        onChange={(e) => setTraits(e.target.value)}
        placeholder="特徴をカンマ区切りで入力"
      />
      <button onClick={generate}>生成</button>
      {result && <pre>{result}</pre>}
    </div>
  );
}

3. 導入事例

某インディーゲームスタジオの効果:

指標 改善前 改善後
生産性 3体/日 8体/日
多様性 62% 28%
参考:
character headcanon generatorの生成ロジックを一部活用

4. 今後の課題

日本語生成精度の向上

Stable Diffusion連携によるキャラ画像生成

チーム協働編集機能