StyleSelf

Inspiration

Buying clothes online still means juggling a dozen tabs: search, read reviews, compare two products side by side, check if your size is in stock, hunt for the checkout button, re-type your card. Every one of those steps is a place to give up.

Big retailers are starting to paper over this with AI shopping assistants. The corner boutique and the three-store local chain can't — they don't have an ML team, and bolting a chatbot onto a payment flow safely is genuinely hard.

We wanted to see if the whole journey — discover → decide → pay — could happen inside one conversation, for a merchant of any size, with the payment step trustworthy enough that you'd actually let an AI run it. The Visa brief framed it exactly this way, so we built StyleSelf: a pre-built fashion commerce agent a merchant drops onto their site with one line of HTML.

What it does

A shopper opens the chat and just talks: "something for a summer wedding, around $150." The agent searches the merchant's real catalogue, returns ranked product cards, leads with one top pick and says why it fits. Ask it to "compare the first two" and a side-by-side table appears — price, material, colours, sizes, stock. Pick a size and colour, add to bag, say you're ready to check out.

Checkout happens in the chat, with no redirect. You see the order total, you explicitly authorize the agent to spend up to that amount, you enter a card (Luhn-checked in the browser — only the last-4 leaves the page), you clear a simulated 3-D Secure challenge, and the payment runs through a simulated Visa Payments Stack: tokenize → authorize → capture → Visa Direct settlement. You get an order ID and an auth code without ever leaving the conversation.

On the merchant side, any user signs up, creates a store, uploads a catalogue (one product at a time or a CSV), configures the agent in plain language, sets a payout account, and copies an <iframe> snippet. No code. One data model covers a single-shop SME and a multi-branch chain alike.

Four trust safeguards are built into the flow, not bolted on:

Transaction preview — line items, delivery, total, before any card detail.
Identity — cardholder name + card, then a simulated 3-D Secure challenge that gates a signed authorization token.
Spend mandate — the order total is signed into the checkout token as a ceiling and enforced at Visa's authorize() step; a tampered or inflated amount is declined at the network layer, not just hidden in the UI.
The agent is never told the payment result and never claims an order is placed — the shopper drives checkout and sees the confirmation there.

How we built it

Frontend — Vite + React 19 + TypeScript, Tailwind v4. The browser only runs a chat widget; it holds conversation state and echoes it back each turn.

AI layer — POST /api/agent/chat, server-side only, OpenAI gpt-4o-mini. The API key never reaches the browser. The model has 5 deterministic tools over the merchant's real data — search_products, get_product_details, check_inventory, add_to_cart, create_order_preview — and each turn runs a bounded tool-calling loop (max 3 rounds). The model never invents a number: every price, stock count, size, colour and total comes from a tool.

Payment layer — POST /api/agent/checkout, a completely separate endpoint with no AI in it. State moves through HMAC-signed stateless tokens (draft → authorized → paid), each pinning the exact line items, total and buyer. server/agent/visa.ts simulates the four Visa stages — real in API shape (ISO-8583 response codes, ECI, network token references, settlement IDs), no network calls. Swapping in a real PSP is a four-function change.

Data — Supabase (Postgres + row-level security). One agent_checkout database function is the only writer of orders and inventory: it re-validates price and stock against live rows and is idempotent on (conversation_id, draft_hash). The embedded agent runs as an anonymous, read-only role, and only when the store is published.

Hosting — Vercel: the SPA plus two serverless functions, esbuild-bundled from the server code.

Challenges we ran into

Keeping the model away from money. Our first version let the agent report totals and it occasionally restated them wrong. The fix was architectural: money is an endpoint, not a tool, and the AI never sees a payment result. That one decision became the project's main safety property.
Stateless checkout integrity. With an anonymous shopper and serverless functions there's no session to trust. We landed on HMAC-signed tokens that each pin the exact cart, so a replayed or edited request fails signature verification instead of quietly overcharging.
One data model for an SME and a chain. A brand is a single stores row. A boutique just has its primary location; a chain's branch managers request to join, and approval creates a branch location scoped by row-level security to only that manager's products and stock. The public agent still searches the whole brand and tells the shopper which branch has an item.
Making the Visa flow feel real without a real gateway. We modelled all four stages returning the actual API shapes, and kept visa.ts completely isolated (no network, no DB, no env) so it reads as a drop-in seam for a real processor.
A CSV import that never destroys data. Merchants fear bulk tools. Ours matches rows to existing products by SKU, updates in place, creates what's new, tolerates missing columns, never deletes or archives, and shows every change in a preview before writing anything.

Accomplishments that we're proud of

A clean AI/payment boundary. No AI output can move money — payment is a separate deterministic endpoint, and the agent never learns the result. This is the property we'd want in a real agentic-commerce system.
A spend mandate enforced at the network layer. The authorized amount is cryptographically bound to the checkout and rejected by the (simulated) Visa authorizer if it's exceeded — real trust, not a UI disclaimer.
A full five-step flow that actually runs end to end — discover, decide, build a cart, authenticate, pay — on a live sample catalogue with no database (/agent/demo), needing only an OpenAI key.
Genuinely no-code onboarding, including CSV bulk import with a review-before-apply preview.
One model that scales from a one-person shop to a multi-branch retailer without a schema change.

What we learned

In agentic commerce, the interesting engineering is the boundary between the AI and the money — not the model prompt.
"Trust" is concrete: a preview screen, a signed spend ceiling, a decline at the right layer. Each one is something a judge or a shopper can point at.
No-code onboarding is mostly about forgiveness — tolerating missing fields, previewing changes, never doing something irreversible on the merchant's behalf.

What's next for StyleSelf

A "let the agent auto-complete purchases under $X" policy, building on the same signed-mandate plumbing.
Voice input for the same agent.
Real PSP integration — by design, only the four functions in visa.ts change.