ShopPal

ShopPal is an AI shopping agent: describe what you want, it searches real stores, compares the top picks, and you check out with PayPal. Works on the web or as a floating desktop panel over your apps.

Comment

Inspiration

When I was thinking of a project for the hackathon, it was also Halloween, and I was shopping for a costume: a chicken onesie, for Chicken Joe from Surf's Up. On top of that, I had a lot of work to do. So I thought, why not build something that finds the best options for exactly what I want, within my budget?

What it does

You tell ShopPal what you're looking for in plain words, like "a gift for a coffee lover under $50." It searches real online stores, picks the three best matches, explains why each one fits, and recommends one. You can ask follow-up questions or have it compare options. When you've decided, it shows a checkout card, and you pay with PayPal yourself. The AI never charges you on its own.

How I built it

I built ShopPal with a Node.js and Express backend and a plain HTML, CSS and JavaScript frontend. I used Claude Code as an AI coding assistant to help scaffold and write the code, then tested, refined, and directed the design myself.

  • AI agent: Inside the app, the Claude API runs as an agent on the server. It decides when to search for products with the Channel3 API, compare them, and set up a checkout.
  • Payments: Checkout uses PayPal's Orders API in sandbox mode, and the server looks up every price itself so the browser can't change it.
  • Desktop app: I packaged the same app with Electron as a floating desktop panel.
  • Reliability: Mock modes keep the demo working even without API keys.

Challenges I ran into

  • Inconsistent API docs: Channel3's docs showed the price field two different ways, so I wrote a converter that handles both.
  • PayPal popups on desktop: PayPal's login popup was tricky inside the desktop app, because it opens a blank window before loading PayPal. I had to explicitly allow those windows, and I added a pay-in-your-browser fallback in case the popup failed.
  • Keeping the AI and the UI in sync: Getting Claude's written recommendations to match the product cards on screen was hard. I fixed it by giving the agent a dedicated tool for choosing which products to display.
  • Demo reliability: I wanted the demo to work even if an API key was missing or the Wi-Fi dropped, so I built mock versions of every service.

Accomplishments that I'm proud of

  • ShopPal goes all the way from a casual sentence to a completed PayPal checkout in one conversation, with recommendations based only on real product data.
  • The same codebase runs as both a web app and a floating desktop panel, which you can shrink into a small bubble and keep on top of your other apps.
  • It's safe and honest: the AI can never charge you on its own, the server sets every price, and the app clearly labels that payments run in sandbox mode.

What I learned

  • Giving an AI agent a small set of clear tools works better than one big prompt. A dedicated tool for choosing which products to display is what kept Claude's answers and the product cards in sync.
  • Important decisions belong on the server. The AI suggests a checkout, but the server sets the price and the user confirms the payment, which makes the agent safe to trust with money.
  • Building mock modes early paid off, because I could test the full flow before every API key was working.

What's next for ShopPal

  • Real fulfillment: Right now payments go to my PayPal sandbox account. The next step is connecting ShopPal to retailers through a merchant or agentic-commerce integration so it can place actual orders.
  • User accounts: so ShopPal can remember your sizes, budgets and favorite brands.
  • Price tracking: alerts when something you want drops in price.
  • Longer term: shopping by photo, and comparing prices from several retailers side by side.

Built With

Share this project:

Updates

Submission history