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. ใน 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 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