サーバーアクションに変更＆ドキュメントをAIに読ませる

app/[docs_id]/chatForm.tsx

@@ -1,12 +1,9 @@
 "use client";
 
 import { useState, FormEvent } from "react";
+import { askAI } from "@/app/actions/chatActions";
 
-interface ChatApiResponse {
-  response: string;
-}
-
-export function ChatForm() {
+export function ChatForm({ documentContent }: { documentContent: string }) {
   const [inputValue, setInputValue] = useState("");
   const [response, setResponse] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -17,96 +14,85 @@ export function ChatForm() {
     setIsLoading(true);
     setResponse("");
 
-    try {
-      const res = await fetch("/api/chat", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ message: inputValue }),
-      });
+    const result = await askAI({
+      userQuestion: inputValue,
+      documentContent: documentContent,
+    });
 
-      const data = (await res.json()) as ChatApiResponse;
-      if (!res.ok) {
-        throw new Error(data.response || "エラーが発生しました。");
-      }
-      setResponse(data.response);
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        setResponse(`エラー: ${error.message}`);
-      } else {
-        setResponse(`エラー: ${String(error)}`);
-      }
-    } finally {
-      setIsLoading(false);
+    if (result.error) {
+      setResponse(`エラー: ${result.error}`);
+    } else {
+      setResponse(result.response);
     }
+
+    setIsLoading(false);
   };
   return (
     <>
       {isFormVisible && (
       <form className="border border-2 border-primary shadow-xl p-6 rounded-lg bg-base-100" style={{width:"100%", textAlign:"center", boxShadow:"-moz-initial"}} onSubmit={handleSubmit}>
-        <h2 className="text-xl font-bold mb-4 text-left relative -top-2 font-mono h-2">
-          AIへ質問
-        </h2>
+          <h2 className="text-xl font-bold mb-4 text-left relative -top-2 font-mono h-2">
+            AIへ質問
+          </h2>
         <div className="input-area" style={{height:"80px"}}>
-          <textarea
-            className="textarea textarea-white textarea-md"
-            placeholder="質問を入力してください"
+            <textarea
+              className="textarea textarea-white textarea-md"
+              placeholder="質問を入力してください"
             style={{width: "100%", height: "110px", resize: "none"}}
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            disabled={isLoading}
-          ></textarea>
-        </div>
-        <br />
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              disabled={isLoading}
+            ></textarea>
+          </div>
+          <br />
         <div className="controls" style={{position:"relative", top:"22px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
-          <div className="left-icons">
-            <button 
-              className="btn btn-soft btn-secondary rounded-full"
-              onClick={() => setIsFormVisible(false)}
-            >
+            <div className="left-icons">
+              <button
+                className="btn btn-soft btn-secondary rounded-full"
+                onClick={() => setIsFormVisible(false)}
+              >
 
-              閉じる
-            </button>
-          </div>
-          <div className="right-controls">
-            <button
-              type="submit"
-              className="btn btn-soft btn-circle btn-primary rounded-full"
-              title="送信"
+                閉じる
+              </button>
+            </div>
+            <div className="right-controls">
+              <button
+                type="submit"
+                className="btn btn-soft btn-circle btn-primary rounded-full"
+                title="送信"
               style={{marginTop:"10px"}}
-              disabled={isLoading}
-            >
-              <span className="icon">➤</span>
-            </button>
+                disabled={isLoading}
+              >
+                <span className="icon">➤</span>
+              </button>
+            </div>
           </div>
-        </div>
-      </form>
+        </form>
       )}
       {!isFormVisible && (
-      <button 
-        className="btn btn-soft btn-secondary rounded-full"
-        onClick={() => setIsFormVisible(true)}
-      >
-        チャットを開く
-      </button>
+        <button
+          className="btn btn-soft btn-secondary rounded-full"
+          onClick={() => setIsFormVisible(true)}
+        >
+          チャットを開く
+        </button>
       )}
 
       {response && (
         <article>
           <h3 className="text-lg font-semibold mb-2">AIの回答</h3>
           <div className="chat chat-start">
             <div className="chat-bubble chat-bubble-primary">
-               <div className="response-container">{response}</div>
+              <div className="response-container">{response}</div>
             </div>
           </div>
         </article>
       )}
 
       {isLoading && (
-      <div className="mt-2 text-l text-gray-500 animate-pulse">
-        AIが考え中です…
-      </div>
+        <div className="mt-2 text-l text-gray-500 animate-pulse">
+          AIが考え中です…
+        </div>
       )}
 
     </>

app/[docs_id]/section.tsx

@@ -11,7 +11,7 @@ export function Section({ section }: { section: MarkdownSection }) {
     <div>
       <Heading level={section.level}>{section.title}</Heading>
       <StyledMarkdown content={section.content} />
-      <ChatForm />
+      <ChatForm documentContent={section.content} />
     </div>
   );
 }

app/actions/chatActions.ts

@@ -0,0 +1,45 @@
+'use server';
+
+import { GoogleGenerativeAI } from "@google/generative-ai";
+import { z } from "zod";
+
+interface FormState {
+  response: string;
+  error: string | null;
+}
+
+const ChatSchema = z.object({
+  userQuestion: z.string().min(1, { message: "メッセージを入力してください。" }),
+  documentContent: z.string().min(1, { message: "コンテキストとなるドキュメントがありません。"}),
+});
+
+const genAI = new GoogleGenerativeAI(process.env.API_KEY!);
+
+export async function askAI(params: unknown): Promise<FormState> {
+  const parseResult = ChatSchema.safeParse(params);
+
+  if (!parseResult.success) {
+    return {
+      response: "",
+      error: parseResult.error.issues.map((e) => e.message).join(", "),
+    };
+  }
+
+  const { userQuestion, documentContent } = parseResult.data;
+
+  try {
+    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+    const fullMessage = documentContent + "\n\n" + userQuestion;
+    const result = await model.generateContent(fullMessage);
+    const response = result.response;
+    const text = response.text();
+    return { response: text, error: null };
+  } catch (error: unknown) {
+    console.error("Error calling Generative AI:", error);
+    if (error instanceof Error) {
+      return { response: '', error: `AIへのリクエスト中にエラーが発生しました: ${error.message}` };
+    }
+    return { response: '', error: '予期せぬエラーが発生しました。' };
+  }
+}
+

package.json

@@ -21,7 +21,8 @@
     "react-dom": "19.1.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "zod": "^4.0.17"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",