Showcase · Built with LovableOne public MCP.
A full supplement storefront.
This entire Perfect Packs demo — concierge AI, lab parsing, pack builder, Shopify checkout, customer memory — was built on Lovable using nothing but OK Capsule's public MCP server. Here's everything it does, and why MCP + Lovable made it fast.
MCP tools used
3
Auth required
None
Hand-written API glue
~150 lines
Routes built
10+
What this storefront ships
Every capability below is live in this demo and powered by the same public MCP endpoint. Click into the AI Pack Builder on the home page to try most of them right now.
AI supplement concierge
A chat-first pack builder that asks one or two questions, then proposes a doctor-curated 4–8 pill pack. The model is constrained to OK Capsule's live catalog — it can never recommend a SKU that won't check out.
src/components/Chatbot.tsx · src/lib/chat.functions.ts
Lab-result parsing
Drop a PDF or photo of a blood panel. A vision model extracts biomarkers (Vit D, ferritin, B12…), tags them low/high, and feeds them into the recommendation as evidence.
src/lib/biomarkers.functions.ts
Dosing & allergen detail
Every recommended supplement opens a detail panel with serving size, AM/PM timing, capsule form, contains-flags (fish, soy, dairy) and free-from claims — inferred from the MCP catalog.
src/components/SupplementDetailDialog.tsx
Manual Pack Builder
Browse the full catalog, mix AM + PM servings, see live pricing with the OK Capsule volume discount and the subscribe-and-save 10% applied automatically.
src/routes/pack-builder.tsx
Returning-customer memory
Signed-in shoppers see their last pack remembered. The concierge opens with a warm "welcome back" line and uses the prior order as the anchor for the new recommendation.
src/lib/shopify-customer-browser.ts
Real Shopify checkout
Recommendations mint a real Shopify Storefront cart — same line-item attributes, same discount codes, same checkout URL as a hand-built pack. One source of truth for both flows.
src/lib/shopify-cart.ts
Public Developer Kit
A /developers page ships a zero-dependency TypeScript MCP client, three runnable example scripts, and a copy-paste Lovable prompt so anyone can rebuild this site in minutes.
mcp-demo-kit/ · src/routes/developers.tsx
Curated health-goal packs
Sleep, Energy, Stress, PCOS, Liver Detox and more. The concierge maps a user's goal to a full curated pack and pulls the matching MCP product IDs automatically.
src/lib/packs-catalog.ts
Aggregate Supplement Facts Panel
Every personalized pack renders a draft FDA-style Supplement Facts label — ingredients merged, per-serving amounts summed, %DV calculated against the 2020 FDA table. Built entirely from the MCP's per-product strength field.
src/lib/sfp.ts · src/components/SupplementFactsPanel.tsx
Why MCP + Lovable
The benefits stack: a model-native protocol on OK Capsule's side, a prompt-native builder on yours.
No SDK, no auth dance
The MCP server is public. A single fetch + JSON-RPC handshake gets you the entire OK Capsule catalog, product intelligence, and a pre-filled checkout URL.
Lovable wires it for you
Paste the demo-kit prompt and Lovable generates the server function, the chat UI, the cart bridge and the routes — typed end-to-end against the same TanStack Start stack used here.
Single source of truth
Catalog, dosing, pricing and checkout all flow from the MCP. The site never duplicates SKU data — when OK Capsule adds a product, it appears in every surface here automatically.
Built for AI
MCP is the protocol LLMs already speak. A model can call okc_get_catalog and okc_pack_builder_url the same way it calls any tool — no glue code, no bespoke schemas.
The build, end to end
The exact workflow used to ship this site. Repeatable for any OK Capsule partner.
01
Drop the MCP into Lovable
Open the /developers page, copy the bootstrap prompt, paste it into a fresh Lovable project. Lovable scaffolds the server function that speaks JSON-RPC + SSE to storefront.okcapsule.app.
02
Generate the storefront
Ask Lovable for a pack-builder, a chat concierge, or a full landing page. It pulls real product names, images and prices from the MCP — no mock data.
03
Iterate in plain English
"Add allergen flags." "Show a subscribe-and-save toggle." "Remember the last pack for signed-in customers." Each request becomes a typed change against the same MCP-backed source of truth.
04
Ship a real checkout
The MCP's pack_builder_url tool returns a live OK Capsule checkout the moment the user clicks buy. No payment integration, no fulfillment glue.
Build your own on top of OK Capsule
Grab the developer kit — a typed MCP client, runnable scripts, and a Lovable prompt that bootstraps a full storefront like this one. No API keys. No fulfillment glue.