-
-
Unified Advisor Workspace The advisor receives the vehicle, conversation history, product image, voice, and live text in one view.
-
Smart Vehicle Search Describe a vehicle in natural language to begin a guided search for compatible batteries.
-
Product Selection and Quote Cart Compare compatible options, select a battery, and add it to an informational quote cart.
-
Human Handoff Without Losing Context Customers can start a live voice session while preserving the conversation and selected product.
-
WebMCP Updates the Storefront Gemini invokes native WebMCP functions to update the visible product catalog in real time.
-
Mobile-First AI Guidance A responsive bottom sheet keeps the AI assistant and product catalog accessible at the same time.
Inspiration
Product search is usually where an online purchase begins—and often where it breaks down.
A customer may know their vehicle but not the battery size, capacity, polarity, or specifications they need. A traditional search bar expects the right keywords and returns a list of products. If the customer still has questions, they must switch to chat or call support and explain everything again.
Small and medium-sized businesses face the same problem across many industries, but building intelligent search, conversational guidance, and human support as separate systems is expensive.
That inspired Search-to-Sale: a platform concept that turns product discovery into a guided sales journey. BateríasPower is our working automotive-battery implementation.
What it does
The customer starts by describing a vehicle in plain language, for example:
Toyota Corolla 2018 motor 1.8
Gemini understands the request, while native WebMCP functions perform structured actions inside the browser. The customer can see the catalog update as the agent:
- Searches for compatible batteries.
- Explains and compares available options.
- Selects a product.
- Prepares an informational quote cart.
- Keeps the conversation and storefront synchronized.
When the customer wants human assistance, they can start a bidirectional voice handoff without leaving the website. Text chat remains available during the call.
The advisor receives the vehicle, conversation history, selected battery, price, and product image. The customer does not need to start over.
Our product thesis is:
$$ \text{Search} + \text{AI Guidance} + \text{Human Expertise} = \text{Sale} $$
The current demo stops before payment: it prepares an informational cart but does not create orders or charge customers.
How we built it
We built two connected experiences:
- A customer-facing product catalog and AI assistant.
- A dedicated workspace for the human advisor.
The storefront and advisor interface use Next.js, React, and TypeScript. Gemini and Google ADK handle intent and agent orchestration.
Instead of asking the model to simulate clicks, we expose deterministic catalog operations as native WebMCP functions. These functions search compatibility, compare batteries, change the selected product, and update the cart. Because they share application state with the storefront, every tool call produces a visible result.
For human handoff, we built a standalone workflow using LiveKit. It supports bidirectional audio and text while transferring the relevant conversation and product context to the advisor.
The application is deployed on Google Cloud Run, with a locally packaged product catalog so the public challenge demo is self-contained.
Challenges we ran into
The hardest part was not generating a recommendation. It was keeping several states consistent:
- What the customer sees in the catalog.
- What the AI knows from the conversation.
- Which product is currently selected.
- What the human advisor receives during handoff.
We also had to make the experience work on mobile without letting the chat cover the product catalog. We solved this with a collapsible bottom sheet that keeps both experiences within reach.
Voice introduced a different set of challenges: microphone permissions require a secure browser context, and the customer and advisor must join the same LiveKit room with limited tokens and synchronized call state.
Finally, the handoff needed to include more than audio. We transferred the vehicle, chat history, selected product, price, and image so the advisor could continue the interaction immediately.
Accomplishments that we're proud of
We built and deployed a complete working journey:
- Natural-language vehicle search.
- Native WebMCP actions that update the visible storefront.
- Product comparison and selection.
- An informational quote cart.
- A responsive mobile agent experience.
- Bidirectional voice and text handoff.
- Conversation and product-context transfer.
- A dedicated advisor workspace.
- A public demo running on Google Cloud Run.
We are especially proud that the AI does not operate behind the scenes. Customers can see what it changes, maintain control of the interface, and involve a human when needed.
What we learned
WebMCP becomes especially useful when the user remains in the interface and can verify each agent action.
Structured browser functions were more predictable than relying on simulated navigation or DOM interpretation. They also allowed the AI conversation and traditional interface to share the same state.
We also learned that human handoff is not simply a fallback. It is part of the product experience. A handoff becomes substantially more valuable when the advisor receives the context already collected by the AI.
Better search helps customers find products. Search combined with explanation, visible actions, and human expertise helps them make decisions.
What's next for Search-to-Sale
BateríasPower is our first vertical implementation. The broader goal is to make the same Search-to-Sale model reusable by other SMB ecommerce businesses.
Next, we plan to:
- Build a lightweight JavaScript SDK that existing ecommerce websites can install with a single script tag.
- Connect each website's product catalog and UI actions to Search-to-Sale.
- Add WebMCP-powered search, conversational guidance, and human handoff without requiring businesses to rebuild their storefront.
- Connect the informational cart to inventory and checkout APIs.
- Integrate pricing and availability with ERP systems.
- Add persistent and authenticated customer sessions.
- Expand vehicle and product compatibility data.
- Add production-grade advisor routing and notifications.
- Measure search completion, handoff, and conversion outcomes.
- Package integrations for popular ecommerce platforms.
Our goal is to make Search-to-Sale installable on an existing ecommerce website through a lightweight JavaScript SDK—bringing AI-guided product discovery and human assistance to the storefront businesses already have.
Our long-term vision is straightforward: give smaller online businesses the kind of guided sales experience that today is usually available only to large commerce platforms.
Built With
- a2a-protocol
- docker
- eslint
- fastapi
- gemini
- google-adk
- google-cloud
- google-cloud-logging
- google-gen-ai-sdk
- googleadk
- lucide-react
- next.js
- opentelemetry
- pydantic
- pytest
- python
- react
- ruff
- typescript
- uvicorn
- vertex-ai
- vitest
- webmcp
Log in or sign up for Devpost to join the conversation.