Usar o Genkit em um app do Angular

Esta página mostra como usar os fluxos do Genkit em apps do Angular.

Antes de começar

Você precisa conhecer o conceito de fluxos do Genkit e como programá-los.

Criar um projeto do Angular

Este guia vai usar um app Angular com SSR com roteamento do servidor.

É possível criar um novo projeto com roteamento do lado do servidor usando a CLI do Angular:

ng new --ssr --server-routing

Também é possível adicionar o roteamento do lado do servidor a um projeto existente com o comando ng add:

ng add @angular/ssr --server-routing

Instalar dependências do Genkit

Instale as dependências do Genkit no seu app Angular da mesma forma que você faria para qualquer projeto do Genkit:

  1. Instale a biblioteca principal do Genkit:

    npm i --save genkit

  2. Instale pelo menos um plug-in de modelo.

    Por exemplo, para usar a IA do Google:

    npm i --save @genkit-ai/googleai

    Ou, para usar a Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. Instale a biblioteca Genkit Express:

    npm i --save @genkit-ai/express

  4. Instale o Zod:

    npm i --save zod

  5. Se você não tiver instalado a CLI do Genkit globalmente, poderá fazer isso como uma dependência de desenvolvimento. A ferramenta tsx também é recomendada, porque facilita o teste do código. No entanto, essas duas dependências são opcionais.

    npm i --save-dev genkit-cli tsx

Definir fluxos do Genkit

Crie um novo arquivo no projeto do Angular para conter os fluxos do Genkit, por exemplo, src/genkit.ts. Esse arquivo pode conter seus fluxos sem modificações.

Exemplo:

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

Adicionar rotas de servidor

Adicione as seguintes importações a src/server.ts:

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

Adicione a linha a seguir após a inicialização da variável app:

app.use(express.json());

Em seguida, adicione uma rota para veicular seu fluxo:

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

Chamar seus fluxos

Agora você pode executar seus fluxos no aplicativo cliente.

Por exemplo, é possível substituir o conteúdo de src/app/app.component.ts por este:

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

Faça as atualizações correspondentes em 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>
}

Testar o app localmente

Se você quiser executar o app localmente, disponibilize as credenciais do serviço de API do modelo escolhido.

Gemini (IA do Google)Gemini (Vertex AI)

  1. Garanta que a IA do Google disponíveis na sua região.

  2. Gere uma chave de API para à API Gemini usando o Google AI Studio.

  3. Defina a variável de ambiente GEMINI_API_KEY como sua chave:

    export GEMINI_API_KEY=<your API key>

  1. No console do Cloud, Ative a API Vertex AI para seu projeto.

  2. Defina algumas variáveis de ambiente e use a ferramenta gcloud para configurar as credenciais padrão do aplicativo:

    export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login

Em seguida, execute o app localmente normalmente:

ng serve

Todas as ferramentas de desenvolvimento do Genkit continuam funcionando normalmente. Por exemplo, para carregar seus fluxos na interface do desenvolvedor:

npx genkit start -- ng serve

implantar o app

Ao implantar o app, você precisa garantir que as credenciais de todos os serviços externos que você usa (como o serviço de API de modelo escolhido) estejam disponíveis para o app implantado. Consulte as páginas a seguir para informações específicas da plataforma de implantação escolhida:

Próximas etapas