Add comprehensive MCP documentation to all tool pages

- Add MCP client configuration instructions on every tool page
- Include detailed A1D API key acquisition guide
- Show Claude Desktop configuration with proper JSON format
- List all available MCP tools and endpoints
- Use gr.Blocks layout for better documentation integration
- Ensure users can access MCP setup info from any tool tab

Features added:
- Step-by-step A1D API key setup guide
- Complete Claude Desktop MCP configuration
- MCP endpoints and schema URLs
- Tool descriptions for MCP clients

app.py

@@ -290,119 +290,224 @@ def image_generator_wrapper(prompt: str):
     return message, media_url if media_url else None
 
 
+# MCP Documentation Component
+def create_mcp_docs():
+    """Create MCP documentation component"""
+    return gr.Markdown("""
+## 🔧 MCP Client Configuration
+
+### For Claude Desktop:
+Add this configuration to your Claude Desktop settings:
+
+```json
+{
+  "mcpServers": {
+    "a1d-hosted": {
+      "command": "npx",
+      "args": [
+        "mcp-remote@latest",
+        "https://aigchacker-a1d-mcp-server.hf.space/gradio_api/mcp/sse",
+        "--header",
+        "API_KEY:${MCP_API_KEY}"
+      ],
+      "env": {
+        "MCP_API_KEY": "your_a1d_api_key_here"
+      }
+    }
+  }
+}
+```
+
+### 🔑 How to Get Your A1D API Key:
+
+1. **Visit A1D Website**: Go to [https://a1d.ai](https://a1d.ai)
+2. **Sign Up/Login**: Create an account or login to your existing account
+3. **Access Dashboard**: Navigate to your user dashboard
+4. **Generate API Key**: Look for "API Keys" or "Developer" section
+5. **Copy Your Key**: Copy the generated API key
+6. **Replace in Config**: Replace `your_a1d_api_key_here` with your actual API key
+
+### 📋 Available MCP Tools:
+- `remove_bg_wrapper` - Remove background from images
+- `image_upscaler_wrapper` - Upscale images (2x/4x/8x/16x)
+- `video_upscaler_wrapper` - Upscale videos
+- `image_vectorization_wrapper` - Convert images to vector format
+- `image_extends_wrapper` - Extend images using AI
+- `image_generator_wrapper` - Generate images from text prompts
+
+### 🌐 MCP Endpoints:
+- **SSE Endpoint**: `https://aigchacker-a1d-mcp-server.hf.space/gradio_api/mcp/sse`
+- **Schema**: `https://aigchacker-a1d-mcp-server.hf.space/gradio_api/mcp/schema`
+""")
+
 # Create Gradio interfaces for each tool
+
+
 def create_gradio_app():
     """Create the main Gradio application with all tools"""
 
-    # Create individual interfaces for each tool
-    remove_bg_interface = gr.Interface(
-        fn=remove_bg_wrapper,
-        inputs=[
-            gr.Textbox(
-                label="Image URL",
-                placeholder="https://example.com/image.jpg",
-                info="Enter the URL of the image to remove background from"
-            )
-        ],
-        outputs=[
-            gr.Textbox(label="Result"),
-            gr.Image(label="Preview")
-        ],
-        title="🎭 Background Removal",
-        description="Remove background from images using AI"
-    )
+    # Background Removal Interface with MCP docs
+    with gr.Blocks(title="🎭 Background Removal") as remove_bg_interface:
+        gr.Markdown("# 🎭 Background Removal")
+        gr.Markdown("Remove background from images using AI")
+
+        with gr.Row():
+            with gr.Column():
+                bg_input = gr.Textbox(
+                    label="Image URL",
+                    placeholder="https://example.com/image.jpg",
+                    info="Enter the URL of the image to remove background from"
+                )
+                bg_button = gr.Button("Remove Background", variant="primary")
+            with gr.Column():
+                bg_result = gr.Textbox(label="Result")
+                bg_preview = gr.Image(label="Preview")
+
+        bg_button.click(
+            fn=remove_bg_wrapper,
+            inputs=[bg_input],
+            outputs=[bg_result, bg_preview]
+        )
 
-    image_upscaler_interface = gr.Interface(
-        fn=image_upscaler_wrapper,
-        inputs=[
-            gr.Textbox(
-                label="Image URL",
-                placeholder="https://example.com/image.jpg",
-                info="Enter the URL of the image to upscale"
-            ),
-            gr.Dropdown(
-                choices=[2, 4, 8, 16],
-                value=2,
-                label="Scale Factor",
-                info="Choose the upscaling factor"
-            )
-        ],
-        outputs=[
-            gr.Textbox(label="Result"),
-            gr.Image(label="Preview")
-        ],
-        title="🔍 Image Upscaler",
-        description="Upscale images using AI with specified scale factor"
-    )
+        # Add MCP documentation
+        create_mcp_docs()
+
+    # Image Upscaler Interface with MCP docs
+    with gr.Blocks(title="🔍 Image Upscaler") as image_upscaler_interface:
+        gr.Markdown("# 🔍 Image Upscaler")
+        gr.Markdown("Upscale images using AI with specified scale factor")
+
+        with gr.Row():
+            with gr.Column():
+                up_input = gr.Textbox(
+                    label="Image URL",
+                    placeholder="https://example.com/image.jpg",
+                    info="Enter the URL of the image to upscale"
+                )
+                up_scale = gr.Dropdown(
+                    choices=[2, 4, 8, 16],
+                    value=2,
+                    label="Scale Factor",
+                    info="Choose the upscaling factor"
+                )
+                up_button = gr.Button("Upscale Image", variant="primary")
+            with gr.Column():
+                up_result = gr.Textbox(label="Result")
+                up_preview = gr.Image(label="Preview")
+
+        up_button.click(
+            fn=image_upscaler_wrapper,
+            inputs=[up_input, up_scale],
+            outputs=[up_result, up_preview]
+        )
 
-    video_upscaler_interface = gr.Interface(
-        fn=video_upscaler_wrapper,
-        inputs=[
-            gr.Textbox(
-                label="Video URL",
-                placeholder="https://example.com/video.mp4",
-                info="Enter the URL of the video to upscale"
-            )
-        ],
-        outputs=[
-            gr.Textbox(label="Result"),
-            gr.Video(label="Preview")
-        ],
-        title="🎬 Video Upscaler",
-        description="Upscale videos using AI"
-    )
+        # Add MCP documentation
+        create_mcp_docs()
+
+    # Video Upscaler Interface with MCP docs
+    with gr.Blocks(title="🎬 Video Upscaler") as video_upscaler_interface:
+        gr.Markdown("# 🎬 Video Upscaler")
+        gr.Markdown("Upscale videos using AI")
+
+        with gr.Row():
+            with gr.Column():
+                vid_input = gr.Textbox(
+                    label="Video URL",
+                    placeholder="https://example.com/video.mp4",
+                    info="Enter the URL of the video to upscale"
+                )
+                vid_button = gr.Button("Upscale Video", variant="primary")
+            with gr.Column():
+                vid_result = gr.Textbox(label="Result")
+                vid_preview = gr.Video(label="Preview")
+
+        vid_button.click(
+            fn=video_upscaler_wrapper,
+            inputs=[vid_input],
+            outputs=[vid_result, vid_preview]
+        )
 
-    image_vectorization_interface = gr.Interface(
-        fn=image_vectorization_wrapper,
-        inputs=[
-            gr.Textbox(
-                label="Image URL",
-                placeholder="https://example.com/image.jpg",
-                info="Enter the URL of the image to convert to vector format"
-            )
-        ],
-        outputs=[
-            gr.Textbox(label="Result"),
-            gr.Image(label="Preview")
-        ],
-        title="📐 Image Vectorization",
-        description="Convert images to vector format using AI"
-    )
+        # Add MCP documentation
+        create_mcp_docs()
+
+    # Image Vectorization Interface with MCP docs
+    with gr.Blocks(title="📐 Image Vectorization") as image_vectorization_interface:
+        gr.Markdown("# 📐 Image Vectorization")
+        gr.Markdown("Convert images to vector format using AI")
+
+        with gr.Row():
+            with gr.Column():
+                vec_input = gr.Textbox(
+                    label="Image URL",
+                    placeholder="https://example.com/image.jpg",
+                    info="Enter the URL of the image to convert to vector format"
+                )
+                vec_button = gr.Button("Vectorize Image", variant="primary")
+            with gr.Column():
+                vec_result = gr.Textbox(label="Result")
+                vec_preview = gr.Image(label="Preview")
+
+        vec_button.click(
+            fn=image_vectorization_wrapper,
+            inputs=[vec_input],
+            outputs=[vec_result, vec_preview]
+        )
 
-    image_extends_interface = gr.Interface(
-        fn=image_extends_wrapper,
-        inputs=[
-            gr.Textbox(
-                label="Image URL",
-                placeholder="https://example.com/image.jpg",
-                info="Enter the URL of the image to extend"
-            )
-        ],
-        outputs=[
-            gr.Textbox(label="Result"),
-            gr.Image(label="Preview")
-        ],
-        title="🖼️ Image Extension",
-        description="Extend images using AI"
-    )
+        # Add MCP documentation
+        create_mcp_docs()
+
+    # Image Extension Interface with MCP docs
+    with gr.Blocks(title="🖼️ Image Extension") as image_extends_interface:
+        gr.Markdown("# 🖼️ Image Extension")
+        gr.Markdown("Extend images using AI")
+
+        with gr.Row():
+            with gr.Column():
+                ext_input = gr.Textbox(
+                    label="Image URL",
+                    placeholder="https://example.com/image.jpg",
+                    info="Enter the URL of the image to extend"
+                )
+                ext_button = gr.Button("Extend Image", variant="primary")
+            with gr.Column():
+                ext_result = gr.Textbox(label="Result")
+                ext_preview = gr.Image(label="Preview")
+
+        ext_button.click(
+            fn=image_extends_wrapper,
+            inputs=[ext_input],
+            outputs=[ext_result, ext_preview]
+        )
 
-    image_generator_interface = gr.Interface(
-        fn=image_generator_wrapper,
-        inputs=[
-            gr.Textbox(
-                label="Text Prompt",
-                placeholder="A beautiful sunset over mountains",
-                info="Enter a text description to generate an image",
-                lines=3
-            )
-        ],
-        outputs=[
-            gr.Textbox(label="Result"),
-            gr.Image(label="Preview")
-        ],
-        title="🎨 Image Generator",
-        description="Generate images using AI from text prompts"
-    )
+        # Add MCP documentation
+        create_mcp_docs()
+
+    # Image Generator Interface with MCP docs
+    with gr.Blocks(title="🎨 Image Generator") as image_generator_interface:
+        gr.Markdown("# 🎨 Image Generator")
+        gr.Markdown("Generate images using AI from text prompts")
+
+        with gr.Row():
+            with gr.Column():
+                gen_input = gr.Textbox(
+                    label="Text Prompt",
+                    placeholder="A beautiful sunset over mountains",
+                    info="Enter a text description to generate an image",
+                    lines=3
+                )
+                gen_button = gr.Button("Generate Image", variant="primary")
+            with gr.Column():
+                gen_result = gr.Textbox(label="Result")
+                gen_preview = gr.Image(label="Preview")
+
+        gen_button.click(
+            fn=image_generator_wrapper,
+            inputs=[gen_input],
+            outputs=[gen_result, gen_preview]
+        )
+
+        # Add MCP documentation
+        create_mcp_docs()
 
     # Create tabbed interface
     demo = gr.TabbedInterface(