Building an AI Boutique Assistant with Google Custom ADK and React UI

This article is written for GKE turns 10 hackathon

With BoutiqueAI Assistant, I built a complete conversational shopping system powered by Google ADK, Gemini LLM (Function Calling), and FastAPI — all integrated with 9 gRPC microservices from Google’s Online Boutique demo app.

This post walks through the architecture, features, demo flow, and how you can try it locally or on GKE.

Architecture Overview

Data Flow:

1. 
   User Request → React Frontend → FastAPI Backend
   


2. 
   AI Processing → Google ADK Agent → Gemini API
   


3. 
   Microservice Calls → gRPC Client → 9 Microservices
   


4. 
   Response Assembly → Backend → Frontend → User
   

Communication Patterns:

• Frontend ↔ Backend → REST (JSON)
  


• Backend ↔ AI → Google ADK + Gemini API
  


• Backend ↔ Microservices → gRPC (Protocol Buffers)
  


• Infra → Kubernetes service discovery
  

Key Features

AI Shopping Assistant

• Natural language search
  


• Price filtering (“Show me gifts under $50”)
  


• Intelligent recommendations (“You may also like…”)
  


• Product ads (contextual, clickable)
  


• Chat interface for full shopping flow
  

E-Commerce Capabilities

• Browse/search catalog
  


• Add/remove from cart
  


• Checkout & payment (test mode)
  


• Order confirmation with product images
  


• Currency conversion
  


• Shipping quotes & processing
  


• Email confirmations
  

Modern UI/UX

• Responsive React + Tailwind CSS
  


• Smooth animations (Framer Motion)
  


• Product cards with “Add to Cart”
  


• Polished order confirmation screens
  

Product Demo Flow

1. Welcome Page → clean chat interface
   
   
   




2. Product Search → conversational queries with product cards
   
   
   




3. Recommendations & Ads → context-aware suggestions
   
   
   




4. Add to Cart & View Cart → visual cart with totals
   
   
   




5. Checkout → simulated payment + order email
   
   
   




6. Order Confirmation → professional confirmation with product details
   
   
   

Tech Stack

Frontend

• React 18, Tailwind CSS, Framer Motion
  


• Heroicons, ReactMarkdown, Axios
  

Backend

• Python 3.9+, FastAPI, Uvicorn
  


• Google ADK (Agent Development Kit)
  


• gRPC + Pydantic
  

Microservices (from Online Boutique)

• Product Catalog (3550)
  


• Cart (7070)
  


• Recommendation (8080)
  


• Shipping (50052)
  


• Currency (7000)
  


• Payment (50051)
  


• Email (5000)
  


• Checkout (5050)
  


• Ads (9555)
  

Quick Start

1. Clone & Setup

git clone https://github.com/arjunprabhulal/ai-botique-assit

cd botiq-ai-assist



# Backend

pip install -r requirements.txt



# Frontend

cd frontend && npm install && cd ..

2. Start Everything (Recommended)

utilities/start_local_dev.sh

This will:

• Port-forward gRPC services
  


• Start backend (FastAPI + AI agent)
  


• Start frontend (React)
  

Access the app:

• Frontend → http://localhost:3000
  


• Backend API → http://localhost:8000
  


• API Docs → http://localhost:8000/docs
  

3. Stop Services

utilities/stop_local_dev.sh

AI Agent Functions

The Google ADK agent exposes gRPC functions like:

• 
  Product Catalog → list_products, search_products, get_product
  


• 
  Cart → add_item_to_cart, get_cart, empty_cart
  


• 
  Order Processing → place_order, initiate_checkout
  


• 
  Shipping & Payment → get_shipping_quote, ship_order, charge_card
  


• 
  Extras → list_recommendations, get_ads, convert_currency, send_order_confirmation
  

Deploying to GKE

For production deployment:

export PROJECT_ID="your-project-id"

utilities/prepare_deploy.sh```

{% endraw %}





This script:



- Switches to Kubernetes mode  

- Builds & pushes Docker images ({% raw %}`linux/amd64`{% endraw %})  

- Deploys to GKE with rolling updates  

- Prints external access URL  





## For production deployment:

{% raw %}





```bash

export PROJECT_ID="your-project-id"

utilities/prepare_deploy.sh

Dev Workflow

Local Dev:

utilities/start_local_dev.sh  

utilities/stop_local_dev.sh

Deployment:

export PROJECT_ID="your-project-id"

utilities/prepare_deploy.sh

Switch Environments:

utilities/toggle_grpc_urls.sh local   # local mode

utilities/toggle_grpc_urls.sh k8s     # k8s mode

Code Repo : https://github.com/arjunprabhulal/ai-botique-assit