BoutiqueAI Assist using ADK + Function Calling + React UI

BoutiqueAI Shopping Assistant is personalized shopping concierge. Instead of scrolling endlessly, users get curated product recommendations in real time.

Comment

Inspiration

For the GKE Hackathon, I wanted to build a conversational shopping assistant that understands natural language and provides visual product experiences by eliminating the need to scroll through endless product pages.

My inspiration came from three key observations:

  • Shopping should feel like talking to a knowledgeable store assistant - natural, helpful, and personalized
  • Visual experiences matter more than text descriptions - customers want to see products, not just read about them
  • AI-driven service orchestration - users interact with a single intelligent assistant that seamlessly coordinates cart services, product catalogs, payment systems, and shipping APIs while staying context-aware

I wanted to showcase how Google Kubernetes Engine could orchestrate complex microservices architectures using Google ADK, Function Calling, and Gemini LLM with a simple, clean architecture which is uploaded already https://github.com/arjunprabhulal/ai-botique-assit/blob/main/images/Architecture-Online-Boutique-AI-Assit.png

My inspiration came from three key observations:

  • Shopping should feel like talking to a knowledgeable virtual store assistant - natural, helpful, and personalized
  • Visual experiences matter more than text descriptions - customers want to see products, not just read about them instead scrolling multiple pages (PLP , PDP pages)
  • AI-driven service orchestration - ensures users interact with a single intelligent assistant, seamlessly coordinating cart services, product catalogs, payment systems, and shipping APIs all while staying context-aware and delivering personalized recommendations

I wanted to showcase how Google Kubernetes Engine could orchestrate complex microservices architectures to deliver seamless user experiences using Google ADK , Function Calling and Gemini LLM keeping it simple and less complex architecture.

What it does

BoutiqueAI Assistant is an AI e-commerce chat interface that transforms online shopping into a natural conversation. Users can:

  • Search products naturally: "Find me some sunglasses" returns beautiful visual product cards
  • Manage their cart visually: Rich cart views with product images, prices, and quantities
  • Complete purchases seamlessly: Checkout forms with order confirmation and tracking
  • Get smart recommendations: AI-powered product suggestions based on browsing behavior
  • Handle multi-currency: Currency conversion for international shoppers
  • Receive order updates: Email notifications and shipment tracking

Instead of verbose text responses, the AI intelligently displays visual components: product cards instead of descriptions, rich cart views instead of item lists, and professional order confirmations.

How I built it

Microservices Architecture on GKE

I leveraged Google Kubernetes Engine to orchestrate 9 microservices from Google's Online Boutique demo, each running in isolated containers:

AI Agent Layer

Built using Google's Agent Development Kit (ADK) with FastAPI:

  • Function calling to orchestrate microservice interactions
  • gRPC client integration for all 9 services
  • Natural language understanding with Gemini LLM
  • Context-aware conversation management

High-Performance Communication

Implemented gRPC with Protocol Buffers for service communication between the AI agent and microservices.

Modern Frontend

Built with React + Tailwind CSS featuring:

  • Smart message detection that renders visual components based on AI response data
  • Responsive design for mobile and desktop shopping
  • Real-time cart synchronization with microservices
  • Product cards, cart views, and order confirmations

Technology Stack

  • Backend: Python + FastAPI + Google ADK + gRPC
  • Frontend: React 18 + Tailwind CSS + Framer Motion
  • Infrastructure: Google Kubernetes Engine (GKE)
  • Communication: Protocol Buffers + gRPC

Challenges I ran into

1. Microservices Orchestration Complexity

Coordinating 9 different GKE services with varying response times was challenging. Services needed to be called in specific sequences (e.g., get cart → get product details for each item).

Solution: Built a unified data processing layer in the AI agent that intelligently batches and normalizes service responses.

2. User Experience vs. Technical Complexity

AI responses were initially verbose and duplicated information already shown in visual components.

Solution: Developed smart message detection in React that conditionally renders visual components instead of redundant text.

3. Real-time State Synchronization

Shopping carts needed to stay synchronized across multiple service calls and UI updates.

Solution: Implemented API-driven state management where the AI agent automatically fetches related data in the correct sequence.

4. GKE Service Discovery & Development Workflow

Developing locally while integrating with remote GKE services required careful port-forwarding management.

Solution: Created automated scripts for development port-forwarding and implemented proper service discovery for production deployment (e.g., productcatalogservice.default.svc.cluster.local:3550).

Accomplishments that I am proud of

Production-Ready Microservices Integration

Successfully integrated 9 real microservices running on GKE - not mock APIs. Each service handles specific e-commerce functions with proper error handling.

Intelligent UI Decision Making

The frontend doesn't just display data - it intelligently decides whether to show visual components or text based on the AI response structure, creating a natural shopping experience.

Complete E-Commerce Flow

Built the entire shopping journey from product discovery to order confirmation:

  • Natural language search → Visual product cards
  • Cart management → Rich cart visualization
  • Checkout process → Forms with order confirmation
  • Order completion → Summaries with tracking IDs

Responsive Design

Created a shopping experience that works on both mobile and desktop with auto-scrolling chat, touch-friendly product cards, and adaptive layouts.

What I learned

Protocol Buffers & gRPC Benefits

  • Type safety: Strongly typed message definitions prevent runtime errors
  • Performance: Binary serialization is faster than JSON for microservices communication
  • Code generation: Automatic client/server stub generation

AI-Driven Application Architecture

  • Function orchestration: Making AI agents intelligently combine multiple services
  • Context management: Maintaining conversation state across complex service interactions
  • Response optimization: Balancing detailed technical data with user-friendly presentations

Modern Frontend Patterns

  • Smart component rendering: When to show visual components vs. text responses
  • API-driven state management: Letting backend intelligence drive frontend behavior
  • Responsive e-commerce design: Creating mobile-first shopping experiences

What's next for BoutiqueAI Assistant

Enhanced AI Capabilities

  • Voice integration: Add speech-to-text for hands-free shopping
  • Visual search: Upload images to find similar products
  • Personalization: User preference learning and behavior-based recommendations

Advanced E-commerce Features

  • Social features: Reviews, ratings, and social shopping

Scale & Performance

  • Caching strategies: Redis integration for faster product lookups

Built With

Share this project:

Updates