Python 에서 Gradio 를 활용한 MCP 서버 구현: AI 쇼핑 어시스턴트

파이썬 개발자라면 강력한 MCP 서버를 구현하기 위해 Gradio 는 매우 편리하며, 다음과 같은 기능을 제공합니다:

파이썬 함수의 자동 변환 (LLM 도구로): Gradio 앱의 각 API 엔드포인트는 자동으로 이름, 설명 및 입력 스키마가 포함된 MCP 도구로 변환됩니다. 함수의 docstring 이 사용되어 도구의 설명과 매개변수를 생성합니다.

실시간 진행 알림: Gradio 는 MCP 클라이언트에 진행 알림을 스트리밍하여, 해당 기능을 직접 구현하지 않고도 실시간으로 상태를 모니터링할 수 있습니다.

자동 파일 업로드, 공공 URL 지원 및 다양한 파일 타입 처리 포함.

이제 상상해보세요: 쇼핑에 싫증이 나고 옷을 직접 입어보는 것을 두려워하는 당신. 만약 LLM 이 이를 대신해 줄 수 있다면 어떨까요? 이번 포스트에서는 온라인 의류 스토어를 검색하고, 특정 의류를 찾아낸 후 가상 트라이온 (Virtual Try-On) 모델을 사용하여 그 옷이 어떻게 보이는지 보여줄 수 있는 LLM 기반 AI 어시스턴트를 만들겠습니다. 아래 데모를 확인해보세요:

AI 쇼핑 어시스턴트를 구현하기 위해 세 가지 핵심 구성 요소를 결합하겠습니다.

IDM-VTON Diffusion 모델: 가상 트라이온 기능을 담당하는 AI 모델입니다. 기존 사진을 편집하여 사람이 다른 의류를 입은 것처럼 보이게 할 수 있습니다. 우리는 IDM-VTON 을 Hugging Face Space 에서 사용할 것이며, 여기에서 접근 가능합니다.

Gradio: Gradio 는 AI 기반 웹 애플리케이션을 구축하기 쉽고, 특히 이 프로젝트에 있어서 MCP 서버를 생성하는 데 매우 유용한 오픈 소스 파이썬 라이브러리입니다. Gradio 는 LLM 이 IDM-VTON 모델 및 기타 도구를 호출할 수 있도록 연결고리 역할을 할 것입니다.

Visual Studio Code 의 AI 채팅 기능: 우리는 임의의 MCP 서버를 추가할 수 있는 VS Code 내장 AI 채팅을 사용하여 AI 쇼핑 어시스턴트와 상호작용합니다. 이는 명령어 발호와 가상 트라이온 결과를 확인하는 사용자 친화적인 인터페이스를 제공합니다.

AI 쇼핑 어시스턴트의 핵심은 Gradio MCP 서버입니다. 이 서버는 하나의 주요 도구를 노출합니다:

vton_generation

: 이 함수는 인간 모델 이미지와 의류 이미지를 입력으로 받아 IDM-VTON 모델을 사용하여 의류를 입은 사람의 새로운 이미지를 생성합니다.

Gradio MCP 서버의 파이썬 코드:

from gradio_client import Client, handle_file
import gradio as gr
import re
...

launch() 메서드에서 mcp_server=True 를 설정하면 Gradio 는 자동으로 파이썬 함수를 LLM 이 이해하고 사용할 수 있는 MCP 도구로 변환합니다. 함수의 docstring 은 도구 및 매개변수의 설명을 생성하는 데 사용됩니다.

원래 IDM-VTON 공간은 자동 MCP 기능을 포함하지 않는 Gradio 4.x 로 구현되었습니다. 따라서 이번 데모에서는 Gradio API 클라이언트를 통해 원래 공간을 쿼리하는 Gradio 인터페이스를 구축하겠습니다.

마지막으로 파이썬으로 이 스크립트를 실행합니다.

Gradio MCP 서버를 VS Code 의 AI 채팅에 연결하려면 mcp.json 파일을 수정해야 합니다. 이 구성은 AI 채팅이 MCP 서버를 어디에서 찾을지 및 상호작용하는 방법을 알려줍니다.

MCP 를 명령 패널에 입력하여 MCP: Open User Configuration 을 선택하면 해당 파일을 찾을 수 있습니다. 이를 열면 다음 서버가 포함되어 있는지 확인하세요:

{
"servers": {
"vton": {
...

Playwright MCP 서버는 AI 어시스턴트가 웹을 검색할 수 있게 해줍니다.
vton 의 URL 을 확인하세요.

이 섹션에서 콘솔에 출력된 URL 과 서버가 일치합니다. Playwright MCP 서버를 실행하려면 node 를 설치해야 합니다.

이제 AI 쇼핑 어시스턴트와 상호작용할 수 있습니다. VS Code 에서 새 채팅을 열고, 다음과 같은 질문을 할 수 있습니다: "Uniqlo 웹사이트에서 파란색 티셔츠를 검색하고, 내 사진 [your-image-url] 을 사용하여 세 벌의 옷을 입었을 때 어떤 모습인지 보여주세요."

위 비디오를 참고하세요!

Gradio 와 MCP 를 결합하고, IDM-VTON 과 같은 강력한 AI 모델을 사용하면 지능적이고 도움이 되는 AI 어시스턴트를 만드는 흥미로운 가능성을 열어줍니다. 이 블로그 포스트에서 제시된 단계를 따르면, 가장 관심 있는 문제를 해결할 수 있는 자체 어시스턴트를 구축할 수 있습니다!