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
   

   • เลือก 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. เปิดใช้ Vertex AI API สำหรับโปรเจ็กต์ของคุณในคอนโซล Cloud

   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 Federation (แนะนำ) หรือคีย์บัญชีบริการ

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

         • ใน Cloud Functions และ Cloud Run จะเรียกว่าบัญชีบริการการประมวลผลเริ่มต้น
         • ใน 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