Stylish: AI-Powered Outfit Generator
Inspiration
We wanted a way to give our customers inspiration when they are on a clothing website. A lot of times, people feel overwhelmed by the amount of new apparrel or different styles of clothes, so we implemented a service that gives users a preview from the clothing site that they are on, of a style or era that they are thinking of.
$$ \text{Goal: } \min(\text{Returns}) \quad \text{while maximizing} \quad \text{Customer Confidence} $$
What it does
Stylish allows users to:
- Upload a picture of themselves.
- Generate AI-powered outfit recommendations based on preferences of theme or fashion era.
- See realistic virtual try-ons directly on their own body.
- Purchase items easily through Shopify integration.
How we built it
- Frontend: React + Tailwind.
- Backend: ExpressJS connected to Shopify APIs.
- AI Layer: OpenAI image + text generation for outfit styling and try-on.
- Deployment: Vercel for frontend, Render for backend.
We used Shopify’s Storefront API to fetch product data (edges + nodes GraphQL pattern) and OpenAI’s image APIs to overlay clothing suggestions onto user images.
Challenges we ran into
- Getting realistic try-ons required fine-tuning prompts and debuggin.
- Handling image uploads securely while keeping inference fast.
- Using GraphQL with shopify's storefront API
Accomplishments that we're proud of
- Built a working prototype in < 36 hours.
- Got a pretty good try on preview.
- Designed a smooth Shopify integration .
What we learned
- How to work with Shopify’s GraphQL schema (edges/nodes).
- How to prompt engineer to control generative image outputs.
- The importance of user experience design.
What's next for Stylish
- Spectacles From snapchat with AR try-on.
- Using to include accessories + footwear.
- Leveraging Shopify Remix + Polaris for merchant dashboards.
Built With
- cohere
- graphql
- javascript
- next.js
- openai
- shopify
- typescript

Log in or sign up for Devpost to join the conversation.