Angular + Gemini Pro (Primera parte)

Integrando Angular y Gemini

Bienvenido a este tutorial en el que daremos una introducción a cómo integrar Angular y Gemini de una forma muy sencilla.

Requisitos previos:

Tener Node.js instalado en tu sistema. Puedes descargarlo desde https://nodejs.org/en/download.
Tener instalado @angular/cli. Puedes instalarlo usando npm con este comando: npm install --global @angular/cli.
Familiaridad básica con HTML, CSS y JavaScript.
Familiaridad básica con Angular.

Empezando:

Creación del proyecto en Angular

Abre una terminal y navega hasta la ubicación donde deseas crear el proyecto, una vez ahí corre el siguiente comando:

ng new gemini-poc

Remplaza “gemini-poc” con el nombre que prefieras para tu proyecto. La CLI te guiará en el proceso de creación.

Instalar librería de Google Generative AI

Para poder usar un modelo de Gemini desde nuestra aplicación, debemos instalar la dependencia @google/generative-ai. Para ello corremos el comando:

npm install @google/generative-ai

Implementar servicio que se conectará con Gemini

Crea un servicio para separar la lógica de conexión con el modelo. Para ello corre el comando:

ng generate service gemini

“gemini” es el nombre que le estamos dando a nuestro servicio, puedes darle otro nombre si lo deseas.

Necesitamos una instancia del modelo para poder mandarle prompts:

readonly #API_KEY = '<YOUR-API-KEY>';
readonly #genAI = new GoogleGenerativeAI(this.#API_KEY);
readonly #model = this.#genAI.getGenerativeModel({ model: 'gemini-pro' });

La API key veremos cómo obtenerla en el siguiente paso.

#genAI es una propiedad privada que contiene una instancia de la librería.

#model es una instancia del modelo, el mismo está usando gemini-pro, el cual es el modelo para entradas de solo texto. Puedes ver las diferentes variaciones de modelos aquí.

También debemos implementar una función que se encargue de enviar prompts a nuestro modelo para generar contenido:

async sendPrompt(prompt: string): Promise<string> {
  try {
    const { response } = await this.#model.generateContent(prompt);
    return response.text();
  } catch (error) {
    console.error(error);
    return 'An error has occurred. Please try again.';
  }
}

Nuestro servicio debería lucir así:

import { Injectable } from '@angular/core';
import { GoogleGenerativeAI } from '@google/generative-ai';

@Injectable({
  providedIn: 'root',
})
export class GeminiService {
  readonly #API_KEY = '<YOUR-API-KEY>';
  readonly #genAI = new GoogleGenerativeAI(this.#API_KEY);
  readonly #model = this.#genAI.getGenerativeModel({ model: 'gemini-pro' });

async sendPrompt(prompt: string): Promise<string> {
  try {
    const { response } = await this.#model.generateContent(prompt);
    return response.text();
  } catch (error) {
    console.error(error);
    return 'An error has occurred. Please try again.';
  }
}
}

Obtener nuestra API key

Accede a Google AI Studio y crea una nueva API key. Asegúrate de guardar este valor una vez se haya generado y no compartirlo con nadie. No olvides que en caso de perderlo o compartirlo por accidente, siempre puedes eliminar la key y crear una nueva.

Reemplaza la key que obtuviste en la propiedad del servicio creado en el anterior paso. Toma en cuenta que el código con tu key no debería ser publicado, solo lo estamos agregando de forma directa en el código para desarrollo local.

Crear el chat.component

Nos crearemos un componente llamado chat para interactuar con el modelo de Gemini. Para ello corremos el siguiente comando:

ng generate component chat

Lo siguiente es crear una ruta para nuestro componente en el archivo app.routes.ts y asegurarnos de redirigir a ella:

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'chat',
    pathMatch: 'full',
  },
  {
    path: 'chat',
    loadComponent: () => import('./chat/chat.component').then(c => c.ChatComponent),
  },
];

También tenemos que actualizar el app.component.html para que cargue las rutas:

<router-outlet />

Debemos actualizar el template y el componente chat.component para poder mandar los prompts.

La lógica del componente necesita propiedades para almacenar la respuesta de Gemini y una función que utilice el servicio para poder mandar el prompt.

Para guardar la respuesta podemos hacer uso de un signal:

response = signal('');

Mientras que nuestra función podría lucir así:

readonly #geminiService = inject(GeminiService);

sendTextMessage(prompt: string): void {
  this.#geminiService
    .sendPrompt(prompt)
    .then((response) => this.response.set(response));
}

Ahora, necesitamos renderizar la repuesta de Gemini en nuestro template (chat.component.html):

<p>
  {{ response() }}
</p>

También debemos agregar un campo de texto que llame a nuestra función sendTextMessage cada que presionemos la tecla “Enter”:

<input
  #promptInput
  placeholder="Introduce una petición aquí"
  type="text"
  (keyup.enter)="sendTextMessage(promptInput.value)"
/>

Después de estos cambios, nuestro archivo chat.component.ts debería lucir así:

import {
  ChangeDetectionStrategy,
  Component,
  inject,
  signal,
} from '@angular/core';

import { GeminiService } from '../core/services/gemini.service';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [],
  templateUrl: './chat.component.html',
  styleUrl: './chat.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatComponent {
  response = signal('');
  readonly #geminiService = inject(GeminiService);

  sendTextMessage(prompt: string): void {
    this.#geminiService
      .sendPrompt(prompt)
      .then((response) => this.response.set(response));
  }
}

Y el archivo chat.component.html así:

<p>
  {{ response() }}
</p>

<input
  #promptInput
  placeholder="Introduce una petición aquí"
  type="text"
  (keyup.enter)="sendPrompt(promptInput.value)"
/>

A probar nuestra app

Si hasta aquí hemos hecho todo bien, deberíamos poder correr nuestra app con el comando ng serve e interactuar con la misma abriendo en nuestro navegador web http://localhost:4200:

Image description