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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

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

Angular प्रोजेक्ट बनाना

इस गाइड में, सर्वर रूटिंग के साथ एसएसआर वाले Angular ऐप्लिकेशन का इस्तेमाल किया जाएगा.

Angular CLI की मदद से, सर्वर साइड रूटिंग वाला नया प्रोजेक्ट बनाया जा सकता है:

ng new --ssr --server-routing

ng add कमांड की मदद से, किसी मौजूदा प्रोजेक्ट में भी सर्वर-साइड रूटिंग जोड़ी जा सकती है:

ng add @angular/ssr --server-routing

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

अपने Angular ऐप्लिकेशन में Genkit की डिपेंडेंसी उसी तरह इंस्टॉल करें जिस तरह किसी भी 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 Express लाइब्रेरी इंस्टॉल करें:

   npm i --save @genkit-ai/express

4. Zod इंस्टॉल करें:

   npm i --save zod

5. अगर आपने Genkit CLI को ग्लोबल तौर पर इंस्टॉल नहीं किया है, तो इसे डेवलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल किया जा सकता है. हमारा सुझाव है कि आप tsx टूल का भी इस्तेमाल करें, क्योंकि इससे आपके कोड की जांच करना ज़्यादा आसान हो जाता है. हालांकि, इन दोनों डिपेंडेंसी का इस्तेमाल करना ज़रूरी नहीं है.

   npm i --save-dev genkit-cli tsx

Genkit फ़्लो तय करना

अपने Genkit फ़्लो को शामिल करने के लिए, अपने Angular प्रोजेक्ट में एक नई फ़ाइल बनाएं: उदाहरण के लिए, src/genkit.ts. इस फ़ाइल में, बदलाव किए बिना आपके फ़्लो शामिल हो सकते हैं.

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

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

const ai = genkit({
  plugins: [googleAI()],
  model: googleAI.model('gemini-2.0-flash'),
});

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

सर्वर रूट जोड़ना

src/server.ts में ये इंपोर्ट जोड़ें:

import { expressHandler } from '@genkit-ai/express';
import { menuSuggestionFlow } from './genkit';

app वैरिएबल को शुरू करने के बाद, नीचे दी गई लाइन जोड़ें:

app.use(express.json());

इसके बाद, अपने फ़्लो को दिखाने के लिए कोई रूट जोड़ें:

app.post('/menu', expressHandler(menuSuggestionFlow));

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

अब अपने क्लाइंट ऐप्लिकेशन से फ़्लो चलाए जा सकते हैं.

उदाहरण के लिए, src/app/app.component.ts के कॉन्टेंट को इनके साथ बदला जा सकता है:

import { Component, resource, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { runFlow } from 'genkit/beta/client';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  templateUrl: './app.component.html',
})
export class AppComponent {
  menuInput = '';
  theme = signal('');

  menuResource = resource({
    request: () => this.theme(),
    loader: ({request}) => runFlow({ url: 'menu', input: request })
  });
}

src/app/app.component.html में इन बदलावों को लागू करें:

<h3>Generate a custom menu item</h3>
<input type="text" [(ngModel)]="menuInput" />
<button (click)="this.theme.set(menuInput)">Generate</button>
<br />
@if (menuResource.isLoading()) {
  Loading...
} @else {
  <pre>{{menuResource.value()}}</pre>
}

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

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

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

ng serve

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

npx genkit start -- ng serve

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

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

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

अगले चरण

• डिप्लॉय किए गए ऐंगलर ऐप्लिकेशन में Genkit को एक्सप्लोर करना: ऐंगलर ऐप्लिकेशन को बेहतर बनाने वाले कई Genkit फ़्लो के रेफ़रंस को लागू करने का तरीका जानें. इसके बाद, Firebase Studio में कोड पर जाएं.