This content originally appeared on DEV Community and was authored by Arjun Prabhulal
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:
- User Request → React Frontend → FastAPI Backend
- AI Processing → Google ADK Agent → Gemini API
- Microservice Calls → gRPC Client → 9 Microservices
- 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
Welcome Page → clean chat interface
Product Search → conversational queries with product cards
Recommendations & Ads → context-aware suggestions
Add to Cart & View Cart → visual cart with totals
Checkout → simulated payment + order email
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
This content originally appeared on DEV Community and was authored by Arjun Prabhulal