Firebase Genkit ในแอป Next.js

คุณใช้ขั้นตอน Firebase Genkit เป็นการดำเนินการของเซิร์ฟเวอร์ในแอป Next.js ได้ เนื้อหาที่เหลือของหน้านี้จะแสดงวิธีการ

ข้อกำหนด

Node.js 20 ขึ้นไป

ขั้นตอน

1. ติดตั้ง Genkit CLI โดยเรียกใช้คำสั่งต่อไปนี้:

   npm i -g genkit
   

2. หากคุณยังไม่มีแอป Next.js ที่ต้องการใช้ ให้สร้างแอปดังต่อไปนี้

   npx create-next-app@latest
   

   เลือก TypeScript เป็นภาษาที่คุณต้องการ

3. เริ่มต้น Genkit ในโปรเจ็กต์ Next.js

   cd your-nextjs-project
   genkit init
   

   • ยืนยัน yes เมื่อมีข้อความแจ้งว่าจะกำหนดค่า Genkit สำหรับ Next.js โดยอัตโนมัติหรือไม่
   • เลือกผู้ให้บริการโมเดลที่ต้องการใช้

   ยอมรับค่าเริ่มต้นสำหรับข้อความแจ้งที่เหลือ เครื่องมือ genkit จะสร้าง ตัวอย่างไฟล์ต้นฉบับที่จะช่วยให้คุณเริ่มพัฒนาขั้นตอน AI ของคุณเอง

4. ทำให้ข้อมูลเข้าสู่ระบบ API พร้อมใช้งานสำหรับฟังก์ชันที่ทำให้ใช้งานได้ ทำอย่างใดอย่างหนึ่งต่อไปนี้ ดังต่อไปนี้ ขึ้นอยู่กับผู้ให้บริการโมเดลที่คุณเลือก

   Gemini (AI ของ Google)

   1. ตรวจสอบว่า AI ของ Google พร้อมให้บริการในภูมิภาคของคุณ

   2. สร้างคีย์ API สำหรับ Gemini API ที่ใช้ Google AI Studio

   3. เพื่อเรียกใช้ขั้นตอนในเครื่อง เช่น ตั้งค่าตัวแปรสภาพแวดล้อม GOOGLE_GENAI_API_KEY เป็นคีย์ของคุณ

      export GOOGLE_GENAI_API_KEY=<your API key>
      

      เมื่อทำให้แอ��ใช้งานได้ คุณจะต้องทำให้คีย์นี้พร้อมใช้งานใน กับสภาพแวดล้อมที่ทำให้ระบบใช้งานได้ ขั้นตอนทั้งหมดจะขึ้นอยู่กับแพลตฟอร์ม

   Gemini (Vertex AI)

   1. ใน Cloud Console เปิดใช้ Vertex AI API สำหรับโปรเจ็กต์ของคุณ

   2. เพื่อเรียกใช้ขั้นตอนในเครื่อง เช่น ตั้งค่าตัวแปรสภาพแวดล้อมเพิ่มเติมและใช้ เครื่องมือ gcloud สำหรับตั้งค่า ข้อมูลประจำตัวเริ่มต้นของแอปพลิเคชัน:

      export GCLOUD_PROJECT=<your project ID>
      export GCLOUD_LOCATION=us-central1
      gcloud auth application-default login
      

   3. เมื่อทำให้แอปใช้งานได้ คุณจะต้องดำเนินการต่อไปนี้

      1. ตั้งค่าตัวแปร GCLOUD_PROJECT และ GCLOUD_LOCATION ในฟังก์ชัน สภาพแวดล้อมที่ทำให้ใช้งานได้ ซึ่งขั้นตอนที่แน่นอนจะขึ้นอยู่กับแพลตฟอร์ม

      2. หากคุณไม่ได้ทำให้ใช้งานได้ในสภาพแวดล้อม Firebase หรือ Google Cloud ตั้งค่าการให้สิทธิ์สำหรับ Vertex AI API โดยใช้ การรวมศูนย์ Workload Identity (แนะนำ) หรือคีย์บัญชีบริการ

      3. ใน IAM ของคอนโซล Google Cloud ให้มอบผู้ใช้ Vertex AI (roles/aiplatform.user) เป็นข้อมูลประจำตัวที่คุณใช้ในการเรียก Vertex AI API

         • ใน Cloud Functions และ Cloud Run พารามิเตอร์ บัญชีบริการเริ่มต้นของ Compute
         • ใน Firebase App Hosting จะเป็น บัญชีบริการแบ็กเอนด์
         • ส่วนในแพลตฟอร์มอื่นๆ นี่คือข้อมูลประจำตัวที่คุณตั้งค่าไว้ก่อนหน้านี้ ครั้งแรก

   ข้อมูลลับเดียวที่คุณต้องตั้งค่าสำหรับบทแนะนำนี้คือสำหรับโมเดล แต่โดยทั่วไป คุณจะต้องดำเนินการที่คล้ายกันนี้สำหรับแต่ละบริการ ที่คุณใช้

5. หากคุณอนุญาตให้คำสั่ง genkit init สร้างขั้นตอนตัวอย่าง สร้างไฟล์ genkit.ts ซึ่งมีขั้นตอน Genkit ที่คุณใช้เป็นเซิร์ฟเวอร์ได้ การดำเนินการ โปรดลองคำเหล่านี้

   1. ก่อนอื่นให้ทำการเปลี่ยนแปล��เล็กน้อยกับฟังก์ชัน callMenuSuggestionFlow:

      export async function callMenuSuggestionFlow(theme: string) {
        const flowResponse = await runFlow(menuSuggestionFlow, theme);
        console.log(flowResponse);
        return flowResponse;
      }
      

   2. คุณจะเข้าถึงฟังก์ชันนี้ได้ด้วยการดำเนินการของเซิร์ฟเวอร์ ตัวอย่างง่ายๆ ก็คือ แทนที่เนื้อหาของ page.tsx ด้วยข้อมูลต่อไปนี้

      'use client';
      
      import { callMenuSuggestionFlow } from '@/app/genkit';
      import { useState } from 'react';
      
      export default function Home() {
        const [menuItem, setMenu] = useState<string>('');
      
        async function getMenuItem(formData: FormData) {
          const theme = formData.get('theme')?.toString() ?? '';
          const suggestion = await callMenuSuggestionFlow(theme);
          setMenu(suggestion);
        }
      
        return (
          <main>
            <form action={getMenuItem}>
              <label>
                Suggest a menu item for a restaurant with this theme:{' '}
              </label>
              <input type="text" name="theme" />
              <button type="submit">Generate</button>
            </form>
            <br />
            <pre>{menuItem}</pre>
          </main>
        );
      }
      

   3. เรียกใช้ในสภาพแวดล้อมการพัฒนา Next.js ด้วยคำสั่งต่อไปนี้

      npm run dev
      

6. นอกจากนี้ คุณยังเรียกใช้และสำรวจขั้นตอนใน UI สำหรับนักพัฒนาซอฟต์แวร์ Genkit ได้โดยทำดังนี้

   genkit start