ToolSmith

Inspiration

We wanted to make navigating a website like Grainger's more convenient and easier than ever using AI to help the user find items that can fit the needs of every project out there.

What it does

It is an AI-powered procurement tool that helps construction and industrial professionals build optimized project plans using real products from Grainger.com. Describe your project, set a budget, and let AI recommend the best tools and materials, all with live pricing, images, and direct links to purchase.

How we built it

We used next.js for the frontend and ease of access to a localhost website, supabase for an easy to use PostgreSQL database, and figma to design the website for ToolSmith.

Challenges we ran into

Web scraping through Grainger.com was not allowed, so we manually parsed through a variety of products ranging from electrical, plumbing, renovation, etc. to have something to feed the AI when asked for a recommendation by the user. We also had to find a free AI model in Gemini-2.5-flash so we wouldn't get charged credits/billing for running it.

Accomplishments that we're proud of

The frontend to backend integration works smooth, with efficient RESTful APIs that make using the website efficient for any users, and the aesthetic interface makes navigating it so much easier

What we learned

Coding is hard. Learning to use new technologies and view documentation is easier said than done, but persevering through faced adversity as a team was the key to an efficient program.

What's next for ToolSmith

We're looking to expand the scope of the project by adding more features like more specific search filters, spell checker for the AI prompt and get more items in the database

Built With

python

Submitted to

SparkHacks 2026
- Winner Grainger Challenge: Best User Experience Design

Created by

I integrated the AI aspect by using a Google AI API key and incorporating the Gemini-2.5-flash model to interpret Supabase queries and recommend possible products to the user. Also worked on the frontend to backend fetch calls

Diego Flores
I led the frontend architecture and user experience design, focusing on creating an interface that makes project planning intuitive and decision driven. One of my primary contributions was building a scalable component-based UI system. I developed reusable product cards, global project state, and cart management using React context, ensuring consistent behavior across the AI builder and checkout experience. I also integrated our Supabase backend into the frontend, allowing for product loading, live pricing, image rendering, and external Grainger links.

Logan Loch
I worked on alot of stuff!!!!

Ammar Bahrainwala
I designed how UI looks like on figma and planned out the whole design. I then applied it to the front end and designed it to make it more pleasing to the eye and have also took charge in ensuring all the features were accessible as well as planning the color scheme and logo.

Deepikka Natarajan
I worked on back-end development specifically with data amalgamation and cleaning. Used Supabase for the first time to host our database and created a pipeline for our API to fetch data. Also supported some Front-end development!

Angelo Guerrero