AgentCart

An autonomous AI Personal Shopper that turns natural voice or text requests into live cross-merchant product comparisons in AG Grid and instant PayPal checkouts.

Comment

Inspiration

Online shopping has become increasingly fragmented. Finding a single product that fits a specific budget and feature set usually requires opening dozens of retailer tabs, manually comparing specifications, and navigating repetitive checkout flows. We wanted to reimagine e-commerce through Agentic Commerce—where a shopper can simply speak or type what they need in plain language, have an autonomous AI agent discover and compare live cross-merchant inventory, and complete a trusted payment in a single unified interface.

What it does

AgentCart is an autonomous AI Personal Shopper that turns conversational text or voice requests into curated product comparisons and instant PayPal checkouts:

  • Voice & Natural Language Shopping: Users can type a request (e.g., "Find 4K monitors under $300") or use the built-in Web Speech API microphone button to speak their shopping intent hands-free.
  • Autonomous Product Discovery & Reasoning: An AI agent powered by Google Gemini function calling parses user constraints (category, features, maximum budget) and queries the Channel3 Search API to retrieve real-time cross-retailer product listings, images, and pricing.
  • Interactive AG Grid Comparison: Shortlisted products are displayed alongside an AI Shopper Analysis summary inside a sortable, filterable AG Grid table so users can compare specifications and prices at a glance.
  • One-Click PayPal Sandbox Checkout: Every row in the grid features an embedded PayPal JavaScript SDK checkout button wired to PayPal's REST Orders v2 API, enabling instant order creation, buyer approval, and capture with a verified transaction receipt.

How we built it

  • Frontend (client/): Built with React and Vite using a crisp PayPal-inspired light fintech theme. We integrated AG Grid (ag-grid-react) with custom cell renderers for product thumbnails and embedded @paypal/react-paypal-js checkout buttons, alongside the browser-native Web Speech API for zero-latency voice input.
  • Backend (server/): Built with Node.js and Express. Our /api/chat endpoint orchestrates Google Gemini function calling (search_products) with the Channel3 API to fetch and summarize live product matches. Our /api/create-order and /api/capture-order endpoints authenticate via OAuth2 against PayPal Sandbox Orders v2 to securely process payments.
  • Deployment: Deployed end-to-end on Render as a split full-stack architecture (an Express Web Service backend paired with a Vite/React Static Site frontend).

Challenges we ran into

  • Rendering PayPal Checkout Inside Dynamic Table Cells: Embedding interactive PayPal buttons directly inside AG Grid rows required tuning row heights, horizontal button layouts, and per-row order state so each product triggers an independent PayPal Sandbox order without clipping or overlapping.
  • Connecting Separate Static Frontend and Backend Services on Render: Handling cross-origin POST requests between our Render Static Site and Render Web Service required configuring explicit backend API base URLs and CORS headers rather than relying on static GET-only rewrite rules.
  • Low-Latency Agentic Tool Calling: Balancing conversational reasoning with fast product retrieval required structuring concise Gemini tool schemas so Channel3 search results and AI summaries return within seconds.

Accomplishments that we're proud of

  • Delivering a complete end-to-end voice-to-checkout agentic shopping flow in one screen—from spoken query to PayPal Sandbox transaction capture.
  • Combining Gemini AI, Channel3, AG Grid, PayPal Orders v2, and Render into a responsive, production-deployed application.

What we learned

We gained hands-on experience designing reliable function-calling pipelines for commerce, integrating PayPal's Orders v2 API and React SDK into data-dense AG Grid interfaces, and deploying decoupled full-stack AI applications on Render.

What's next for AgentCart

  • Multi-Item Agentic Carts & Price Tracking: Allowing the agent to bundle complementary items across merchants into a single PayPal order and alert users when tracked items drop below target prices.
  • Personalized Preference Memory: Remembering user brand preferences, sizing, and past purchase constraints across shopping sessions.

Built With

Share this project:

Updates

Submission history