# Crunchy Fashion MCP server

MCP server (built with [mcp-use](https://mcp-use.com)) that searches **live** products on
[crunchyfashion.in](https://www.crunchyfashion.in) and renders them as a shoppable carousel
styled like the storefront. Clicking a product opens its page on the website.

Products come from the headless CMS web-builder plugin:
`GET {CRUNCHY_API_URL}/api/web-builder/products/{CRUNCHY_WEBSITE_NAME}` (Strapi v4 filters,
sort and pagination, Bearer token auth).

## Setup

```bash
npm install
cp .env.example .env   # then fill in CRUNCHY_API_URL and CRUNCHY_API_TOKEN
npm run dev
```

Open [http://localhost:3000/mcp/inspector](http://localhost:3000/mcp/inspector) to try the tools.

| Variable | Required | Default |
| --- | --- | --- |
| `CRUNCHY_API_URL` | yes | – (the CMS gateway, e.g. `https://customer.crunchyfashion.in`) |
| `CRUNCHY_API_TOKEN` | yes | – (Strapi API token with read access to products and collections) |
| `CRUNCHY_WEBSITE_NAME` | no | `crunchyfashion` |
| `CRUNCHY_STORE_URL` | no | `https://www.crunchyfashion.in` |

## Tools

- **`search-products`** (renders the `product-search` view): keyword `query`, `collection`,
  `minPrice` / `maxPrice` (INR), `sort` (`newest`, `price-asc`, `price-desc`, `name-asc`),
  `page`, `pageSize` (max 24). Only live products are returned (`isLive` true or unset).
  Keywords must all match the product title/SKU first; if nothing matches, the search widens
  to descriptions, then to products matching any keyword. Common spelling variants
  (jewellery/jewelry, earrings/earings, mehndi/mehendi…) are handled.
- **`get-product-details`**: description, attributes, shades, FAQs and price for one product
  by slug or SKU.
- **`list-collections`**: live collection names and handles to use as the `collection` filter.

## View

`views/product-search/` — Montserrat on white, black CTAs and the magenta `% OFF` pill from
the storefront. Inline it is a swipeable carousel with a "Show more" tile; in fullscreen it
becomes a product grid with "Load more". Shade swatches switch the card image and price.
Images are served through the storefront's `/_next/image` optimizer (small AVIF/WebP) and fall
back to the original CDN file. Product links carry `utm_source=mcp&utm_medium=ai_assistant`.

## Commands

```bash
npm run typecheck   # type-check server + views
npm run build       # production bundle in .mcp-use/build
npm run start       # serve the production build
npm run deploy      # deploy to Manufact Cloud
```