ใช้ Genkit ในแอป Next.js

หน้านี้แสดงวิธีใช้โฟลว์ Genkit เป็นการดำเนินการของเซิร์ฟเวอร์ในแอป Next.js

ก่อนเริ่มต้น

คุณควรคุ้นเคยกับแนวคิดโฟลว์ของ Genkit และวิธีเขียนโฟลว์

สร้างโปรเจ็กต์ Next.js

หากยังไม่มีโปรเจ็กต์ Next.js ที่ต้องการเพิ่มฟีเจอร์ Generative AI ให้ คุณสามารถสร้างโปรเจ็กต์เพื่อติดตามหน้านี้ได้

npx create-next-app@latest

ติดตั้งการอ้างอิงของ Genkit

ติดตั้งการอ้างอิง Genkit ลงในแอป Next.js ในลักษณะเดียวกับที่คุณทำกับโปรเจ็กต์ Genkit

1. ติดตั้งไลบรารี Genkit หลัก

   npm i --save genkit

2. ติดตั้งปลั๊กอินโมเดลอย่างน้อย 1 รายการ

   เช่น หากต้องการใช้ AI ของ Google ให้ทำดังนี้

   npm i --save @genkit-ai/googleai

   หรือหากต้องการใช้ Vertex AI ให้ทำดังนี้

   npm i --save @genkit-ai/vertexai

3. หากไม่ได้ติดตั้ง Genkit CLI แบบทั่วระบบ คุณจะติดตั้งเป็นข้อกำหนดในการพัฒนาได้ เราขอแนะนําให้ใช้เครื่องมือ tsx ด้วย เนื่องจากทําให้การทดสอบโค้ดสะดวกขึ้น อย่างไรก็ตาม คุณจะติดตั้งข้อกำหนดเหล่านี้หรือไม่ก็ได้

   npm i --save-dev genkit-cli tsx

กำหนดโฟลว์ Genkit

สร้างไฟล์ใหม่ในโปรเจ็กต์ Next.js เพื่อเก็บโฟลว์ Genkit เช่น src/app/genkit.ts ไฟล์นี้อาจมีโฟลว์ของคุณได้โดยไม่ต้องแก้ไข แต่เนื่องจากคุณเรียกใช้โฟลว์ได้จากแบ็กเอนด์เซิร์ฟเวอร์เท่านั้น คุณจึงต้องเพิ่มคำสั่ง 'use server' ไว้ที่ด้านบนของไฟล์

เช่น

'use server';

import { gemini15Flash, googleAI } from "@genkit-ai/googleai";
import { genkit, z } from "genkit";

const ai = genkit({
  plugins: [googleAI()],
  model: gemini15Flash,
});

export const menuSuggestionFlow = ai.defineFlow(
  {
    name: "menuSuggestionFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (restaurantTheme) => {
    const { text } = await ai.generate({
      model: gemini15Flash,
      prompt: `Invent a menu item for a ${restaurantTheme} themed restaurant.`,
    });
    return text;
  }
);

เรียกใช้ Flow

ตอนนี้คุณสามารถนําเข้าโฟลว์และเรียกใช้โฟลว์เป็นการดำเนินการของเซิร์ฟเวอร์ได้ในโค้ดส่วนหน้า

เช่น

'use client';

import { menuSuggestionFlow } from './genkit';
import { useState } from 'react';

export default function Home() {
  const [menuItem, setMenuItem] = useState<string>('');

  async function getMenuItem(formData: FormData) {
    const theme = formData.get('theme')?.toString() ?? '';
    const suggestion = await menuSuggestionFlow(theme);
    setMenuItem(suggestion);
  }

  return (
    <main>
      <form action={getMenuItem}>
        <label htmlFor="theme">
          Suggest a menu item for a restaurant with this theme:{' '}
        </label>
        <input type="text" name="theme" id="theme" />
        <br />
        <br />
        <button type="submit">Generate</button>
      </form>
      <br />
      <pre>{menuItem}</pre>
    </main>
  );
}

ทดสอบแอปในเครื่อง

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

จากนั้นเรียกใช้แอปในเครื่องตามปกติ

npm run dev

เครื่องมือการพัฒนาทั้งหมดของ Genkit จะยังคงทำงานตามปกติ ตัวอย่างเช่น หากต้องการโหลดโฟลว์ใน UI ของนักพัฒนาซอฟต์แวร์ ให้ทำดังนี้

npx genkit start -- npx tsx --watch src/app/genkit.ts

ทำให้แอปใช้งานได้

เมื่อทําให้การเผยแพร่แอปใช้งานได้ คุณจะต้องตรวจสอบว่าข้อมูลเข้าสู่ระบบสําหรับบริการภายนอกที่คุณใช้ (เช่น บริการ API ของโมเดลที่เลือก) พร้อมใช้งานสําหรับแอปที่เผยแพร่แล้ว ดูข้อมูลเฉพาะสําหรับแพลตฟอร์มการเผยแพร่ที่คุณเลือกได้ที่หน้าต่อไปนี้

• Cloud Functions for Firebase
• Cloud Run
• แพลตฟอร์ม Node.js อื่นๆ