DEV Community: Wayne Gakuo

Mastering Retrieval-Augmented Generation with Gemini API's File Search Tool

Wayne Gakuo — Tue, 10 Mar 2026 09:34:02 +0000

I first heard about Retrieval-Augmented Generation (RAG) when I was trying to get an AI agent to provide answers to questions pertaining to internal documents and not necessarily on the data it was trained on. Initially, I imagined it as how one would provide sensitive information only to authorized personnel or users; think company-level kind of access control or NDA-bound information. The goal is to ensure that the AI agent doesn't hallucinate.

So what exactly is this RAG thing that people are just catching up to? Let's dive in.

What is RAG?

Retrieval-Augmented Generation (RAG) is a technique used to give Large Language Models (LLMS) access to data that they weren't originally trained on.
For example, imagine an LLM as a smart student who has read every book in the world up until 2025. If you ask them about a private company memo written yesterday, they won't know the answer. RAG is like giving that student a library card and a specific book to look up before they answer your question.

For the neuroscience nerds, here's a visual of how a typical human brain works when it comes to storing and retrieving of information. Have this mental model as it will come in handy as you go through this article.

A visual representation of how human brains store and retrieve information; generated by Gemini's Nano Bana 2

How does RAG work?

RAG operates with a few main steps to help enhance generative AI outputs:

Retrieval & pre-processing: RAGs leverage advanced search algorithms to query external data sources like databases, web pages, and knowledge bases. The information retrieved is then pre-processed, involving steps such as tokenization, stemming, and the removal of stop words.
Grounded generation: We then feed the pre-processed information into the pre-trained LLM, enriching its context and deepening its understanding of the subject. This enhanced context allows the LLM to produce more accurate, informative, and engaging responses.

The Traditional RAG Process

Before tools like File Search existed, developers had to build "the nitty-gritty" part of RAG themselves. This involved several complex steps:

Challenges of Traditional RAG

Chunking Logic: How do you split a document such as a PDF? By paragraph? By page? If you cut a sentence in half, the meaning is lost.
Embeddings: You must convert text into high-dimensional vectors (numbers) using an embedding model.
Vector Databases: You need to manage a separate database (like Cloud Firestore) to store and search these vectors.
Maintenance: Keeping the database in sync with your files is a constant chore.

File Search

File Search Tool is a fully managed RAG system built directly into the Gemini API that abstracts away the retrieval pipeline so you can focus on building great experiences. It handles the chunking, embedding, and vector storage for you. You simply upload a file, and Gemini takes care of the rest.

File Search is simple and affordable for developers, whereby storage and embedding generation at query time is FREE of charge. You only pay for the creation of embeddings when you first index your files, at a fixed rate of $0.15 per million tokens, making the File Search Tool both easier and cost-effective.

When you use File Search, you don't worry about "vectors" or "chunks." You interact with Files and Stores.

How it Works in our Demo app

To further demonstrate how this works, I built a simple web app dubbed Onboard HQ, which is a centralized, AI-powered "Command Center" that is designed to transform a company's fragmented internal documentation into an interactive, high-velocity knowledge base.
The app is built using Angular, Genkit, Firebase and File Search (through the Google GenAI SDK).

Step 1: Ingesting Documents ("Upload")

We define a flow to upload files to a fileSearchStore. Notice how we don't manually calculate embeddings; we just send the blob to Google's infrastructure.

// From functions/src/index.ts
export const _uploadToFileSearchStoreLogic = ai.defineFlow(
  {
    name: 'uploadToFileSearchStore',
    inputSchema: z.object({
      fileData: z.string(), // Base64 encoded file
      mimeType: z.string(),
      displayName: z.string().optional(),
    }),
    // ...
  },
  async ({fileData, mimeType, displayName}) => {
    const genAI = new GoogleGenAI({});

    // ... (logic to get/create store name)

    const blob = new Blob([Buffer.from(fileData, 'base64')], { type: mimeType });

    // This single call handles chunking and indexing!
    let operation = await genAI.fileSearchStores.uploadToFileSearchStore({
      file: blob,
      fileSearchStoreName: googleFileSearchStoreName,
      config: {
        displayName: displayName || 'uploaded-file',
        mimeType: mimeType,
      }
    });

    // We wait for the background indexing to complete
    while (!operation.done) {
      await new Promise((resolve) => setTimeout(resolve, 5000));
      const operationResult = await genAI.operations.get({ operation });
      operation = operationResult as any;
    }

    return { success: true };
  }
);

Step 2: Querying ("Retrieval")

When the user asks a question, we don't manually search the database. We tell the Gemini model that it has a tool called fileSearch available.

// From functions/src/index.ts
export const _chatWithFileSearchLogic = ai.defineFlow(
  // ... input: question, history
  async({question, history}) => {
    // We retrieve the store name where our files are indexed
    const storeSnap = await db.collection('obhqFileSearchStores').doc('obhqknowledge').get();
    const googleFileSearchStoreName = storeSnap.data()?.googleFileSearchStoreName;

    const response = await ai.generate({
      system: CHAT_WITH_FILE_SEARCH_SYSTEM_PROMPT,
      messages: [
        ...toGenkitMessages(history ?? []),
        {role: 'user', content: [{text: question}]},
      ],
      config: {
        tools: [
          {
            fileSearch: {
              fileSearchStoreNames: [googleFileSearchStoreName]
            }
          }
        ]
      }
    });

    return response.text;
  }
);

File Search vs. Traditional RAG: A Comparison

Feature	Traditional RAG	File Search
Setup Time	Days/Weeks	Minutes
Infrastructure	Vector DB + Embedding Model + App	Managed by Google
Chunking	Manual configuration	Automatic/AI-optimized
Scalability	You manage shards/indexes	Managed automatically
Developer Focus	Pipelines and Databases	User Experience and Prompts

Summary

Building a RAG pipeline traditionally involved complex processes like data ingestion, chunking, embedding creation, vector database setup, and prompt context injection. Google's new File Search tool automates these tasks, providing a fully managed, end-to-end RAG solution directly within the Gemini API via the ai.generate call.

By using File Search, we've offloaded the heavy lifting of data engineering to the model provider. This allows us to focus on building a better onboarding experience for Onboard HQ users, rather than debugging vector similarity thresholds.

There is a lot more about the File Search Tool that I haven't covered in this article, which I recommend you read more about here, for example, how to use the File Metadata and Citations for fact-checking and verification.

RAG is no longer about the "nitty-gritty" of data pipelines—it's about providing the right information to the right user at the right time.

Check out the demo app below to see File Search in action and the code on GitHub:

Onboard HQ demo app: https://onboarding-hq.web.app/
GitHub Repo: https://github.com/waynegakuo/onboardhq

Example Questions

Try asking these common onboarding and policy questions in the Onboard HQ app:

"What is our policy on hybrid and remote work?"
"How do I set up my corporate VPN and email?"
"Tell me about the company's culture"

Building a Multi-Agent System with Tool Calling using Angular, Firebase & Genkit

Wayne Gakuo — Wed, 25 Feb 2026 11:34:13 +0000

A deep-dive into building a production-ready, multi-agent AI chat application using Angular 20, Firebase Cloud Functions, and Google Genkit — powered by Gemini 2.5 Flash.

A single LLM can answer questions, but real-world complexity usually requires specialized roles. For example, in a typical company setting, you wouldn't ask your backend engineer to design an app's UI, and you wouldn't ask the designer to optimize database queries. Similarly, we can create specialized AI agents that focus on one task and coordinate with each other to solve complex problems.

Overview

For this project, we have Concierge AI, a conversational travel assistant that helps users plan day trips, discover restaurants, find weekend events, and navigate routes, all through a single chat interface.

What makes it interesting from an engineering perspective is the multi-agent architecture under the hood. Rather than one monolithic AI prompt trying to do everything, the system uses a root orchestrator agent that intelligently delegates to four specialist sub-agents, each with its own system prompt and grounding via Google Search.

The frontend is built with modern Angular 20, using signals, OnPush change detection, and SSR, while the backend runs on Firebase Cloud Functions with Google Genkit orchestrating the AI pipeline. The Large Language Model (LLM) being used is the Gemini 2.5 Flash.

Architecture

The Multi-Agent Pattern

The system is built around a hierarchical multi-agent pattern:

User Message
     │
     ▼
┌─────────────────────────────────┐
│     Concierge Agent             │  ← Orchestrator
│  (Root agent / router)          │
└────────────┬────────────────────┘
             │ delegates via tool calls
     ┌───────┼───────────────┐
     ▼       ▼               ▼               ▼
┌─────────┐ ┌──────────┐ ┌──────────────┐ ┌────────────────┐
│ Day Trip│ │  Foodie  │ │Weekend Guide │ │Find & Navigate │
│  Agent  │ │  Agent   │ │    Agent     │ │    Agent       │
└─────────┘ └──────────┘ └──────────────┘ └────────────────┘

Each sub-agent is a Genkit tool which is a typed, callable function that the orchestrator can invoke when it determines the user's request falls within that agent's domain.

Why Multi-Agent?

A single monolithic prompt becomes difficult to manage as capabilities grow. The multi-agent approach gives you:

Separation of concerns: each agent has a focused system prompt
Independent grounding: sub-agents can use Google Search; the orchestrator doesn't need to
Composability: agents can be added, removed, or swapped independently
Debuggability: you can test each agent in isolation via the Genkit Dev UI
Evaluation & Observability — Genkit's built-in tracing and the Firebase Genkit plugin's telemetry (enableFirebaseTelemetry()) let you monitor agent behaviour, latency, and cost in production

Backend: Firebase Functions + Genkit

Configuring Genkit

Genkit is initialised once at the module level. The Google AI plugin is configured with the API key, which is stored as a Firebase Secret and injected at runtime:

import { defineSecret } from 'firebase-functions/params';
import { googleAI } from '@genkit-ai/google-genai';
import { genkit } from 'genkit';

const GEMINI_API_KEY = defineSecret('GEMINI_API_KEY');

const ai = genkit({
  plugins: [googleAI({ apiKey: process.env.GEMINI_API_KEY })],
  model: googleAI.model('gemini-2.5-flash'),
});

Note: defineSecret registers the secret with Firebase so it's automatically injected into the function's environment at runtime. You never hard-code the key.

Defining Sub-Agent Tools

Each specialist agent is defined using ai.defineTool. The tool has a typed input/output schema (via Zod) and its own system prompt. Crucially, it also accepts the conversation history so it has full context:

export const _dayTripAgentToolLogic = ai.defineTool(
  {
    name: 'dayTripAgentTool',
    description: 'Assists with planning day trips',
    inputSchema: z.object({
      input: z.string(),
      history: z.array(conversationMessageSchema).optional(),
    }),
    outputSchema: z.string(),
  },
  async ({ input, history }) => {
    const response = await ai.generate({
      system: DAY_TRIP_AGENT_PROMPT,
      messages: [
        ...toGenkitMessages(history ?? []),
        { role: 'user', content: [{ text: input }] },
      ],
      config: {
        googleSearchRetrieval: {}, // ← live web search grounding
      },
    });

    if (!response.text) throw new Error('No output from AI');
    return response.text;
  }
);

The description field is critical; it's what the orchestrator's LLM reads to decide whether to invoke this tool.

The Orchestrator Agent

The root agent is a Genkit flow (not a tool). It receives the user's message and history, then calls ai.generate with all four sub-agent tools registered. The LLM decides autonomously which tool(s) to call:

export const _conciergeAgentLogic = ai.defineFlow(
  {
    name: 'conciergeAgentFlow',
    inputSchema: z.object({
      input: z.string(),
      history: z.array(conversationMessageSchema).optional(),
    }),
    outputSchema: z.string(),
  },
  async ({ input, history }) => {
    const response = await ai.generate({
      system: CONCIERGE_AGENT_PROMPT,
      messages: [
        ...toGenkitMessages(history ?? []),
        { role: 'user', content: [{ text: input }] },
      ],
      tools: [
        _dayTripAgentToolLogic,
        _foodieAgentToolLogic,
        _weekendGuideAgentToolLogic,
        _findAndNavigateAgentToolLogic,
      ],
    });

    const result = response.text || response.output;
    if (!result) throw new Error('No output from AI');
    return result;
  }
);

Key insight: The orchestrator does not use googleSearchRetrieval. Only the sub-agents do. The orchestrator's job is routing and synthesis, not raw research.

Exposing the Flow as a Callable Function

onCallGenkit wraps the Genkit flow as a Firebase Callable Function, handling authentication, CORS, and secret injection automatically:

const GENKIT_FUNCTION_CONFIG = {
  secrets: [GEMINI_API_KEY],
  region: 'africa-south1',
  cors: isEmulated
    ? true
    : [
        'http://localhost:4200',
        /^https:\/\/agents-concierge(--[a-z0-9-]+)?\.web\.app$/,
      ],
};

export const conciergeAgentFlow = onCallGenkit(
  GENKIT_FUNCTION_CONFIG,
  _conciergeAgentLogic
);

The regex in the cors array allows both the production domain and Firebase preview channel URLs (e.g. agents-concierge--pr-42-abc123.web.app).

Conversation Context: Keeping the AI Stateful

The Problem with Stateless Functions

Every invocation of a Firebase Cloud Function is stateless. Without extra work, the AI has no memory of previous turns:

Turn 1 — User: "Plan a day trip"
         AI:   "Sure! What city are you in?"

Turn 2 — User: "Cape Town"
         AI:   "I'm not sure what you're referring to." ← no context!

Client-Managed History

Rather than storing history server-side (e.g. in Firestore), the Angular client maintains the conversation history in memory and sends it with every request. The backend stays stateless and horizontally scalable.

User types message
       │
       ▼
ChatComponent snapshots current history
       │
       ▼
AiService.sendMessage(query, historySnapshot)
       │
       ▼
Firebase Function: conciergeAgentFlow({ input, history })
       │
       ▼
ai.generate({ messages: [...history, currentUserMessage], tools })
       │
       ▼
Sub-agent tool receives { input, history } → same context
       │
       ▼
Response returned → client appends both turns to history

The shared message schema (defined with Zod on the backend, mirrored as a TypeScript interface on the frontend) ensures both sides speak the same language:

// Backend (Zod schema)
const conversationMessageSchema = z.object({
  role: z.enum(['user', 'model']),
  content: z.string(),
});

// Frontend (TypeScript interface — chat.model.ts)
export interface ConversationMessage {
  role: 'user' | 'model';
  content: string;
}

A small helper on the backend converts this flat format into Genkit's MessageData structure:

function toGenkitMessages(history: ConversationMessage[]) {
  return history.map((msg) => ({
    role: msg.role as 'user' | 'model',
    content: [{ text: msg.content }],
  }));
}

The History Snapshot Pattern

There's a subtle but important detail in how the component sends history. The snapshot must be taken before appending the new user turn, otherwise the current message appears twice in the context:

sendMessage(): void {
  const query = this.queryControl.value.trim();

  // ✅ Snapshot BEFORE appending the new user turn
  const historySnapshot = this.conversationHistory();

  // Now append the new user turn to local history
  this.conversationHistory.update((h) => [...h, { role: 'user', content: query }]);

  this.aiService.sendMessage(query, historySnapshot).subscribe({
    next: (response) => {
      // Append AI turn after receiving the response
      this.conversationHistory.update((h) => [
        ...h,
        { role: 'model', content: response.data },
      ]);
    },
  });
}

Frontend: Angular 20+

The AI Service

The service is a thin wrapper around the Firebase Callable Function. It uses inject() for dependency injection and returns an Observable so the component can use RxJS operators:

@Injectable({ providedIn: 'root' })
export class AiService {
  private readonly functions = inject(Functions);

  sendMessage(
    query: string,
    history: ConversationMessage[] = []
  ): Observable<{ data: string }> {
    const conciergeAgentFlow = httpsCallable<
      { input: string; history: ConversationMessage[] },
      string
    >(this.functions, 'conciergeAgentFlow');

    return from(conciergeAgentFlow({ input: query, history }));
  }
}

The Chat Component

The component uses ChangeDetectionStrategy.OnPushwhereby Angular only re-renders when signal values change, making it highly performant even with a long message list:

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss'],
  imports: [ReactiveFormsModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatComponent implements AfterViewChecked {
  private readonly aiService = inject(AiService);
  private readonly sanitizer = inject(DomSanitizer);

  messages = signal<Message[]>([]);
  conversationHistory = signal<ConversationMessage[]>([]);
  isLoading = signal(false);

  queryControl = new FormControl('', {
    nonNullable: true,
    validators: [Validators.required],
  });
  // ...
}

Signals for State Management

All mutable state is held in signals. The isLoading signal is managed with RxJS's finalize() operator, which fires whether the observable completes successfully or errors, thus ensuring the loading state is always cleaned up:

this.isLoading.set(true);

this.aiService
  .sendMessage(query, historySnapshot)
  .pipe(
    finalize(() => {
      this.isLoading.set(false);      // ← always runs, even on error
      this.shouldScrollToBottom = true;
    })
  )
  .subscribe({
    next: (response) => {
      this.messages.update((msgs) => [
        ...msgs,
        {
          text: response.data,
          formattedText: this.formatMarkdown(response.data),
          sender: 'ai',
          timestamp: new Date(),
        },
      ]);
      this.conversationHistory.update((h) => [
        ...h,
        { role: 'model', content: response.data },
      ]);
    },
    error: (err) => {
      // append error message to chat
    },
  });

Rendering AI Markdown Responses

Gemini returns responses in Markdown. A custom MarkdownUtils class converts the most common Markdown constructs to HTML. Critically, the raw text is HTML-escaped first to prevent XSS, and then Angular's DomSanitizer.bypassSecurityTrustHtml is used only after that sanitisation step:

export class MarkdownUtils {
  static formatMarkdown(text: string): string {
    if (!text) return '';

    // 1. Escape HTML first to prevent XSS
    let escaped = text
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');

    // 2. Then apply Markdown → HTML transformations
    // (headers, bold, italic, lists, paragraphs...)
    return result;
  }
}

// In the component:
private formatMarkdown(text: string): SafeHtml {
  const html = MarkdownUtils.formatMarkdown(text);
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

The template then binds the SafeHtml value using [innerHTML]:

@if (message.formattedText) {
  <div class="message-text" [innerHTML]="message.formattedText"></div>
} @else {
  <div class="message-text">{{ message.text }}</div>
}

Google Search Grounding

Sub-agents are configured with googleSearchRetrieval: {} in their ai.generate config. This tells Gemini to perform a live Google Search and use the results as grounding context before generating its response, therefore ensuring answers about restaurants, events, and routes are based on current, real-world data rather than the model's training data alone.

config: {
  googleSearchRetrieval: {},
}

Why only on sub-agents?

The orchestrator's role is to understand intent and route to the right specialist. It doesn't need live search data to do that. Enabling search grounding on the orchestrator would add latency and cost without benefit. The sub-agents are where domain-specific, up-to-date information matters.

Project Structure

concierge/
├── src/
│   └── app/
│       ├── components/
│       │   └── chat/                  # Main chat UI component
│       │       ├── chat.component.ts
│       │       ├── chat.component.html
│       │       └── chat.component.scss
│       ├── services/
│       │   └── core/
│       │       └── ai/
│       │           └── ai.service.ts  # Firebase callable wrapper
│       ├── models/
│       │   └── chat.model.ts          # ConversationMessage, Message interfaces
│       ├── utils/
│       │   └── markdown-utils.ts      # Markdown → HTML renderer
│       ├── app.config.ts              # Angular app config (Firebase, SSR)
│       └── app.routes.ts              # Route definitions
├── functions/
│   └── src/
│       ├── index.ts                   # All Genkit agents & Firebase Function export
│       └── system-prompt.ts           # System prompts for each agent
├── styles/
│   ├── _variables.scss                # Design tokens
│   ├── _typography.scss
│   ├── _buttons.scss
│   ├── _forms.scss
│   ├── _animations.scss
│   └── _utilities.scss
├── documentation/
│   └── conversation-context.md        # Deep-dive on history management
└── firebase.json                      # Firebase Hosting + Functions config

Conclusion

Building Concierge AI was an exercise in composing modern tools — Angular 20, Firebase, and Google Genkit — into a coherent, production-ready architecture. Each layer of the stack was chosen deliberately, and the patterns that emerged from that process are worth carrying into future projects.

What We Built

A fully functional, multi-agent AI chat application where:

A root orchestrator understands user intent and delegates to the right specialist.
Four sub-agents each bring focused expertise, grounded in real-time Google Search results.
The Angular frontend manages conversation state locally using signals, keeping the backend stateless and scalable.
The entire pipeline is secured, deployed, and served through Firebase.

Check out the project, Concierge AI, here: https://agents-concierge.web.app/
GitHub Repo: https://github.com/waynegakuo/concierge

Handling the "Flash of Unauthenticated Content" in Angular SSR

Wayne Gakuo — Wed, 28 Jan 2026 11:18:35 +0000

I ran into a peculiar bug lately. Users were briefly seeing a "Sign Up/Sign In" button appear in the UI when the page refreshed, even though they were already logged in. Despite my code being correct, the issue persisted. This led me to investigate the root cause, which I discovered was related to Server-Side Rendering and how it interacts with state management within my Angular application. Let me explain.

In modern web development, Server-Side Rendering (SSR) is essential for SEO and perceived performance. However, when combined with client-side authentication providers like Firebase (which I use in most of my projects), it can introduce a jarring UX issue: the Flash of Unauthenticated Content (FOUC).

In this article, we'll explore why this happens in Angular and how to solve it using platform-aware signals.

What is Flash of Unauthenticated Content?

It's a brief moment when content intended for a particular state, whether authenticated or not, appears on screen before the browser has determined the authentication status. It usually happens during Server-side rendering, which can lead to access of unauthorized content or user confusion.

The Problem: The "Sign In" Flicker

When a user refreshes a page on an SSR-enabled Angular app, the sequence of events often looks like this:

Upon loading of the page, the Sign Up/Sign In button appears briefly

Loading spinner appears to indicate the authentication state is being determined

State is determined and the user is able to see their profile details

The Server Render: The server (Node.js) executes your app. Since Firebase stores session data in the browser's IndexedDB, the server has no idea who the user is. It defaults to an "Unauthenticated" state.
The Delivery: The server sends HTML to the browser showing a "Sign In" button.
The Hydration: The browser renders that HTML instantly.
The Switch: A few milliseconds later, the client-side JavaScript boots up, Firebase finds the session, and the "Sign In" button suddenly swaps for a "Profile" icon.

This is how my initial implementation looked like:

This creates a "negative UX" where the interface feels unstable or broken.

The Solution: SSR-Aware States

The fix involves a paradigm shift: If the server doesn't know the auth state, it shouldn't guess. Instead, we force the server to render a "Loading" or "Pending" state, which remains active until the client-side environment can provide a definitive answer.

1. The Platform-Aware AuthService

We use Angular’s PLATFORM_ID and isPlatformBrowser to branch our logic. By keeping our isLoading signal set to true on the server, we prevent the UI from prematurely showing the login UI.

2. Implementing the UI Guard

In the component template, we use the isLoading signal to control what the user sees during that critical first second.

By leveraging Angular Signals, the transition from isLoading(true) to false is extremely efficient. Once the browser takes over and Firebase emits the auth event, the signal updates, and Angular's hydration process ensures the DOM updates seamlessly without a full re-render.

Key Takeaway

When working with SSR, "Loading" is a valid and often preferred initial state. It is far better to show a spinner for 200ms than to show a login button that disappears as soon as the user tries to click it.

Check out the project, Nova Reel, here: https://nova-reels.web.app/
GitHub Repo + Codelab: https://github.com/waynegakuo/nova-reel

Nova Reel is a web application for browsing, discovering, and getting personalized recommendations for movies and TV shows. It leverages Google's Gemini AI to provide intelligent recommendations based on user favorites. Built using Angular, AI orchestration is done using Genkit with Google's Gemini 3 Pro as the underlying LLM.

[Boost]

Wayne Gakuo — Thu, 22 Jan 2026 04:50:02 +0000

Cristian Sifuentes

Jan 20

Async Reactivity with Angular Resources — A Production‑Minded Guide (2026)

#angular #typescript #signals #rxjs

Comments

6 min read

[Boost]

Wayne Gakuo — Wed, 29 Oct 2025 19:48:14 +0000

Connie Leung

Oct 29 '25

Generating Multiple Images with NanoBanana and Firebase AI Logic in Angular

#angular #webdev #ai #gemini

Comments

5 min read

[Boost]

Wayne Gakuo — Sun, 28 Sep 2025 00:11:23 +0000

Mastering Angular Structural Directives - It’s all about the context

Robin Goetz for This is Angular ・ Jan 21 '23

#softwaredevelopment #fullstack #ai #blockchain

[Boost]

Wayne Gakuo — Wed, 17 Sep 2025 04:05:13 +0000

Signals Form: Introduction - DEV Community

Introduction and Disclaimer First and foremost, the APIs that will be mentioned in this...

dev.to

[Boost]

Wayne Gakuo — Thu, 28 Aug 2025 12:09:22 +0000

Architecting a Serverless Vision System with Gemini on Cloud Run - DEV Community

Have you ever wanted to build an intelligent application that can see and understand images? Yes? Me...

dev.to

[Boost]

Wayne Gakuo — Fri, 22 Aug 2025 21:52:27 +0000

Using Storybook with Angular and Vite 🎨

Brandon Roberts ・ Sep 26 '24

#angular #storybook

Building AI-powered e-commerce applications using Angular & Firebase AI Logic (formerly Vertex AI in Firebase)

Wayne Gakuo — Tue, 15 Jul 2025 09:34:17 +0000

The landscape of online shopping has undergone a dramatic transformation. From the early days of simple digital catalogs, e-commerce has evolved into a dynamic, personalized, and highly competitive space. Today, the next frontier in this evolution is the integration of Artificial Intelligence (AI), which promises to make online retail more efficient and intuitive than ever before. AI is rapidly becoming a pivotal force in automating repetitive tasks, personalizing user experiences, and ultimately, driving sales and customer satisfaction.

This article will guide you through building a modern, AI-powered e-commerce application using Angular for the front end and leveraging the capabilities of Google's Firebase AI Logic (formerly Vertex AI in Firebase). We will explore how to implement intelligent features by referencing code snippets from the "Bytewise" e-commerce application, a practical example I created, available on GitHub.

The Inevitable Rise of AI in E-commerce

Initially, e-commerce platforms focused on providing a convenient way to browse and purchase products. As the market matured, the focus shifted towards enhancing the user experience through features like customer reviews, wishlists, and basic recommendation engines. However, with the explosion of online stores and product variety, a new set of challenges emerged. Shoppers became overwhelmed with choices, and businesses struggled to differentiate themselves.

This is where AI steps in. By harnessing the power of machine learning and large language models (LLMs), e-commerce businesses can now:

Automate Customer Support: AI-powered chatbots can handle a vast range of customer inquiries 24/7, from order tracking to product questions, freeing up human agents to tackle more complex issues.
Personalize Shopping Experiences: AI algorithms can analyze user behavior, purchase history, and even real-time interactions to provide highly personalized product recommendations, search results, and marketing content.
Optimize Inventory and Pricing: Predictive analytics can forecast demand, helping businesses manage their stock levels more effectively and implement dynamic pricing strategies to maximize revenue.
Streamline Product Discovery: AI can power intelligent search functionalities that understand natural language queries, making it easier for customers to find exactly what they are looking for.

Introducing Firebase AI Logic: The Brains of Your E-commerce App

Firebase AI Logic is a powerful suite of tools that allows developers to easily integrate Google's cutting-edge generative AI models, like Gemini, directly into their web and mobile applications. It acts as a bridge between your application and powerful AI capabilities, handling the complexities of model deployment and scaling.

Firebase has evolved from "Vertex AI in Firebase" to the more robust "Firebase AI Logic," offering greater flexibility in building AI features. Developers can now use either the free Gemini Developer API or the Vertex AI Gemini API, and importantly, there's no need to include your Gemini API key directly in your app's code.

Gemini Developer API—billing is optional (available on the no-cost Spark plan).
Vertex AI Gemini API—billing is required (requires the pay-as-you-go Blaze plan).

Building an AI-Powered E-commerce App with Angular and Firebase

Let's dive into the practical aspects of building our AI-powered e-commerce application, "Bytewise." The application is built with Angular, a popular framework for creating dynamic single-page applications, and utilizes Firebase for its backend services, including Firebase AI Logic for its intelligent features.

You can find the complete source code for the Bytewise application on GitHub: https://github.com/waynegakuo/bytewise

About Bytewise

ByteWise is a fictional e-commerce platform that showcases electronic products with an integrated AI shopping assistant. The application features:

Product catalog with detailed product information
AI assistant that can answer questions about products
Voice recognition for hands-free interaction with the AI assistant
Shopping cart functionality
Responsive UI with modern design

Screenshot: ByteWise app in action

Setting Up the Project🚀

This article assumes familiarity with Angular and Firebase setup. For setup instructions, please refer to the "Setting Up Locally" section before cloning the project.
Alternatively, you can open the ByteWise project on Firebase Studio, which will provide you with a web-based IDE with the requirements provisioned, and follow along.

Firebase Project and Firebase AI Logic Setup 🔥

Next, you'll need a Firebase project with a web application configured. You will also need to enable Firebase AI Logic on your Firebase project.

Follow the directions in Step 1 to create a project and a web app. You do not need to add any SDK code snippets during this step, as this example project already includes them.

After creating your Firebase project, go to the Firebase AI Logic page in the Firebase console. Click "Get Started" and select "Get started with this API" for the Gemini Developer API. This API is preferable as it avoids the need to provide billing details.

Leave the Firebase Hosting checkbox unchecked. After obtaining your Firebase credentials (firebaseConfig), copy the entire contents; you'll need them in the next step.

Back in our codebase, in the environment.ts file, paste the contents of the Firebase configuration details into the firebaseConfig object.

// src/environments/environment.ts

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "<your-api-key>",
    authDomain: "<your-app-domain>",
    projectId: "<your-project-id>",
    storageBucket: "<your-storage-bucket-id>",
    messagingSenderId: "<your-message-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
  },
};

Install dependencies:

npm install

Running the Application 🏃‍♂️

With the configuration complete, you can now start the development server:

ng serve

This command will build your Angular application and start a local development server. You can then access the application in your web browser at http://localhost:4200

Core Architecture

Product State Management with Signals

The foundation of our system uses Angular's signal-based state management:

// src/app/services/product.service.ts

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private readonly products = signal<Product[]>([]);
  private readonly cart = signal<Product[]>([]);

  readonly cartCount = computed(() => this.cart().length);
  readonly totalPrice = computed(() => 
    this.cart().reduce((sum, item) => sum + item.price, 0)
  );

  constructor() {
    // Initialize with default products
    this.products.set([
      { id: 1, name: 'Laptop', price: 85000 },
      { id: 2, name: 'Smartphone', price: 35000 }
    ]);
  }

  getProducts() {
    return this.products();
  }

  addToCart(product: Product) {
    this.cart.update(current => [...current, product]);
  }

  clearCart() {
    this.cart.set([]);
  }
}

AI Service

One of the most common and effective uses of AI in e-commerce is a customer support chatbot. In the Bytewise application, we have a AiService that handles the interaction with the Firebase AI Logic.

// src/app/services/ai.service.ts

@Injectable({
  providedIn: 'root'
})
export class AiService {
  private readonly productService = inject(ProductService);
  private readonly model: GenerativeModel;
  private readonly chat: ChatSession;

  ...
}

This service utilizes Angular's dependency injection system to maintain a clean, modular architecture. The service manages both the AI model and chat session, creating a seamless interface between user interactions and AI responses.

AI Configuration and Tool Integration

The system defines specific e-commerce operations through a structured tool set:

// src/app/services/ai.service.ts

const productsToolSet: FunctionDeclarationsTool = {
  functionDeclarations: [
    {
      name: "getTotalNumberOfProducts",
      description: "Get the total number of products available in the store.",
    },
    {
      name: "getProducts",
      description: "Get an array of the products with the name and price of each product.",
    }
    // Additional function declarations...
  ]
};

This tool set enables the AI to perform specific actions within the e-commerce system, from checking inventory to managing shopping carts.

Strong Type Safety with Schema Definitions

Product data integrity is maintained through robust schema definitions:

// src/app/services/ai.service.ts

...

Schema.object({
  properties: {
    productsToAdd: Schema.array({
      items: Schema.object({
        properties: {
          name: Schema.string({
            description: "The name of the product.",
          }),
          price: Schema.number({
            description: "The numerical price of the product.",
          }),
        },
        required: ["name", "price"],
      }),
    }),
  },
})

...

This schema ensures that all product-related operations maintain data consistency and type safety.

Gemini Developer API Setup and System Instructions

The integration with Google's Gemini AI is configured with specific business rules:

// src/app/services/ai.service.ts

...

const geminiAI = getAI(this.firebaseApp, {backend: new GoogleAIBackend()});
const systemInstruction =
  "Welcome to ByteWise. You are a superstar agent for this ecommerce store..." ;

this.model = getGenerativeModel(geminiAI , {
  model: "gemini-2.0-flash",
  systemInstruction: systemInstruction,
  tools: [productsToolSet],
});

...

The code initializes a Gemini AI-powered chatbot for the e-commerce store, which will interact with the inventory system and shopping cart, and is equipped with tools to perform various shopping-related functions.

The systemInstruction property is crucial as it helps the AI model understand its context and maintain consistent formatting when interacting with users about products and prices in the ByteWise ecommerce store.

AI Interaction Processing

The system handles AI interactions through a sophisticated message processing system:

// src/app/services/ai.service.ts

...

async askAgent(userPrompt: string) {
  let result = await this.chat.sendMessage(userPrompt);
  const functionCalls = result.response.functionCalls();

  if(functionCalls && functionCalls.length > 0) {
    for (const functionCall of functionCalls) {
      switch (functionCall.name) {
        case "getTotalNumberOfProducts": {
          const functionResult = this.getTotalNumberOfProducts();
          // Process response
          break;
        }
        // Additional case handling...
      }
    }
  }
  return result.response.text();
}

...

The askAgent function takes a user's prompt (their question or message) as input, sends it to the Gemini model via Firebase AI Logic, and returns the model's generated text response.

Think of it as a smart assistant for an e-commerce store that can understand user requests and perform actions. Here's how it works:

1. Taking User Input:

When a user types something (like "How many products do you have?" or "Add this to my cart"), the method takes this message as a userPrompt
It sends this message to an AI chat system.

2. Checking for Actions:

The AI analyzes the message and decides if it needs to perform any specific actions (called "function calls")
For example, if you ask "How many products are there?", it will need to check the actual product count.

3. Handling Different Actions: The method can handle four main types of actions:

getTotalNumberOfProducts: Counts all products in the store
getProducts: Gets the list of all available products
clearCart: Empties the shopping cart
addToCart: Adds specific products to the cart

4. Completing the Conversation:

After performing any necessary actions, it sends the results back to the AI
The AI then forms a natural response to the user
This response is returned to be shown to the user

It's like having a helpful store assistant who can both answer questions and perform actions for you!

Service Integration in Components

Bringing it all together in the user interface:

// src/app/components/agent-window.component.ts


@Component({
  selector: 'app-agent-window',
  ...
})
export class AgentWindowComponent {
  private readonly aiService = inject(AiService);
  readonly productService = inject(ProductService);
  ....

  constructor() {
    this.productList.set(this.productService.getProducts());
    ...
  }

  async sendMessage(): Promise<void> {
    if (this.userInput.trim() === '') return;

    // Add user message
    this.messageHistory.update((history) =>
      [...history, { text: this.userInput, isUser: true }]
    );

    // Clear input
    const userQuestion = this.userInput;
    this.userInput = '';

   ...

    try {
      const response = await this.aiService.askAgent(userQuestion);
      this.messageHistory.update((history) => [
        ...history,
        { isUser: false, text: response }
      ]);
    } finally {
      // Set thinking state to false regardless of success or failure
      this.isThinking.set(false);
    }
  }

  ...
}

This component serves as the main interface for user-AI interaction in your e-commerce platform, providing a clean and intuitive chat experience while maintaining a reactive and performant implementation using Angular’s signals.

Conclusion

The integration of AI is no longer a futuristic concept in e-commerce; it's a present-day necessity for creating engaging, efficient, and personalized online shopping experiences. By combining the power of a versatile front-end framework like Angular with the accessible and powerful AI capabilities of Firebase AI Logic, developers can build the next generation of e-commerce applications.

The Bytewise example provides a solid foundation for understanding the practical implementation of these concepts. As AI models continue to evolve and become more sophisticated, the possibilities for innovation in e-commerce are boundless. The journey to a truly intelligent online store starts with embracing these powerful tools and reimagining what's possible in the world of online retail.

[Boost]

Wayne Gakuo — Thu, 29 May 2025 17:17:06 +0000

Brandon Roberts

Dec 8 '23

Faster testing with Angular and Vitest ⚡️

#angular #vite #testing

Comments 18

3 min read

[Boost]

Wayne Gakuo — Thu, 08 May 2025 18:54:11 +0000

Vivek Dudhatra

May 7 '25

🎟️ BookTheScene – An Event Booking Web App Built with Angular 19

#webdev #angular #typescript #programming

Comments 5

1 min read