Back to Templates
Industry Templates
Fashion WebMCP Template
An AI-agent-ready fashion boutique template with 15 WebMCP tools for collection browsing, product discovery, size guidance, styling advice, bag management, and order tracking. Supports both imperative JavaScript and declarative HTML integration.
Intermediate
15 WebMCP Tools
1,920 downloads
Live Preview
yoursite.com/fashion-webmcp
Load live preview on demand to keep template pages fast.
Tool Inventory15 registered
webmcp-tools: fashion-webmcp
Execution Trace9 steps
01USER→"I need an outfit for a cocktail party this weekend. Something elegant but modern, budget around $800."
02AGENT→get_styling_advice({ occasion: "cocktail party", season: "winter", budget_max: 800, preferred_style: "minimalist" })
03AGENT→search_products({ keyword: "silk midi dress", category: "dresses", price_max: 500 })
04AGENT→get_product_details({ product_id: "noir-silk-midi" })
05AGENT→get_size_guide({ category: "dresses", unit: "cm" })
06AGENT→check_stock({ product_id: "noir-silk-midi", size: "S", color: "noir" })
07CHECK→Noir Silk Midi Dress in size S (noir) is in stock. Price: $420. Recommending pairing with Velvet Clutch ($180) for a total under budget.
08UI→add_to_bag form shown — user confirms size S, color noir, quantity 1.
09DONE→Two items added to bag. Subtotal: $600. Promo code NOIR15 available for 15% off.
Code Examples
CODE EXPORT
// Register get_collections tool
navigator.modelContext.registerTool({
name: "get_collections",
description: "List all seasonal and curated collections with summaries.",
inputSchema: {
"type": "object",
"properties": {
"season": {
"type": "string",
"description": "Filter by season (e.g. \"spring-summer-25\", \"fall-winter-25\")"
},
"sort_by": {
"type": "string",
"enum": [
"newest",
"name_asc",
"name_desc"
],
"description": "Sort order"
}
},
"required": []
},
annotations: {"readOnlyHint":true},
execute: async (params) => {
const response = await fetch("/api/get_collections", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
});
return response.json();
}
});What's Included
Collection & Lookbook Discovery
Browse seasonal collections and curated lookbooks with structured product data.
Product Search & Details
Search the catalog by keyword, filter by category, and retrieve full product specs including sizing.
Size Guide & Stock Checking
AI-friendly size charts with measurements and real-time variant-level stock availability.
Bag & Promo Code Management
Add items to the shopping bag, view contents, and apply promotional codes — via JS or HTML forms.
Styling Advice Engine
Get personalized outfit suggestions based on occasion, season, and preferred aesthetic.
Order Tracking & Returns
Track shipments in real time and access return policy details without leaving the conversation.
Why This Template Works
Designed for AI agent interoperability with structured tool definitions.
End-to-End Shopping Journey
Covers every step from discovering collections to post-purchase tracking, so agents never hit a dead end.
Structured Fashion Data
Tools return typed JSON with sizes, colors, materials, and measurements — no scraping needed.
Personal Styling Layer
The styling advice tool lets agents recommend outfits by occasion, making conversations more valuable.
Dual API Surface
Imperative JS for rich agents and declarative HTML forms for simpler crawlers — both work out of the box.
Implementation Guide
Follow these steps to deploy the template on your website.
1
Drop in the HTML
Copy the template HTML into your site. All tools and styles are self-contained — no external dependencies.
2
Wire up your product API
Replace the mock execute() functions with real fetch() calls to your product catalog, inventory, and order APIs.
3
Connect your CMS
Point the collection and lookbook tools at your headless CMS or PIM system for live content.
4
Customize branding
Update the brand name, rose accent color, product imagery, and copy to match your fashion house identity.
5
Test with an AI agent
Open the page in an MCP-capable browser or test harness and verify the full browse to bag to checkout flow.
Download Options
Other Industry Templates
Ready to Make Your Site Agent-Ready?
Deploy this template and start receiving structured traffic from AI agents.