Next.js ऐप्लिकेशन में Genkit का इस्तेमाल करना

इस पेज पर बताया गया है कि अपने Next.js ऐप्लिकेशन में, Genkit फ़्लो को सर्वर ऐक्शन के तौर पर कैसे इस्तेमाल किया जा सकता है.

शुरू करने से पहले

आपको Genkit के फ़्लो के कॉन्सेप्ट और उन्हें लिखने के तरीके के बारे में पता होना चाहिए.

Next.js प्रोजेक्ट बनाना

अगर आपके पास पहले से कोई ऐसा Next.js प्रोजेक्ट नहीं है जिसमें जनरेटिव एआई की सुविधाएं जोड़नी हैं, तो इस पेज पर दिए गए निर्देशों का पालन करके एक प्रोजेक्ट बनाया जा सकता है:

npx create-next-app@latest

Genkit की डिपेंडेंसी इंस्टॉल करना

Genkit की डिपेंडेंसी को अपने Next.js ऐप्लिकेशन में उसी तरह इंस्टॉल करें जिस तरह किसी भी Genkit प्रोजेक्ट के लिए किया जाता है:

1. Genkit की मुख्य लाइब्रेरी इंस्टॉल करें:

   npm i --save genkit

2. कम से कम एक मॉडल प्लग इन इंस्टॉल करें.

   उदाहरण के लिए, 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 फ़्लो तय करना

अपने Genkit फ़्लो को शामिल करने के लिए, अपने Next.js प्रोजेक्ट में एक नई फ़ाइल बनाएं: उदाहरण के लिए, 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;
  }
);

अपने फ़्लो को कॉल करना

अब अपने फ़्रंटएंड कोड में, फ़्लो इंपोर्ट किए जा सकते हैं और उन्हें सर्वर ऐक्शन के तौर पर कॉल किया जा सकता है.

उदाहरण के लिए:

'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>
  );
}

अपने ऐप्लिकेशन को स्थानीय तौर पर टेस्ट करना

अगर आपको अपना ऐप्लिकेशन स्थानीय तौर पर चलाना है, तो आपको अपनी चुनी गई मॉडल एपीआई सेवा के लिए क्रेडेंशियल उपलब्ध कराने होंगे.

इसके बाद, अपने ऐप्लिकेशन को सामान्य तौर पर स्थानीय तौर पर चलाएं:

npm run dev

Genkit के सभी डेवलपमेंट टूल पहले की तरह काम करते रहेंगे. उदाहरण के लिए, डेवलपर यूज़र इंटरफ़ेस (यूआई) में अपने फ़्लो लोड करने के लिए:

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

अपना ऐप्लिकेशन डिप्लॉय करना

ऐप्लिकेशन को डिप्लॉय करते समय, आपको यह पक्का करना होगा कि इस्तेमाल की जाने वाली किसी भी बाहरी सेवा (जैसे, आपने जो मॉडल एपीआई सेवा चुनी है) के क्रेडेंशियल, डिप्लॉय किए गए ऐप्लिकेशन के लिए उपलब्ध हों. डिप्लॉय करने के लिए चुने गए प्लैटफ़ॉर्म के बारे में खास जानकारी के लिए, यहां दिए गए पेज देखें:

• Firebase के लिए Cloud Functions
• Cloud Run
• अन्य Node.js प्लैटफ़ॉर्म