Next.jsと生成AIでスコーンづくりの技能伝承システムはじめてみました

ベテラン: 「このバターは冷たいまま使うんだ。室温に戻すとダメ」
    ↓ Whisper APIでテキスト化
    ↓ GPTで構造化
ナレッジ: {
  category: "materials",
  topic: "バターの温度管理",
  content: "バターは冷蔵庫から出したての冷たい状態で使用する",
  tips: ["室温に戻すと生地がベタつく", "サクサク感が出なくなる"]
}

1. ブラウザでMediaRecorder APIを使って音声を録音
2. 録音完了後、音声BlobをFormDataに詰めてサーバーに送信
3. サーバーでWhisper APIを呼び出し
4. 変換されたテキストをクライアントに返却

1. WebRTC/WebSocketでOpenAIサーバーに接続
2. 音声ストリームをリアルタイムで送信
3. AIからの音声応答をリアルタイムで受信
4. 必要に応じてテキストも取得

app/
├── page.tsx              # / (ダッシュボード)
├── interview/
│   └── page.tsx          # /interview (インタビュー画面)
├── knowledge/
│   ├── page.tsx          # /knowledge (一覧)
│   └── [id]/
│       └── page.tsx      # /knowledge/[id] (詳細)
└── api/
    ├── chat/
    │   └── route.ts      # POST /api/chat
    ├── transcribe/
    │   └── route.ts      # POST /api/transcribe
    ├── extract/
    │   └── route.ts      # POST /api/extract
    ├── ask/
    │   └── route.ts      # POST /api/ask (ナレッジQ&A)
    └── knowledge/
        ├── route.ts      # GET/POST /api/knowledge
        └── [id]/
            └── route.ts  # GET/DELETE /api/knowledge/[id]

type KnowledgeCategory =
  | 'materials'      // 材料に関する知識
  | 'technique'      // 技法・手順
  | 'temperature'    // 温度・時間管理
  | 'troubleshooting'; // トラブル対応

interface Knowledge {
  id: string;
  createdAt: string;
  category: KnowledgeCategory;
  topic: string;      // タイトル
  content: string;    // 本文
  tips: string[];     // コツ・ポイント
  source: 'interview' | 'manual';
}

# プロジェクト作成
pnpm create next-app@latest scone-knowledge-transfer --yes

# 依存関係のインストール
cd scone-knowledge-transfer
pnpm add ai @ai-sdk/openai @ai-sdk/react openai lucide-react

# shadcn/uiの初期化
pnpm dlx shadcn@latest init --defaults

# 必要なコンポーネントの追加
pnpm dlx shadcn@latest add button card input textarea badge tabs scroll-area separator

// インタビュアーのシステムプロンプト
export const INTERVIEWER_SYSTEM_PROMPT = `あなたは伝統的なスコーン店のベテラン職人から技術やノウハウを引き出すインタビュアーです。

【あなたの役割】
- 職人の経験や知識を丁寧に聞き出す
- 具体的な数値や手順、コツを引き出す質問をする
- 暗黙知を言語化する手助けをする
- 相手の話を尊重し、深掘りする

【質問のポイント】
1. 材料の選び方や配合のコツ
2. 生地の扱い方、こね方、成形のポイント
3. オーブンの温度や焼き時間の見極め方
4. 失敗しやすいポイントとその対処法
5. 季節や湿度による調整方法

【会話のルール】
- 日本語で丁寧に対話する
- 一度に多くの質問をせず、一つずつ深掘りする
- 相手の回答を要約して確認する
- 「なぜ」「どのように」「どのくらい」を意識した質問をする`;

// ナレッジ抽出用プロンプト
export const KNOWLEDGE_EXTRACTION_PROMPT = `以下のインタビュー会話から、スコーン作りに関する具体的なナレッジを抽出してください。

【抽出するナレッジの形式】
{
  "category": "materials" | "technique" | "temperature" | "troubleshooting",
  "topic": "ナレッジのタイトル（20文字以内）",
  "content": "ナレッジの本文（100-200文字程度）",
  "tips": ["コツや注意点1", "コツや注意点2", ...]
}

【注意事項】
- 具体的な数値や手順が含まれているものを優先
- 抽象的な内容は避け、実践可能な知識のみを抽出
- 複数のナレッジがある場合は配列で出力`;

// ナレッジQ&A用プロンプト
export const KNOWLEDGE_QA_SYSTEM_PROMPT = `あなたはスコーン作りのベテラン職人の知識を学習したAIアシスタントです。
提供されたナレッジを元に、ユーザーからの質問に簡潔かつ的確に回答してください。

【回答のルール】
- ナレッジに基づいた回答を心がける
- 具体的な数値や手順がある場合は明示する
- ナレッジにない情報は「その情報についてはナレッジにありません」と回答`;

// ガイド付きモード用の初期質問候補
export const INITIAL_INTERVIEW_QUESTIONS = [
  { id: 'general', label: '全般', question: 'スコーン作りで最も大切にされていることは何でしょうか？' },
  { id: 'materials', label: '材料について', question: '材料の選び方でこだわりはありますか？...' },
  { id: 'technique', label: '技法について', question: '生地の扱い方で気をつけていることは？...' },
  // ... 他のカテゴリ
];

'use client';

import { useState, useRef, useCallback } from 'react';
import { Mic, Square, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface AudioRecorderProps {
  onTranscription: (text: string) => void;
  disabled?: boolean;
}

type RecordingState = 'idle' | 'recording' | 'processing';

export function AudioRecorder({ onTranscription, disabled }: AudioRecorderProps) {
  const [state, setState] = useState<RecordingState>('idle');
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const chunksRef = useRef<Blob[]>([]);

  const startRecording = useCallback(async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

    const mediaRecorder = new MediaRecorder(stream, {
      mimeType: 'audio/webm;codecs=opus',
    });

    mediaRecorderRef.current = mediaRecorder;
    chunksRef.current = [];

    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        chunksRef.current.push(event.data);
      }
    };

    mediaRecorder.onstop = async () => {
      setState('processing');
      stream.getTracks().forEach(track => track.stop());

      const audioBlob = new Blob(chunksRef.current, { type: 'audio/webm' });
      const formData = new FormData();
      formData.append('audio', audioBlob, 'recording.webm');

      const response = await fetch('/api/transcribe', {
        method: 'POST',
        body: formData,
      });

      const data = await response.json();
      onTranscription(data.text);
      setState('idle');
    };

    mediaRecorder.start();
    setState('recording');
  }, [onTranscription]);

  const stopRecording = useCallback(() => {
    if (mediaRecorderRef.current && state === 'recording') {
      mediaRecorderRef.current.stop();
    }
  }, [state]);

  return (
    <Button
      variant={state === 'recording' ? 'destructive' : 'outline'}
      size="icon"
      onClick={state === 'recording' ? stopRecording : startRecording}
      disabled={disabled || state === 'processing'}
    >
      {state === 'idle' && <Mic className="h-4 w-4" />}
      {state === 'recording' && <Square className="h-4 w-4" />}
      {state === 'processing' && <Loader2 className="h-4 w-4 animate-spin" />}
    </Button>
  );
}

import { NextResponse } from 'next/server';
import OpenAI from 'openai';

export const runtime = 'nodejs';
export const maxDuration = 60;

let openai: OpenAI | null = null;
function getOpenAI() {
  if (!openai) {
    openai = new OpenAI();
  }
  return openai;
}

export async function POST(req: Request) {
  const formData = await req.formData();
  const audioFile = formData.get('audio') as File;

  if (!audioFile) {
    return NextResponse.json(
      { error: '音声ファイルが見つかりません' },
      { status: 400 }
    );
  }

  const transcription = await getOpenAI().audio.transcriptions.create({
    file: audioFile,
    model: 'whisper-1',
    language: 'ja',
    response_format: 'verbose_json',
  });

  return NextResponse.json({
    text: transcription.text,
    duration: transcription.duration,
    language: transcription.language,
  });
}

import { streamText, convertToModelMessages, type UIMessage } from 'ai';
import { openai } from '@ai-sdk/openai';
import { INTERVIEWER_SYSTEM_PROMPT } from '@/lib/prompts';

export const runtime = 'nodejs';
export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    system: INTERVIEWER_SYSTEM_PROMPT,
    messages: await convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

'use client';

import { useRef, useEffect, useState } from 'react';
import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { Send, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { ScrollArea } from '@/components/ui/scroll-area';
import { AudioRecorder } from './audio-recorder';

export function ChatInterface({ onMessagesChange }) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [input, setInput] = useState('');

  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat',
    }),
  });

  const isLoading = status === 'streaming' || status === 'submitted';

  // 新しいメッセージが追加されたらスクロール
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSend = async () => {
    if (!input.trim() || isLoading) return;

    const message = input.trim();
    setInput('');

    sendMessage({
      parts: [{ type: 'text', text: message }],
    });
  };

  const getMessageText = (message) => {
    return message.parts
      ?.filter(part => part.type === 'text')
      .map(part => part.text)
      .join('') || '';
  };

  return (
    <div className="flex flex-col h-full">
      <ScrollArea className="flex-1" ref={scrollRef}>
        {messages.map((message) => (
          <div
            key={message.id}
            className={message.role === 'user' ? 'text-right' : 'text-left'}
          >
            <div className={message.role === 'user' ? 'bg-primary' : 'bg-muted'}>
              {getMessageText(message)}
            </div>
          </div>
        ))}
      </ScrollArea>

      <div className="flex gap-2">
        <Textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="メッセージを入力..."
        />
        <AudioRecorder onTranscription={setInput} />
        <Button onClick={handleSend} disabled={!input.trim() || isLoading}>
          <Send className="h-4 w-4" />
        </Button>
      </div>
    </div>
  );
}

import { NextResponse } from 'next/server';
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { KNOWLEDGE_EXTRACTION_PROMPT } from '@/lib/prompts';

export async function POST(req: Request) {
  const { messages } = await req.json();

  // メッセージを会話形式のテキストに変換
  const conversationText = messages
    .map((msg) =>
      `${msg.role === 'user' ? '職人' : 'インタビュアー'}: ${msg.content}`
    )
    .join('\n\n');

  // ナレッジを抽出
  const { text } = await generateText({
    model: openai('gpt-4o'),
    prompt: KNOWLEDGE_EXTRACTION_PROMPT + conversationText,
  });

  // JSONをパース
  const jsonMatch = text.match(/\{[\s\S]*\}/);
  const result = jsonMatch ? JSON.parse(jsonMatch[0]) : { knowledge: [] };

  return NextResponse.json({
    knowledge: result.knowledge || [],
  });
}

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { KNOWLEDGE_QA_SYSTEM_PROMPT } from '@/lib/prompts';
import { getAllKnowledge } from '@/lib/storage';

export const runtime = 'nodejs';
export const maxDuration = 30;

export async function POST(req: Request) {
  const { question } = await req.json();

  if (!question) {
    return new Response(
      JSON.stringify({ error: '質問が必要です' }),
      { status: 400 }
    );
  }

  // 蓄積されたナレッジを取得
  const knowledgeList = await getAllKnowledge();

  // ナレッジをコンテキストとして整形
  const knowledgeContext = knowledgeList
    .map((k) => `【${k.topic}】\n${k.content}\nポイント: ${k.tips?.join(', ')}`)
    .join('\n\n---\n\n');

  const prompt = `
以下のナレッジを参考に、質問に回答してください。

--- ナレッジ ---
${knowledgeContext}
---

質問: ${question}
`;

  const result = streamText({
    model: openai('gpt-4o'),
    system: KNOWLEDGE_QA_SYSTEM_PROMPT,
    prompt: prompt,
  });

  return result.toTextStreamResponse();
}

import { promises as fs } from 'fs';
import path from 'path';
import type { Knowledge } from './types';

const DATA_DIR = path.join(process.cwd(), 'data');
const KNOWLEDGE_FILE = path.join(DATA_DIR, 'knowledge.json');

// データファイルの初期化
async function ensureDataFile(): Promise<void> {
  try {
    await fs.access(DATA_DIR);
  } catch {
    await fs.mkdir(DATA_DIR, { recursive: true });
  }

  try {
    await fs.access(KNOWLEDGE_FILE);
  } catch {
    await fs.writeFile(KNOWLEDGE_FILE, JSON.stringify({ items: [] }, null, 2));
  }
}

// 全ナレッジの取得
export async function getAllKnowledge(): Promise<Knowledge[]> {
  await ensureDataFile();
  const data = await fs.readFile(KNOWLEDGE_FILE, 'utf-8');
  return JSON.parse(data).items;
}

// ナレッジの保存
export async function saveKnowledge(
  knowledge: Omit<Knowledge, 'id' | 'createdAt'>
): Promise<Knowledge> {
  await ensureDataFile();

  const allItems = await getAllKnowledge();

  const newKnowledge: Knowledge = {
    ...knowledge,
    id: `KN-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
    createdAt: new Date().toISOString(),
  };

  allItems.push(newKnowledge);

  await fs.writeFile(
    KNOWLEDGE_FILE,
    JSON.stringify({ items: allItems }, null, 2)
  );

  return newKnowledge;
}

// ナレッジ保存時にベクトル化
const embedding = await openai.embeddings.create({
  model: 'text-embedding-3-small',
  input: knowledge.content,
});

// ChromaDBに保存
await chromaCollection.add({
  ids: [knowledge.id],
  embeddings: [embedding.data[0].embedding],
  metadatas: [{ category: knowledge.category }],
  documents: [knowledge.content],
});

// 質問時に類似ナレッジを検索してRAGで回答
const relevantKnowledge = await chromaCollection.query({
  queryEmbeddings: [questionEmbedding],
  nResults: 5,
});