Inspiration
Every salon visit starts the same way: you show the stylist a photo of someone else. It's another face, with other hair, so nobody really knows if it'll work on you, how many services it takes, or what it'll cost, until you're already in the chair.
The salon is guessing too. They find out your hair type, how frizzy it is and how much length you have when you sit down. By then the slot is booked for the wrong length of time, the products may not be in, and the stylist on shift might not be the one who's best at the look.
What it does
Chairside is a widget a salon adds to its booking page with one line of HTML. It works for both sides.
For the person in the chair
- Four guided photos on the phone: front, right, left and chin down. MediaPipe checks the angle and face size on the device first, and names the photo to retake, so a bad photo never costs an API call.
- Readings, each labelled "Measured by YouCam": curl pattern (1 to 4C) and frizz from three angles, length, density, skin (acne, texture, dark circles, radiance) and face shape.
- Pick one of 40 looks. "Picked for you" puts the looks that suit your face shape first. The look is tried on your own face.
- The route. Chairside works out every service it takes to get from your hair today to that look: a cut, rebonding, a perm, keratin, colour, extensions, or months of growth. It knows that curls shrink: straightened, curly hair hangs about one length longer. When a look isn't possible, it says "not possible" instead of selling it.
- Recommendations, one at a time, each with the reason (e.g. "YouCam read your hair as loose to medium curls; this look is straight", so rebonding) and an Add or Skip button. Skin add-ons only appear when a score is below 85.
- After everything: the new look plus treated skin.
- The cart: every service, the total price and the hours, then a booking. For the sample customer going curly to long straight: cut, rebonding and two skin add-ons, Rs 30,000, about 6 hours.
For the salon
- They know who's walking in: photos, hair readings and the agreed plan come with the booking.
- They can prepare: the right chemicals ready, and a slot booked for how long the work really takes (rebonding is 4 hours, not 45 minutes).
- The right stylist on the day: a curl specialist for a perm, a colourist for balayage.
- Bigger tickets, earned: every add-on has a reason and a Skip button, so customers trust the bill.
- Fewer redos: expectations are set before the cut, with a preview the customer already agreed to.
Try it
Open the live demo on a phone. Try a sample customer walks the whole flow on saved real results and costs nothing; please start there. Start with my photos runs a real reading on your own face (2 per visitor per day). The salon embed is at /salon.
What each AI reading decides
| Reading (YouCam API) | What it decides |
|---|---|
| Hair type, 3 angles | perm vs rebonding vs keratin |
| Frizz, 3 angles | anti-frizz gloss or curl hydration |
| Length | cut, extensions, or months of growth |
| Density | only a soft note and a dermatologist referral |
| Skin analysis | which facial, if any (only scores below 85) |
| Face attributes | "Picked for you" looks by face shape |
| Hairstyle try-on | the look on the customer's own face |
| Skin simulation | the "after everything" picture |
Testing the hair APIs before building
Before writing the planner I spent 40 units testing YouCam's hair features on stock photos, to know which readings were safe to build on:
| Feature | What it returned | Verdict |
|---|---|---|
| Hairstyle try-on (v2.1, 116 templates) | 4 of 4 realistic: buzz cut, textured crop, waves, bald to full hair | Excellent; some templates also recolour the hair |
| Hair type (3 angles) | a curly woman read as "3A-3B Loose to Medium Curls" | Correct |
| Frizziness (3 angles) | the same woman read as "Frizzy" | Correct |
| Length | 5 of 6 sensible; shoulder-length curls read as "short hair" | Good |
| Density (head tilted down) | thick short hair "Low 1.17", messy waves "Low 0.87", an afro "Medium 1.97" | Weak: skews low, doesn't separate thick from thin |
That table decided the product: type, frizz and length drive real recommendations; density only ever produces a soft note and a dermatologist suggestion. Errors cost 0 units, which is how I found the photo rules (face at 50 to 80% of the frame width, sides at about 45 degrees, front, right, left in that order) before building the camera step around them.
The planner, in code
The rules a stylist knows live in one tested file, route.ts. Curl shrinkage is the one a naive planner gets wrong:
// Curl shrinkage: straightening curly hair drops it about one length class; curling straight hair lifts it.
if (d >= 1 && ORDER.indexOf(cur) >= 2) {
curLen = Math.min(5, curLen + 1);
lenWord = "Straightened, your hair would be";
notes.push("Curls shrink. Straightened, your hair will hang about one length longer than it looks now.");
}
Growth uses about 1.25 cm a month, so "grow it for ~N months" is a number, not a guess. Skin add-ons are one filter: only scores below 85 become an offer, worst first.
How I built it
- Next.js 15 + React 19 + TypeScript + Tailwind 4 on Vercel, with four API routes: analyze, tryon, after and status. Every API call runs server-side; the key never reaches the browser.
- route.ts, the planner: maps the readings (e.g. "3A to 3B", "above chest") to textures and length levels, then builds steps for length, texture, colour, care and skin. 13 Vitest tests.
- pose.ts: MediaPipe face landmarks in the browser for angle and face-size checks.
- limit.ts: per-visitor limits, signed session tokens and a hard credit floor, so a public link can't drain the account.
- embed.js: the one-line embed for a salon site.
Challenges
- Getting hair type to read at all. Most portraits fail the framing rules (face at 50 to 80% of the frame, sides at about 45°). Failed calls cost nothing, which let me find the working setup by trial before writing the camera step around it.
- Density skewed low: it read thick, short hair as "Low". So Chairside never sells a treatment off density. A wrong push here would be harmful, not just wrong.
- A public demo on 1,000 free API units: building and testing took about 190, so strangers had to be stopped from spending the rest.
- Curl shrinkage: a naive planner says "cut" when a curly customer wants long straight hair. Straightened, their hair is about one length longer, so the right answer is often rebonding with no cut.
Limitations
- Every reading is labelled either Measured by YouCam or Salon rule. The rules (hair grows about 1.25 cm a month, curl shrinkage, which service fixes which texture) live in one file and are tested.
- Hair density is unreliable in my tests, so Chairside never sells a treatment off density: it shows a soft note and suggests a dermatologist.
- The photo rules are strict. Hair type and frizz need the face at 50 to 80% of the frame, sides at about 45°, in the order front, right, left, all the same size. Stock photos mostly failed until cropped, which is why the camera checks every photo on the device before upload.
- A public demo on 1,000 free units. I spent 86 units on testing, then capped the demo (6 try-ons and 2 skin previews per session, plus a hard credit floor). A sample customer runs on saved real results at 0 units.
- Prices are a demo menu (PKR). A real salon swaps in its own menu file.
- In this prototype the booking screen shows what the stylist gets; the salon-side dashboard is next.
- Live readings are capped (2 per visitor per day, 6 per hour overall) to protect the API budget.
Accomplishments I'm proud of
- Eight YouCam APIs that each decide something, not eight pictures on a page.
- A planner that can say no: "not possible yet, grow for about N months".
- Skin readings that only turn into an offer when they're actually below the "excellent" band (scores under 85), and that say what they won't fix ("won't change darkness that's genetic or from bone structure").
- I ran it end to end on my own photos as well as the sample customer.
What I learned
The hair analysis is good when the photos are right (curl pattern, frizz and length all matched what I could see), and the try-on is excellent. The hard part wasn't calling the APIs. It was deciding what each result should and shouldn't be allowed to sell.
What's next
A salon dashboard with today's bookings, re-checks after a treatment so the customer sees frizz and skin scores change, and putting it in front of a real salon.
Built during the event, and credits
All of Chairside was built Oct 17–18, 2026, inside the event window; nothing existed before. Third-party: Perfect Corp YouCam APIs (hair, skin, try-on), MediaPipe, sample-customer photos from Pexels, voiceover by edge-tts. AI assistance: built with Claude Code.
Built With
- ai-face-attributes
- ai-hair-frizziness-detection
- ai-hair-length-detection
- ai-hair-type-detection
- ai-hairstyle-try-on
- ai-skin-analysis
- ai-skin-simulation
- edge-tts
- mediapipe
- next.js
- node.js
- perfect-corp
- playwright
- react
- remotion
- tailwindcss
- typescript
- vercel
- vitest
- youcam-api
