คุณสามารถใช้โฟลว์ Firebase Genkit เป็นการดำเนินการของเซิร์ฟเวอร์ในแอป Next.js ได้ ส่วนที่เหลือของหน้านี้จะแสดงวิธีการ
ข้อกำหนด
Node.js 20 ขึ้นไป
ขั้นตอน
ติดตั้ง Genkit CLI โดยเรียกใช้คำสั่งต่อไปนี้
npm i -g genkit
หากคุณยังไม่มีแอป Next.js ที่ต้องการใช้ ให้สร้างขึ้นใหม่
npx create-next-app@latest
เลือก TypeScript เป็นภาษาที่คุณต้องการ
เริ่มต้น Genkit ในโปรเจ็กต์ Next.js ด้วยคำสั่งต่อไปนี้
cd your-nextjs-project
genkit init
- เลือก Next.js เป็นแพลตฟอร์มการติดตั้งใช้งาน
- เลือกผู้ให้บริการโมเดลที่ต้องการใช้
ยอมรับค่าเริ่มต้นของข้อความแจ้งที่เหลือ เครื่องมือ
genkit
จะสร้างตัวอย่างไฟล์ต้นฉบับบางส่วนเพื่อช่วยให้คุณเริ่มต้นพัฒนาขั้นตอน AI ของคุณเองทำให้ข้อมูลเข้าสู่ระบบ API พร้อมใช้งานสำหรับฟังก์ชันที่ทำให้ใช้งานได้แล้ว เลือกทำอย่างใดอย่างหนึ่งต่อไปนี้ ทั้งนี้ขึ้นอยู่กับผู้ให้บริการโมเดลที่คุณเลือก
Gemini (AI ของ Google)
ตรวจสอบว่า AI ของ Google พร้อมให้บริการในภูมิภาคของคุณ
สร้างคีย์ API สำหรับ Gemini API โดยใช้ Google AI Studio
หากต้องการเรียกใช้โฟลว์ในเครื่อง ในขั้นตอนถัดไป ให้ตั้งค่าตัวแปรสภาพแวดล้อม
GOOGLE_GENAI_API_KEY
เป็นคีย์ของคุณ ดังนี้export GOOGLE_GENAI_API_KEY=<your API key>
เมื่อทำให้แอปใช้งานได้ คุณจะต้องทำให้คีย์นี้ใช้งานได้ในสภาพแวดล้อมที่ทำให้ใช้งานได้ ขั้นตอนที่แน่นอนจะขึ้นอยู่กับแพลตฟอร์ม
Gemini (Vertex AI)
ใน Cloud Console ให้เปิดใช้ Vertex AI API สำหรับโปรเจ็กต์ของคุณ
หากต้องการเรียกใช้โฟลว์ภายใน ขั้นตอนถัดไป ให้ตั้งค่าตัวแปรสภาพแวดล้อมเพิ่มเติมและใช้เครื่องมือ
gcloud
เพื่อตั้งค่าข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน ดังนี้export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login
เมื่อทำให้แอปใช้งานได้ คุณจะต้องทำสิ่งต่อไปนี้
ตั้งค่าตัวแปร
GCLOUD_PROJECT
และGCLOUD_LOCATION
ในสภาพแวดล้อมที่ทำให้ใช้งานได้ ขั้นตอนทั้งหมดจะขึ้นอยู่กับแพลตฟอร์มหากไม่ได้ทำให้ใช้งานได้กับสภาพแวดล้อม Firebase หรือ Google Cloud ให้ตั้งค่าการให้สิทธิ์สำหรับ Vertex AI API โดยใช้ Workload Identity Federation (แนะนำ) หรือคีย์บัญชีบริการ
ในหน้า IAM ของคอนโซล Google Cloud ให้มอบบทบาทผู้ใช้ Vertex AI (
roles/aiplatform.user
) ให้กับข้อมูลประจำตัวที่คุณใช้เรียก Vertex AI API- ใน Cloud Functions และ Cloud Run นี่คือบัญชีบริการประมวลผลเริ่มต้น
- ใน Firebase App Hosting จะเป็นบัญชีบริการแบ็กเอนด์ของแอป
- ส่วนในแพลตฟอร์มอื่นๆ จะเป็นข้อมูลระบุตัวตนที่คุณตั้งค่าไว้ในขั้นตอนก่อนหน้า
ข้อมูลลับเดียวที่คุณต้องตั้งค่าสำหรับบทแนะนำนี้คือสำหรับผู้ให้บริการโมเดล แต่โดยทั่วไปแล้ว คุณต้องทำสิ่งที่คล้ายกันสำหรับแต่ละบริการที่โฟลว์ใช้
หากคุณอนุญาตให้คำสั่ง
genkit init
สร้างโฟลว์ตัวอย่าง ไฟล์ดังกล่าวจะสร้างไฟล์genkit.ts
ซึ่งมีโฟลว์ Genkit ที่คุณใช้เป็นการดำเนินการของเซิร์ฟเวอร์ได้ โปรดลองคำเหล่านี้ก่อนอื่น ให้ทำการเปลี่ยนแปลงเล็กน้อยในฟังก์ชัน
callMenuSuggestionFlow
ดังนี้export async function callMenuSuggestionFlow(theme: string) { const flowResponse = await runFlow(menuSuggestionFlow, theme); console.log(flowResponse); return flowResponse; }
คุณสามารถเข้าถึงฟังก์ชันนี้เป็นการทำงานของเซิร์ฟเวอร์ ดูตัวอย่างง่ายๆ ด้วยการแทนที่เนื้อหาของ
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> ); }
ใช้ในสภาพแวดล้อมการพัฒนา Next.js ได้ด้วยคำสั่งต่อไปนี้
npm run dev
นอกจากนี้คุณยังเรียกใช้และสำรวจกระบวนการต่างๆ ใน UI ของนักพัฒนาซอฟต์แวร์ Genkit ได้ด้วย โดยทำดังนี้
genkit start