Building an AI Shopping Assistant with Python & Gradio: Virtual Try-On with MCP Servers

Introducing AI-Powered Shopping with Gradio & MCP Servers

Shopping for clothes online can be frustrating—endless scrolling, uncertain fits, and the hassle of returns. But what if an AI assistant could browse stores for you, pick outfits, and even show how they’d look on you before buying?

Thanks to Gradio’s Model Context Protocol (MCP), Python developers can now supercharge LLMs by connecting them to specialized AI models on Hugging Face. In this guide, we’ll build an AI shopping assistant that:

✅ Searches online stores for clothing
✅ Uses a virtual try-on model (IDM-VTON) to visualize outfits on you
✅ Runs entirely in Python with Gradio’s MCP integration

How It Works: Gradio + MCP + LLMs

Gradio’s MCP (Model Context Protocol) lets LLMs interact with external AI models seamlessly. Key features:

✔ Automatic tool generation – Python functions become LLM-callable APIs
✔ Real-time progress updates – Track model inference live
✔ File handling – Supports uploads, URLs, and multiple file types

Our AI stylist combines:

IDM-VTON Diffusion Model – Virtual try-on AI (hosted on Hugging Face)
Gradio MCP Server – Bridges LLM & AI models
VS Code AI Chat – User-friendly interface

Building the Virtual Try-On MCP Server

We’ll expose a vton_generation tool that takes:

A human model photo (you)
A garment image (from shopping sites)

And returns an AI-generated image of you wearing the outfit!

Python Code (Gradio MCP Server)



from gradio_client import Client, handle_file
import gradio as gr

# Connect to Hugging Face’s IDM-VTON model
client = Client("freddyaboulton/IDM-VTON", hf_token="<Your-HF-Token>")

def vton_generation(human_model_img: str, garment: str):
    """Generate an image of a person wearing a garment using IDM-VTON."""
    output = client.predict(
        {"background": handle_file(human_model_img), "layers": [], "composite": None},
        garm_img=handle_file(garment),
        garment_des="",
        is_checked=True,
        denoise_steps=30,
        seed=42,
        api_name="/tryon"
    )
    return output[0]

# Launch MCP server
vton_mcp = gr.Interface(
    vton_generation,
    inputs=[
        gr.Image(type="filepath", label="Your Photo"),
        gr.Image(type="filepath", label="Clothing Image")
    ],
    outputs=gr.Image(label="Virtual Try-On Result")
)

if __name__ == "__main__":
    vton_mcp.launch(mcp_server=True)  # Enable MCP mode

from gradio_client import Client, handle_file

import gradio as gr

# Connect to Hugging Face’s IDM-VTON model

client = Client("freddyaboulton/IDM-VTON", hf_token="<Your-HF-Token>")

def vton_generation(human_model_img: str, garment: str):

"""Generate an image of a person wearing a garment using IDM-VTON."""

output = client.predict(

{"background": handle_file(human_model_img), "layers": [], "composite": None},

garm_img=handle_file(garment),

garment_des="",

is_checked=True,

denoise_steps=30,

seed=42,

api_name="/tryon"

)

return output[0]

# Launch MCP server

vton_mcp = gr.Interface(

vton_generation,

inputs=[

gr.Image(type="filepath", label="Your Photo"),

gr.Image(type="filepath", label="Clothing Image")

outputs=gr.Image(label="Virtual Try-On Result")

)

if __name__ == "__main__":

vton_mcp.launch(mcp_server=True) # Enable MCP mode

Run this script, and Gradio automatically converts vton_generation into an LLM tool with:

Name & description (from docstring)
Input/output schemas (structured for LLMs)

⚙️ Configuring VS Code for AI Shopping

To let the LLM browse stores and use our MCP server, we configure VS Code’s mcp.json:

Open VS Code’s command palette (Ctrl+Shift+P) → “MCP: Open User Configuration”
Add:



{
  "servers": {
    "vton": {
      "url": "http://127.0.0.1:7860/gradio_api/mcp/"  # Your Gradio MCP server
    },
    "playwright": {  # For web browsing
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}