Part 4: Deploying the Angular App for Invocation

The final piece is the user interface. A user needs a simple chat window to interact with our agent. We will build this using Angular, which provides a robust framework for creating dynamic single-page applications.

Chat Interface

The interface will consist of a message history display and a text input for the user to type their requests. When the user sends a message, our Angular application will not call the Gemini API directly. Instead, it will call a dedicated endpoint on our Spring Boot backend, which then orchestrates the conversation with the agent.

Angular Service Example

Here's an example of an Angular service method that would send the user's message to our backend.

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable({ providedIn: "root" })
export class AgentService {
  
  private backendUrl = "/api/agent/chat"; // Our Spring Boot endpoint

  constructor(private http: HttpClient) {}

  sendMessage(message: string): Observable<{ response: string }> {
    return this.http.post<{ response: string }>(this.backendUrl, { prompt: message });
  }
}

With the frontend, backend, and agent all connected, you now have a complete, end-to-end AI application.