Upload app.py

app.py

@@ -3,18 +3,312 @@
 import gradio as gr
 from server import read_word, create_word
 
-with gr.Blocks() as demo:
-    gr.Markdown("# Gradio MCP Server - Word Reader/Writer")
-    with gr.Tab("Read Word"):
-        read_path = gr.Textbox(label="Local path of Word file to read")
-        read_output = gr.Textbox(label="Word file content", lines=10)
-        btn_read = gr.Button("Read file")
+# Custom CSS for a more beautiful interface
+custom_css = """
+.gradio-container {
+    font-family: 'Inter', sans-serif;
+}
+.main-header {
+    text-align: center;
+    padding: 2rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 10px;
+    margin-bottom: 2rem;
+}
+.info-box {
+    background: #f8f9fa;
+    border-left: 4px solid #667eea;
+    padding: 1rem;
+    border-radius: 5px;
+    margin: 1rem 0;
+}
+.step-box {
+    background: #ffffff;
+    border: 2px solid #e9ecef;
+    padding: 1rem;
+    border-radius: 8px;
+    margin: 0.5rem 0;
+}
+"""
+
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    
+    # Welcome Tab
+    with gr.Tab("🏠 Welcome & Setup"):
+        gr.Markdown("""
+        <div class="main-header">
+            <h1>📄 Gradio MCP Server - Word Reader/Writer</h1>
+            <p style="font-size: 1.2em; margin-top: 1rem;">Connect your LLM to Word documents using the Model Context Protocol</p>
+        </div>
+        """)
+        
+        gr.Markdown("""
+        ## 🎯 About This Project
+        
+        This project demonstrates how to use **Gradio MCP** integration to create an MCP Server that allows AI assistants 
+        to read and create Word documents. Built for the **MCP 1st Birthday Hackathon**, it showcases the power of combining:
+        
+        - **Gradio**: Easy-to-use Python library for creating web interfaces
+        - **MCP (Model Context Protocol)**: Standardized way for LLMs to interact with external tools
+        - **python-docx**: Library for working with Word documents
+        
+        ---
+        
+        ## 🚀 How This Project Uses Gradio MCP
+        
+        This project leverages Gradio's MCP integration to automatically expose Python functions as MCP tools. 
+        Here's how it works:
+        """)
+        
+        with gr.Accordion("📚 Understanding the Architecture", open=False):
+            gr.Markdown("""
+            ### Server Architecture (`server.py`)
+            
+            The core functionality is in `server.py`, which contains:
+            - `read_word(path)`: Reads content from Word files
+            - `create_word(path, content)`: Creates new Word documents
+            
+            ### Gradio Interface (`app.py`)
+            
+            The Gradio app imports these functions and:
+            1. **Creates a web UI** for human interaction
+            2. **Automatically exposes them as MCP tools** by setting `mcp_server=True`
+            
+            ```python
+            demo.launch(mcp_server=True)
+            ```
+            
+            This single parameter converts your Gradio functions into MCP-compatible tools that AI assistants can call!
+            """)
+        
+        gr.Markdown("""
+        ---
+        
+        ## 🔧 How to Connect This Server to Your AI Assistant
+        
+        ### Option 1: Using MCPHost (Recommended)
+        
+        **MCPHost** is a client application that can connect to MCP servers. Here's how to connect:
+        """)
+        
+        with gr.Accordion("📝 Step-by-Step MCPHost Configuration", open=True):
+            gr.Markdown("""
+            <div class="step-box">
+            
+            **Step 1: Get Your MCP Server URL**
+            
+            If hosted on Hugging Face Spaces, your MCP endpoint is:
+            ```
+            https://YOUR-SPACE-NAME.hf.space/gradio_api/mcp/
+            ```
+            
+            For this project:
+            ```
+            https://mcp-1st-birthday-mcp-docx-tools.hf.space/gradio_api/mcp/
+            ```
+            </div>
+            
+            <div class="step-box">
+            
+            **Step 2: Configure MCPHost**
+            
+            Add this configuration to your MCPHost settings file:
+            
+            **For JSON format (`config.json`):**
+            ```json
+            {
+              "mcpServers": {
+                "word-docx-server": {
+                  "type": "remote",
+                  "url": "https://mcp-1st-birthday-mcp-docx-tools.hf.space/gradio_api/mcp/",
+                  "options": {
+                    "allowed_directories": ["C:/Users/YourUser/Documents"]
+                  }
+                }
+              }
+            }
+            ```
+            
+            **For YAML format (`config.yaml`):**
+            ```yaml
+            mcpServers:
+              word-docx-server:
+                type: "remote"
+                url: "https://mcp-1st-birthday-mcp-docx-tools.hf.space/gradio_api/mcp/"
+                options:
+                  allowed_directories:
+                    - "C:/Users/YourUser/Documents"
+            ```
+            </div>
+            
+            <div class="step-box">
+            
+            **Step 3: Set Allowed Directories**
+            
+            ⚠️ **Important**: For security, specify which directories the MCP server can access:
+            - Add the paths where your Word documents are located
+            - Use absolute paths
+            - Multiple directories can be added
+            </div>
+            
+            <div class="step-box">
+            
+            **Step 4: Restart Your MCP Client**
+            
+            After configuration, restart your MCP client (MCPHost, Claude Desktop, etc.) to load the new tools.
+            </div>
+            """)
+        
+        gr.Markdown("""
+        ### Option 2: Using Claude Desktop
+        
+        Edit your `claude_desktop_config.json` file (usually in `~/Library/Application Support/Claude/` on Mac 
+        or `%APPDATA%/Claude/` on Windows):
+        """)
+        
+        with gr.Accordion("⚙️ Claude Desktop Configuration", open=False):
+            gr.Markdown("""
+            ```json
+            {
+              "mcpServers": {
+                "word-docx-tools": {
+                  "command": "npx",
+                  "args": [
+                    "mcp-remote",
+                    "https://mcp-1st-birthday-mcp-docx-tools.hf.space/gradio_api/mcp/sse"
+                  ]
+                }
+              }
+            }
+            ```
+            
+            Then restart Claude Desktop.
+            """)
+        
+        gr.Markdown("""
+        ---
+        
+        ## 🎓 Learn More About Gradio MCP
+        
+        This project is based on the official Gradio MCP documentation. To learn more:
+        
+        📖 **[Gradio MCP Integration Guide](https://huggingface.co/learn/mcp-course/unit1/gradio-mcp)**
+        
+        Key concepts covered:
+        - How Gradio automatically converts functions to MCP tools
+        - Type hints and docstrings for proper tool definitions
+        - Hosting MCP servers on Hugging Face Spaces
+        - Troubleshooting connection issues
+        
+        ---
+        
+        ## 🧪 Try It Out
+        
+        Once connected, you can ask your AI assistant:
+        
+        - *"Read the content of C:/Documents/report.docx"*
+        - *"Create a new Word document at C:/Documents/summary.docx with this content: [your text]"*
+        - *"Extract text from my meeting notes document"*
+        
+        The AI will automatically use the MCP tools to interact with your Word files!
+        """)
+    
+    # Read Word Tab
+    with gr.Tab("📖 Read Word Document"):
+        gr.Markdown("""
+        ### Extract content from Word files
+        Enter the full path to a Word document to read its content.
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=2):
+                read_path = gr.Textbox(
+                    label="📁 Word File Path",
+                    placeholder="e.g., C:/Users/YourName/Documents/document.docx",
+                    info="Enter the absolute path to your Word file"
+                )
+                btn_read = gr.Button("🔍 Read Document", variant="primary", size="lg")
+            
+        read_output = gr.Textbox(
+            label="📄 Document Content",
+            lines=15,
+            placeholder="The content of your Word document will appear here...",
+            show_copy_button=True
+        )
+        
         btn_read.click(read_word, inputs=[read_path], outputs=[read_output])
-    with gr.Tab("Create Word"):
-        create_path = gr.Textbox(label="Local path to save Word file")
-        create_content = gr.Textbox(label="Content for Word file", lines=10)
-        create_output = gr.Textbox(label="Creation result")
-        btn_create = gr.Button("Create file")
+        
+        gr.Markdown("""
+        💡 **Tip**: You can also copy the output using the copy button in the top-right corner of the output box.
+        """)
+    
+    # Create Word Tab
+    with gr.Tab("✍️ Create Word Document"):
+        gr.Markdown("""
+        ### Generate new Word documents
+        Enter the path where you want to save the document and the content you want to include.
+        """)
+        
+        with gr.Row():
+            with gr.Column():
+                create_path = gr.Textbox(
+                    label="💾 Save Path",
+                    placeholder="e.g., C:/Users/YourName/Documents/new_document.docx",
+                    info="Enter the absolute path where the file will be created"
+                )
+                create_content = gr.Textbox(
+                    label="📝 Document Content",
+                    lines=12,
+                    placeholder="Enter the content for your Word document...\nYou can use multiple lines.",
+                    info="Each line will be a separate paragraph in the document"
+                )
+                btn_create = gr.Button("📄 Create Document", variant="primary", size="lg")
+        
+        create_output = gr.Textbox(
+            label="✅ Status",
+            lines=3,
+            placeholder="Creation status will appear here..."
+        )
+        
         btn_create.click(create_word, inputs=[create_path, create_content], outputs=[create_output])
+        
+        gr.Markdown("""
+        💡 **Tip**: Each line in the content will become a separate paragraph in the Word document.
+        """)
+    
+    # About Tab
+    with gr.Tab("ℹ️ About"):
+        gr.Markdown("""
+        ## 🎈 MCP 1st Birthday Hackathon Project
+        
+        This project was created for the **MCP 1st Birthday Hackathon** to demonstrate:
+        - Integration between LLMs and productivity tools
+        - Simplicity of Gradio MCP for creating MCP servers
+        - Practical use case for document processing
+        
+        ### 🛠️ Technologies Used
+        - **Python 3.9+**
+        - **Gradio with MCP support** (`gradio[mcp]`)
+        - **python-docx** for Word file manipulation
+        - **Model Context Protocol** for standardized AI tool integration
+        
+        ### 📡 MCP Server Endpoint
+        ```
+        https://mcp-1st-birthday-mcp-docx-tools.hf.space/gradio_api/mcp/
+        ```
+        
+        ### 🔗 Links
+        - [Gradio MCP Documentation](https://huggingface.co/learn/mcp-course/unit1/gradio-mcp)
+        - [MCP Protocol Specification](https://spec.modelcontextprotocol.io/)
+        - [This Space on Hugging Face](https://huggingface.co/spaces/mcp-1st-birthday/mcp-docx-tools)
+        
+        ### 📝 License
+        Apache License 2.0
+        
+        ---
+        
+        Made with ❤️ for the MCP-1st-Birthday Hackathon
+        """)
 
 demo.launch(mcp_server=True)