A mockup full stack app built with React, FastAPI, MongoDB, and Docker, powered by AWS Rekognition & CLIP for multi-tagging and clothing recommendations

What is attarmau FastMCP RecSys

FastMCP_RecSys

This is a CLIP-Based Fashion Recommender with MCP.

πŸ“Œ Sample Components for UI

  1. Image upload
  2. Submit button
  3. Display clothing tags + recommendations

Mockup

A user uploads a clothing image β†’ YOLO detects clothing β†’ CLIP encodes β†’ Recommend similar

Folder Structure

/project-root
β”‚
β”œβ”€β”€ /backend
β”‚   β”œβ”€β”€ Dockerfile            
β”‚   β”œβ”€β”€ /app
β”‚   β”œβ”€β”€ /aws
β”‚   β”‚   β”‚   └── rekognition_wrapper.py         # AWS Rekognition logic
β”‚   β”‚   β”œβ”€β”€ /utils
β”‚   β”‚   β”‚   └── image_utils.py                 # Bounding box crop utils
β”‚   β”‚   β”œβ”€β”€ /controllers
β”‚   β”‚   β”‚   └── clothing_detector.py           # Coordinates Rekognition + cropping
β”‚   β”‚   β”œβ”€β”€ /tests
β”‚   β”‚   β”‚   β”œβ”€β”€ test_rekognition_wrapper.py
β”‚   β”‚   β”‚   └── test_clothing_tagging.py
β”‚   β”‚   β”œβ”€β”€ server.py                    # FastAPI app code
β”‚   β”‚   β”œβ”€β”€ /routes
β”‚   β”‚   β”‚   └── clothing_routes.py
β”‚   β”‚   β”œβ”€β”€ /controllers
β”‚   β”‚   β”‚   β”œβ”€β”€ clothing_controller.py
β”‚   β”‚   β”‚   β”œβ”€β”€ clothing_tagging.py
β”‚   β”‚   β”‚   └── tag_extractor.py         # Pending: define core CLIP functionality
β”‚   β”‚   β”œβ”€β”€ schemas/
β”‚   β”‚   β”‚   └── clothing_schemas.py
β”‚   β”‚   β”œβ”€β”€ config/
β”‚   β”‚   β”‚   β”œβ”€β”€ tag_list_en.py           $ Tool for mapping: https://jsoncrack.com/editor
β”‚   β”‚   β”‚   β”œβ”€β”€ database.py       
β”‚   β”‚   β”‚   β”œβ”€β”€ settings.py       
β”‚   β”‚   β”‚   └── api_keys.py     
β”‚   β”‚   └── requirements.txt      
β”‚   └── .env                      
β”‚                      
β”œβ”€β”€ /frontend 
β”‚   β”œβ”€β”€ Dockerfile        
β”‚   β”œβ”€β”€ package.json              
β”‚   β”œβ”€β”€ package-lock.json         
β”‚   β”œβ”€β”€ /public
β”‚   β”‚   └── index.html            
β”‚   β”œβ”€β”€ /src
β”‚   β”‚   β”œβ”€β”€ /components            
β”‚   β”‚   β”‚   β”œβ”€β”€ ImageUpload.jsx    
β”‚   β”‚   β”‚   β”œβ”€β”€ DetectedTags.jsx   
β”‚   β”‚   β”‚   └── Recommendations.jsx 
β”‚   β”‚   β”œβ”€β”€ /utils
β”‚   β”‚   β”‚   └── api.js             
β”‚   β”‚   β”œβ”€β”€ App.js                    # Main React component
β”‚   β”‚   β”œβ”€β”€ index.js
β”‚   β”‚   β”œβ”€β”€ index.css            
β”‚   β”‚   β”œβ”€β”€ tailwind.config.js        
β”‚   β”‚   └── postcss.config.js                    
β”‚   └── .env                                
β”œβ”€β”€ docker-compose.yml                     
└── README.md 

Quick Start Guide

Step 1: Clone the GitHub Project

Step 2: Set Up the Python Environment

python -m venv venv
source venv/bin/activate  # On macOS or Linux
venv\Scripts\activate     # On Windows

Step 3: Install Dependencies

pip install -r requirements.txt

Step 4: Start the FastAPI Server (Backend)

uvicorn backend.app.server:app --reload

Once the server is running and the database is connected, you should see the following message in the console:

Database connected
INFO:     Application startup complete.

Step 5: Install Dependencies

Database connected INFO: Application startup complete.

npm install

Step 6: Start the Development Server (Frontend)

npm start

Once running, the server logs a confirmation and opens the app in your browser: http://localhost:3000/

What’s completed so far:

  1. FastAPI server is up and running (24 Apr)
  2. Database connection is set up (24 Apr)
  3. Backend architecture is functional (24 Apr)
  4. Basic front-end UI for uploading picture (25 Apr)

5. Mock Testing for AWS Rekognition -> bounding box (15 May)

PYTHONPATH=. pytest backend/app/tests/test_rekognition_wrapper.py
  • Tested Rekognition integration logic independently using a mock β†’ verified it correctly extracts bounding boxes only when labels match the garment set
  • Confirmed the folder structure and PYTHONPATH=. works smoothly with pytest from root

6. Mock Testing for AWS Rekognition -> CLIP (20 May)

PYTHONPATH=. pytest backend/app/tests/test_clothing_tagging.py
  • Detecting garments using AWS Rekognition

  • Cropping the image around detected bounding boxes

  • Tagging the cropped image using CLIP

7. Mock Testing for full image tagging pipeline (Image bytes β†’ AWS Rekognition (detect garments) β†’ Crop images β†’ CLIP (predict tags) + Error Handling

Negative Test Case Description
No Detection Result AWS doesn't detect any garments β€” should return an empty list.
Image Not Clothing CLIP returns vague or empty tags β€” verify fallback behavior.
AWS Returns Exception Simulate rekognition.detect_labels throwing an error β€” check try-except.
Corrupted Image File Simulate a broken (non-JPEG) image β€” verify it raises an error or gives a hint.
PYTHONPATH=. pytest backend/app/tests/test_clothing_tagging.py
  • detect_garments: simulates AWS Rekognition returning one bounding box: {"Left": 0.1, "Top": 0.1, "Width": 0.5, "Height": 0.5}
  • crop_by_bounding_box: simulates the cropping step returning a dummy "cropped_image" object
  • get_tags_from_clip: simulates CLIP returning a list of tags: ["T-shirt", "Cotton", "Casual"]

Next Step:

  1. Evaluate CLIP’s tagging accuracy on sample clothing images
  2. Fine-tune the tagging system for better recommendations
  3. Test the backend integration with real-time user data
  4. Set up monitoring for model performance
  5. Front-end demo

Leave a Comment

Frequently Asked Questions

What is MCP?

MCP (Model Context Protocol) is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications, providing a standardized way to connect AI models to different data sources and tools.

What are MCP Servers?

MCP Servers are lightweight programs that expose specific capabilities through the standardized Model Context Protocol. They act as bridges between LLMs like Claude and various data sources or services, allowing secure access to files, databases, APIs, and other resources.

How do MCP Servers work?

MCP Servers follow a client-server architecture where a host application (like Claude Desktop) connects to multiple servers. Each server provides specific functionality through standardized endpoints and protocols, enabling Claude to access data and perform actions through the standardized protocol.

Are MCP Servers secure?

Yes, MCP Servers are designed with security in mind. They run locally with explicit configuration and permissions, require user approval for actions, and include built-in security features to prevent unauthorized access and ensure data privacy.

Related MCP Servers

Brave Search MCP avatar

Brave Search MCP

Integrate Brave Search capabilities into Claude through MCP. Enables real-time web searches with privacy-focused results and comprehensive web coverage.

searchapiofficial
PostgreSQL MCP Server avatar

PostgreSQL MCP Server

A Model Context Protocol server that provides read-only access to PostgreSQL databases. This server enables LLMs to inspect database schemas and execute read-only queries.

databasepostgresqlcommunity
AWS Knowledge Base Retrieval avatar

AWS Knowledge Base Retrieval

An MCP server implementation for retrieving information from the AWS Knowledge Base using the Bedrock Agent Runtime.

awscloudcommunity
Docker Control MCP avatar

Docker Control MCP

Manage Docker containers and images through Claude. Build, run, and monitor containers using natural language instructions.

dockercontainerscommunity
chrisdoc hevy mcp avatar

chrisdoc hevy mcp

mcp
sylphlab pdf reader mcp avatar

sylphlab pdf reader mcp

An MCP server built with Node.js/TypeScript that allows AI agents to securely read PDF files (local or URL) and extract text, metadata, or page counts. Uses pdf-parse.

pdf-parsetypescriptnodejs
aashari mcp server atlassian bitbucket avatar

aashari mcp server atlassian bitbucket

Node.js/TypeScript MCP server for Atlassian Bitbucket. Enables AI systems (LLMs) to interact with workspaces, repositories, and pull requests via tools (list, get, comment, search). Connects AI directly to version control workflows through the standard MCP interface.

atlassianrepositorymcp
aashari mcp server atlassian confluence avatar

aashari mcp server atlassian confluence

Node.js/TypeScript MCP server for Atlassian Confluence. Provides tools enabling AI systems (LLMs) to list/get spaces & pages (content formatted as Markdown) and search via CQL. Connects AI seamlessly to Confluence knowledge bases using the standard MCP interface.

atlassianmcpconfluence
prisma prisma avatar

prisma prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB

cockroachdbgomcp
Zzzccs123 mcp sentry avatar

Zzzccs123 mcp sentry

mcp sentry for typescript sdk

mcptypescript

Submit Your MCP Server

Share your MCP server with the community

Submit Now