Menggunakan Genkit di aplikasi Angular

bookmark_border Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Halaman ini menunjukkan cara menggunakan alur Genkit di aplikasi Angular.

Sebelum memulai

Sebaiknya pahami dahulu konsep flow Genkit, dan cara menulisnya.

Membuat project Angular

Panduan ini akan menggunakan aplikasi Angular dengan SSR dengan perutean server.

Anda dapat membuat project baru dengan pemilihan rute sisi server menggunakan Angular CLI:

ng new --ssr --server-routing

Anda juga dapat menambahkan pemilihan rute sisi server ke project yang ada dengan perintah ng add:

ng add @angular/ssr --server-routing

Menginstal dependensi Genkit

Instal dependensi Genkit ke aplikasi Angular, dengan cara yang sama seperti untuk project Genkit apa pun:

1. Instal library Genkit inti:

   npm i --save genkit

2. Instal minimal satu plugin model.

   Misalnya, untuk menggunakan AI Google:

   npm i --save @genkit-ai/googleai

   Atau untuk menggunakan Vertex AI:

   npm i --save @genkit-ai/vertexai

3. Instal library Genkit Express:

   npm i --save @genkit-ai/express

4. Instal Zod:

   npm i --save zod

5. Jika tidak menginstal Genkit CLI secara global, Anda dapat menginstalnya sebagai dependensi pengembangan. Alat tsx juga direkomendasikan, karena membuat pengujian kode Anda lebih praktis. Namun, kedua dependensi ini bersifat opsional.

   npm i --save-dev genkit-cli tsx

Menentukan flow Genkit

Buat file baru di project Angular untuk memuat alur Genkit: misalnya, src/genkit.ts. File ini dapat berisi alur Anda tanpa perubahan.

Contoh:

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

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

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

Menambahkan rute server

Tambahkan impor berikut ke src/server.ts:

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

Tambahkan baris berikut setelah inisialisasi variabel app:

app.use(express.json());

Kemudian, tambahkan rute untuk menayangkan alur Anda:

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

Memanggil flow

Sekarang, Anda dapat menjalankan alur dari aplikasi klien.

Misalnya, Anda dapat mengganti konten src/app/app.component.ts dengan konten berikut:

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

Lakukan update yang sesuai ke 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>
}

Menguji aplikasi secara lokal

Jika ingin menjalankan aplikasi secara lokal, Anda harus menyediakan kredensial untuk layanan API model yang Anda pilih.

Kemudian, jalankan aplikasi secara lokal seperti biasa:

ng serve

Semua alat pengembangan Genkit akan terus berfungsi seperti biasa. Misalnya, untuk memuat flow di UI developer:

npx genkit start -- ng serve

Men-deploy aplikasi

Saat men-deploy aplikasi, Anda harus memastikan kredensial untuk layanan eksternal apa pun yang Anda gunakan (seperti layanan API model yang Anda pilih) tersedia untuk aplikasi yang di-deploy. Lihat halaman berikut untuk mengetahui informasi khusus untuk platform deployment yang Anda pilih:

• Cloud Functions for Firebase
• Cloud Run
• Platform Node.js lainnya

Langkah berikutnya

• Menjelajahi Genkit di aplikasi Angular yang di-deploy: Pelajari penerapan referensi beberapa alur Genkit yang mendukung aplikasi Angular, lalu langsung ke kode di Firebase Studio.