What is it
dabdabdab is a browser-based virtual makeup studio that turns a WebMCP-compatible AI assistant into a live makeup artist. People can try individual makeup products or complete looks on their own face in real time. They can ask an agent to analyze their coloring, create or refine a look, and find matching products with purchase links.
The app is privacy focused. Face tracking, makeup rendering, and color analysis all run locally in the browser. Its WebMCP tools return only current makeup settings and aggregate color estimates, never camera frames, screenshots, face landmarks, or facial geometry.
Why WebMCP is a strong fit
Choosing makeup combines two types of interaction. Natural language is best for intent, such as “give me a ’90s supermodel look,” “try on CHANEL Rouge Coco in Mademoiselle,” or “create a Burning Man look that suits my coloring.” However, the user is not limited to imprecise interactions like “less red,” “even less red,” or “no, a bluer red.” Direct controls add the option for precise adjustments, such as selecting an exact shade or finish.
WebMCP lets both interactions happen in one shared experience. The agent can read the current studio state, apply coordinated changes, and see the user's manual adjustments. The user can move between conversation and page controls without restating the look or losing progress.
WebMCP is especially well suited to maintaining user privacy because the tools run directly in the webpage. A regular MCP integration would require a separate MCP server and requests to that server. With WebMCP, the page can give the agent useful makeup settings and color estimates while all image processing and the live camera feed stay on the user’s device.
How WebMCP improves the user experience
Online beauty shoppers often move between inspiration, tutorials, product pages, and a bathroom mirror, with no reliable way to see whether the result will suit them. dabdabdab connects those steps. This lets them try a look BEFORE buying.
A user can describe a look, see it on their face in seconds, adjust any detail, and ask for matching products. Users can also ask to see specific products like “MAC lipstick Ruby Woo,” and the agent will research it and apply a matching color. Actions taken by the agent update the visible controls, so every change is clear and editable.
The product is also usable without an agent as a complete virtual makeup studio. It includes a demo mode with a model if the user prefers to not opt-in to live camera mode.
What people and agents can do together
The agent contributes style knowledge, coordination across six makeup categories, and product research. The user contributes personal taste and visual judgment.
The site analyzes the user’s skin, eye, and hair colors on the device and shares only the resulting color profile with the agent. If an estimate is wrong, the user can correct it quickly and easily in the interface.
For example, a user can ask, “Create a ’90s supermodel look that suits my coloring.” The agent reads the studio state, requests an on-device color analysis, and applies six coordinated layers. The user can then change the lipstick manually, ask the agent to soften the eyes to match, and shop the final look. Because the agent reads the same state that the controls update, neither participant loses the other’s changes.
Together, they can turn an idea (extreme glam look), occasion (summer festival), or reference (Sabrina Carpenter's pink stage makeup), try it on, refine it through chat or direct controls, and find products with links for the final result. Before WebMCP, an assistant could describe a look but could not inspect the active layers, apply the look to a live preview, or stay synchronized with the user's edits.
How we implemented WebMCP
The site registers eight tools through document.modelContext.registerTool:
get_makeup_stateanalyze_coloringget_appearance_profileapply_makeupapply_full_makeup_lookundo_last_makeup_changeclear_makeupshow_product_matches
Each tool has a strict JSON schema and calls the same in-browser application logic as the visible controls. Human edits and agent actions therefore share one state and undo history. The handlers enforce studio readiness, validate camera and demo source selection, reject unsupported styles and duplicate categories, and validate every input before changing the preview. State-reading tools are marked read-only, while product results are marked as untrusted content and accepted only when they match an active layer.
A complete multi-layer look is applied atomically and recorded as one action. If any layer fails, the previous look is restored.
The color-analysis tools also warn the agent that the tools return only aggregate colors and that by the user granting the website camera access, the user is not granting the agent permission to access raw camera data.
MediaPipe tracks the face and analyzes skin, eye, and hair color locally. We use WebGL shaders to render six makeup categories onto the live video in real time. WebMCP connects the agent directly to that browser-based system without requiring a separate MCP server or backend API for the core try-on experience.
Together, these tools let the agent understand what the user is seeing, safely change the live preview, and keep the page controls in sync so the user can take over at any time.
Log in or sign up for Devpost to join the conversation.