Why you might want to use this approach

This approach and tool combination make sense if you:

• Want to add Amazon purchases via URL
• Already have a Claude Pro subscription, or don't mind purchasing one for a month to automate your initial wardrobe onboarding
• Are comfortable configuring Claude Desktop to use MCP servers, or are interested in learning. The Claude Control Chrome extension is also a great option if manually installing node to use the Playwright server as explained in this tutorial.

Prerequisites

In order to follow this tutorial, you need to have the following:

• A Claude Pro or Max account - Claude's Free accounts to not allow the use of MCP tools. Note that if you have an exceptionally large collection, you may need to split up your importing in a few sessions to avoid hitting usage limits.
• The Claude Desktop app installed. Note that for this tutorial, the Claude.ai web app will not work, as it is not able to use Extensions.

Process

Set up the MCP Servers

The first thing we need to do is to configure Claude Desktop to use two MCP servers. MCP is a standard that allows AI Applications to access external systems. For this tutorial, we're going to utilize Caffeinated Wardrobe's remote MCP server, which allows you to update your Wardrobe using an AI app like Claude. We're also going to utilize the Playwright MCP server, which allows Claude to control a web browser. There are many ways of enabling AI control of a browser, but we're using Playwright here because its ability to execute JavaScript in the browser enables it to more easily get the image URLs from StitchFix's website.

Add the Caffeinated Wardrobe MCP server as a remote MCP server

• At the bottom of a new Chat window, select the "Search and Tools" button:

• Scroll down to the bottom and choose "Manage Connectors":

• In the Connectors window, choose "Add custom connector":

• In the "Add custom connector" window, give it a name (ie, Caffeinated Wardrobe) and where it says "Remote MCP server URL", enter https://api.caffeinatedwardrobe.com/mcp, and click "Add":

• Claude should then open a browser and ask you to allow access to your Caffeinated Wardrobe account. Click Allow, and return to Claude:

Install the Control Chrome Extension

• Go to Claude Desktop's menu and choose Settings:

• Click on "Extensions":

• And then "Browse Extensions":

• Click on "Control Chrome":

• Click install:

Add your item

Find the link to the Amazon Product you want to import and use it with the following Prompt

I want you to import a clothing item from this Amazon product page into Caffeinated Wardrobe: <Add your Product link here>

 Here's the step-by-step process I'd like you to follow:

1. First, use Control Chrome to take a snapshot of the page to see what's available
2. Add to Caffeinated Wardrobe with:

    - Item name
    - Brand name
    - Color information, if available
    - Product URL (the original URL you used to access the page)
    - Appropriate category (tops/bottoms/blazers/dresses/shoes/jewelry/accessories)
    - The store (Amazon)
    - Size
    - Tags
    - Description and product details
    - The price, if available
3. Find the main image: Use javascript to find the URL of the main product image using the 'landingImage' element ID
4. Get the url's of any alternate images using the 'altImages' element id and reformat them to the full-size upage
5. Upload the images

**Important requirements:**

- Use simple, direct DOM access with 'getElementByID()'
- Do NOT use explicit return statements in your JS. Just ensure that the last line is the url for the image.
- Filter out any non-product images (360° icons, transparent pixels, etc.)

Review your wardrobe

You should now be able to see your imported item with all the relevant detail in Caffeinated Wardrobe: