1. Intro 2. Setup Appointment APIs 3. Develop AI Agent - Google Gemini 4. Deploy User Interface Application

Part 4: Deploying the Angular App for Invocation

chat_bubble_outline 0 responses 4 min read

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.

Deployment to Google Cloud Run

With the Google Cloud SDK configured, you can deploy the entire application with a single command from the project's root directory. This command triggers the Cloud Build pipeline defined in cloudbuild.yaml. 


gcloud builds submit .

Accessing the Application

After the deployment succeeds, Cloud Build will output the public URL for the service. You can also retrieve it at any time by running:


gcloud run services describe web-angular-1 \
  --platform managed \
  --region us-central1 \
  --format "value(status.url)"

Open this URL in your web browser to access the chat interface. You can now interact with the AI Scheduling Assistant, which will use the Gemini model to understand your requests and call the appropriate appointment scheduler APIs via the Spring Boot 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.

0 responses