AWSでRAGを構築しよう！Amazon BedrockとS3で作るオリジナル知識チャットボット

[ユーザー] → [Next.js フロントエンド]
                      ↓
            [API Route（Node.js）]
                      ↓
        [Amazon Bedrock Knowledge Bases]
          ↙                        ↘
[Amazon OpenSearch Serverless]   [Amazon S3]
  （ベクトルDB）               （ドキュメント保管）
                      ↓
              [Claude 3 Sonnet]
                      ↓
              [回答をユーザーへ]

aws s3 cp ./documents/ s3://my-rag-documents-XXXX/ --recursive

npx create-next-app@latest rag-chatbot --typescript --tailwind --app
cd rag-chatbot
npm install @aws-sdk/client-bedrock-agent-runtime

AWS_REGION=ap-northeast-1
AWS_ACCESS_KEY_ID=your_access_key
AWS_SECRET_ACCESS_KEY=your_secret_key
BEDROCK_KNOWLEDGE_BASE_ID=XXXXXXXXXX
BEDROCK_MODEL_ARN=arn:aws:bedrock:ap-northeast-1::foundation-model/anthropic.claude-3-sonnet-20240229-v1:0

import { NextRequest, NextResponse } from "next/server";
import {
  BedrockAgentRuntimeClient,
  RetrieveAndGenerateCommand,
} from "@aws-sdk/client-bedrock-agent-runtime";

const client = new BedrockAgentRuntimeClient({
  region: process.env.AWS_REGION!,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  },
});

export async function POST(req: NextRequest) {
  const { message, sessionId } = await req.json();

  if (!message) {
    return NextResponse.json({ error: "メッセージが必要です" }, { status: 400 });
  }

  const command = new RetrieveAndGenerateCommand({
    input: { text: message },
    retrieveAndGenerateConfiguration: {
      type: "KNOWLEDGE_BASE",
      knowledgeBaseConfiguration: {
        knowledgeBaseId: process.env.BEDROCK_KNOWLEDGE_BASE_ID!,
        modelArn: process.env.BEDROCK_MODEL_ARN!,
        retrievalConfiguration: {
          vectorSearchConfiguration: {
            numberOfResults: 5,
          },
        },
        generationConfiguration: {
          promptTemplate: {
            textPromptTemplate:
              "あなたは親切なアシスタントです。以下の情報を参考に、日本語で回答してください。\n\n$search_results$\n\n質問：$query$",
          },
        },
      },
    },
    sessionId: sessionId || undefined,
  });

  const response = await client.send(command);

  const answer = response.output?.text ?? "回答を生成できませんでした。";
  const citations = response.citations?.map((c) =>
    c.retrievedReferences?.map((r) => r.location?.s3Location?.uri)
  ).flat().filter(Boolean);

  return NextResponse.json({
    answer,
    citations,
    sessionId: response.sessionId,
  });
}

"use client";
import { useState, useRef } from "react";

type Message = {
  role: "user" | "assistant";
  content: string;
  citations?: string[];
};

export default function ChatPage() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const sessionIdRef = useRef<string | null>(null);

  const sendMessage = async () => {
    if (!input.trim() || loading) return;
    const userMessage = input;
    setInput("");
    setMessages((prev) => [...prev, { role: "user", content: userMessage }]);
    setLoading(true);

    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: userMessage, sessionId: sessionIdRef.current }),
    });
    const data = await res.json();
    sessionIdRef.current = data.sessionId;

    setMessages((prev) => [
      ...prev,
      { role: "assistant", content: data.answer, citations: data.citations },
    ]);
    setLoading(false);
  };

  return (
    <div className="max-w-2xl mx-auto p-4 h-screen flex flex-col">
      <h1 className="text-xl font-bold mb-4">RAGチャットボット</h1>
      <div className="flex-1 overflow-y-auto space-y-4 mb-4">
        {messages.map((m, i) => (
          <div key={i} className={m.role === "user" ? "text-right" : "text-left"}>
            <div className={
              m.role === "user"
                ? "inline-block bg-blue-500 text-white rounded-lg px-4 py-2"
                : "inline-block bg-gray-100 rounded-lg px-4 py-2"
            }>
              {m.content}
            </div>
            {m.citations && m.citations.length > 0 && (
              <div className="text-xs text-gray-400 mt-1">
                参照: {m.citations.join(", ")}
              </div>
            )}
          </div>
        ))}
        {loading && <div className="text-gray-400">回答を生成中...</div>}
      </div>
      <div className="flex gap-2">
        <input
          className="flex-1 border rounded-lg px-4 py-2"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
          placeholder="質問を入力..."
        />
        <button
          onClick={sendMessage}
          className="bg-blue-500 text-white px-4 py-2 rounded-lg"
        >
          送信
        </button>
      </div>
    </div>
  );
}

npm run dev

# CLIで同期を実行する場合
aws bedrock-agent start-ingestion-job \
  --knowledge-base-id XXXXXXXXXX \
  --data-source-id YYYYYYYYYY