ShopAccess AI

• 

  Landing Page where you choose your preferred language

• 

  Now inside the web app you communicate your needs either through voice access or by writing inside the chat biox.

• 

  This is the Shopaccess extension pair with the website by clicking connect and inserting the code generated .

• 

  Extension access granted , the chat box also indicates your conversations

• 

  The error messages comes up because you need permission to make a purchase

• 

  This is the permission page where you grant permission for acess.

• 

  Permission purchase needs to be saved

• 

  Now you can complete the purchase

• 

  Final confirmation page of purchase, where you proceed to the sandbox for complete purchase

Inspiration

Choosing a laptop for programming and demanding coursework can be surprisingly difficult. Specifications are confusing, prices vary, and product descriptions often leave out information that matters for AI and machine-learning workloads.

We wondered what would happen if an AI assistant confidently recommended a laptop without verifying its capabilities, then had access to the shopper's payment method.

That question inspired ShopAccess AI: a bilingual shopping assistant designed around a simple principle — AI can advise, but the shopper retains control over every purchase.

What it does

ShopAccess AI helps users find laptops through guided conversations in English or Spanish. Shoppers describe their needs, set a budget, and receive recommendations with explanations of each product's suitability.

The application includes: Guided shopping: The assistant asks follow-up questions and requires users to confirm their requirements. Evidence-aware recommendations: The server checks product specifications and budget constraints. Unverified AI hardware compatibility is clearly identified rather than guessed. Human-controlled checkout: A purchase requires explicit authorization for the exact item, quantity, maximum spending amount, and expiration time. Permissions can be revoked. Voice interaction: Browser-based speech recognition and read-aloud capabilities support conversational shopping. Chrome extension: A locally demonstrated browser side panel can connect to an approved conversation without receiving purchasing authority.

The demonstration uses a fixed laptop catalog, mock data, and simulated checkout. No real money changes hands.

A separate PayPal Sandbox integration supports test transactions. We completed a supervised Sandbox rehearsal with a verified test capture. Production payments are not enabled.

How we built it

We developed ShopAccess AI using Next.js 16, React 19, TypeScript, Tailwind CSS, and Zod.

The application separates AI-generated advice from server-enforced purchasing rules. Product identity, budget eligibility, quantity limits, authorization expiration, and checkout totals are validated by application logic rather than trusted to the language model.

The AI architecture supports a local demonstration assistant and an optional Qwen integration through Synthorai. Channel3 supports optional external product discovery, while browser Web Speech APIs provide voice capabilities.

We built a PayPal Sandbox adapter for testing order approval and capture verification. The Chrome extension uses Manifest V3 and an explicit pairing process, with restricted permissions.

The application is hosted on Render. We used Vitest, Playwright, TypeScript checks, and ESLint throughout development.

Challenges we ran into

One major challenge was preventing the AI from exceeding its authority. We designed purchase permissions around specific items and spending limits, then enforced those constraints on the server.

Another challenge was incomplete product information. Laptop listings often lack reliable evidence about AI workload compatibility. We chose to report uncertainty instead of producing unsupported recommendations.

Voice recognition also behaved differently across browsers and devices. Developing the Chrome extension introduced separate challenges around pairing, access restrictions, and testing native browser interfaces.

We also had to distinguish clearly between simulated purchases, PayPal Sandbox testing, and features intended for future production use.

Accomplishments that we're proud of

We implemented a shopping workflow where the AI cannot independently authorize a purchase. The shopper must approve a specific transaction within defined limits.

Our recommendation system explicitly identifies missing evidence, particularly for AI hardware suitability.

We developed a bilingual interface with voice support, a restricted Chrome extension demonstration, and a separate PayPal Sandbox testing path.

The project also includes approximately 140 test files covering application behavior and supporting infrastructure.

What we learned

Building ShopAccess AI taught us to separate model recommendations from application authority. A conversational assistant can be useful without having unrestricted access to purchasing operations.

We also learned that uncertainty should be communicated directly to shoppers and that payment authorization requires precise, testable boundaries.

What's next for ShopAccess AI

Our next steps include testing accessibility with real users, validating persistent PostgreSQL storage, and integrating merchant catalogs with verified hardware information.

We also plan to expand Chrome extension compatibility and conduct further security reviews before considering production payment processing.

Our longer-term goal is to apply the same human-controlled authorization model to additional shopping categories.

Built With

• and-chrome-extensions.-confirm-the-exact-stack-before-adding-paypal
• channel3-api
• chrome
• javascript
• likely-tags-include-javascript
• next.js
• node.js
• one-tag-at-a-time.-based-on-our-work
• paypal-sandbox
• playwright
• postgresql
• qwen
• react
• render
• synthorai
• tailwind-css
• typescript
• vitest
• web-speech-api
• zod