Deploy Microsoft MCP Servers Demo

.gitignore

@@ -0,0 +1,49 @@
+# Environment variables
+.env
+.env.local
+.env.production
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environments
+venv/
+env/
+ENV/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Gradio
+gradio_cached_examples/
+flagged/
+

README.md

@@ -1,12 +1,94 @@
 ---
-title: Microsoft Mcp Demo
-emoji: 🐠
-colorFrom: yellow
-colorTo: red
+title: Microsoft MCP Servers Demo
+emoji: 🚀
+colorFrom: blue
+colorTo: purple
 sdk: gradio
-sdk_version: 5.38.0
+sdk_version: 4.44.0
 app_file: app.py
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🚀 Microsoft MCP Servers Demo
+
+Khám phá 10 Microsoft MCP Servers để tăng tốc development workflow của bạn!
+
+## 🌟 Tính năng
+
+Ứng dụng này demo các Microsoft MCP (Model Context Protocol) Servers:
+
+### 📚 Microsoft Learn Docs MCP Server
+- Tìm kiếm semantic qua tài liệu Microsoft chính thức
+- Truy cập real-time đến Microsoft Learn, Azure docs, Microsoft 365 docs
+- Tool: `microsoft_docs_search`
+
+### ☁️ Azure MCP Server  
+- Quản lý 15+ Azure services
+- Resource management, database connectivity
+- Azure Monitor logs với KQL queries
+- Cosmos DB integration
+
+### 🐙 GitHub MCP Server
+- Tương tác với GitHub repositories
+- Quản lý issues, pull requests
+- Search repositories và code
+
+### 🔄 Azure DevOps MCP Server
+- Quản lý Azure DevOps work items
+- Builds và releases management
+- Project tracking
+
+### 📝 MarkItDown MCP Server
+- Chuyển đổi documents sang Markdown format
+- Hỗ trợ nhiều định dạng file
+
+### 🗃️ SQL Server MCP Server
+- Kết nối và truy vấn SQL Server
+- Database schema exploration
+- Query execution
+
+### 🎭 Playwright MCP Server
+- Web automation và testing
+- Screenshot capture
+- Browser navigation
+
+## 🛠️ Cách sử dụng
+
+1. **Chọn MCP Server**: Chọn server bạn muốn test
+2. **Chọn Tool/Function**: Chọn function cụ thể của server
+3. **Nhập Query**: Nhập query hoặc input cho function
+4. **Test**: Click "Test MCP Server" để xem kết quả
+
+## 🔧 Environment Variables
+
+Để sử dụng đầy đủ tính năng, cần cấu hình các biến môi trường:
+
+- `OPENAI_API_KEY`: OpenAI API key để sử dụng AI features
+- `OPENAI_API_BASE`: OpenAI API base URL (optional)
+
+## 📖 Tài liệu tham khảo
+
+- [Microsoft MCP Servers Blog Post](https://devblogs.microsoft.com/blog/10-microsoft-mcp-servers-to-accelerate-your-development-workflow)
+- [Model Context Protocol](https://modelcontextprotocol.io/)
+- [Microsoft Learn Documentation](https://learn.microsoft.com/)
+
+## 🚀 Deployment
+
+Space này được deploy trên Hugging Face Spaces với:
+- **SDK**: Gradio 4.44.0
+- **Python**: 3.11+
+- **Framework**: Gradio + OpenAI
+
+## 📝 License
+
+MIT License - Xem file LICENSE để biết thêm chi tiết.
+
+## 🤝 Đóng góp
+
+Mọi đóng góp đều được chào đón! Hãy tạo issue hoặc pull request.
+
+---
+
+**Lưu ý**: Đây là demo mô phỏng các MCP servers. Để sử dụng thực tế, cần cài đặt và cấu hình các MCP servers tương ứng.
+

app.py

@@ -0,0 +1,297 @@
+import gradio as gr
+import os
+import asyncio
+import json
+import httpx
+from openai import OpenAI
+from typing import List, Dict, Any
+import logging
+
+# Cấu hình logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Khởi tạo OpenAI client
+client = OpenAI(
+    api_key=os.getenv("OPENAI_API_KEY"),
+    base_url=os.getenv("OPENAI_API_BASE", "https://api.openai.com/v1")
+)
+
+class MCPServerDemo:
+    def __init__(self):
+        self.servers = {
+            "Microsoft Learn Docs": {
+                "url": "https://learn.microsoft.com/api/mcp",
+                "description": "Tìm kiếm tài liệu Microsoft Learn chính thức",
+                "tools": ["microsoft_docs_search"]
+            },
+            "Azure MCP": {
+                "description": "Quản lý tài nguyên Azure",
+                "tools": ["azure_resource_list", "azure_monitor_query"]
+            },
+            "GitHub MCP": {
+                "description": "Tương tác với GitHub repositories",
+                "tools": ["github_search_repos", "github_create_issue"]
+            },
+            "Azure DevOps MCP": {
+                "description": "Quản lý Azure DevOps work items",
+                "tools": ["devops_create_workitem", "devops_query_workitems"]
+            },
+            "MarkItDown MCP": {
+                "description": "Chuyển đổi documents sang Markdown",
+                "tools": ["convert_to_markdown"]
+            },
+            "SQL Server MCP": {
+                "description": "Truy vấn SQL Server database",
+                "tools": ["sql_query", "sql_schema"]
+            },
+            "Playwright MCP": {
+                "description": "Web automation và testing",
+                "tools": ["playwright_navigate", "playwright_screenshot"]
+            }
+        }
+    
+    async def search_microsoft_docs(self, query: str) -> str:
+        """Tìm kiếm tài liệu Microsoft Learn"""
+        try:
+            async with httpx.AsyncClient() as client:
+                response = await client.post(
+                    "https://learn.microsoft.com/api/mcp",
+                    json={
+                        "method": "tools/call",
+                        "params": {
+                            "name": "microsoft_docs_search",
+                            "arguments": {"query": query}
+                        }
+                    },
+                    headers={"Content-Type": "application/json"}
+                )
+                
+                if response.status_code == 200:
+                    result = response.json()
+                    return f"Kết quả tìm kiếm cho '{query}':\n\n{json.dumps(result, indent=2, ensure_ascii=False)}"
+                else:
+                    return f"Lỗi khi tìm kiếm: {response.status_code}"
+        except Exception as e:
+            logger.error(f"Error searching Microsoft docs: {e}")
+            return f"Lỗi: {str(e)}"
+    
+    def simulate_mcp_call(self, server_name: str, tool_name: str, query: str) -> str:
+        """Mô phỏng gọi MCP server"""
+        if server_name not in self.servers:
+            return "Server không tồn tại"
+        
+        server_info = self.servers[server_name]
+        
+        # Mô phỏng kết quả dựa trên server và tool
+        if server_name == "Microsoft Learn Docs" and tool_name == "microsoft_docs_search":
+            return f"""
+🔍 **Tìm kiếm Microsoft Learn Docs**
+Query: {query}
+
+📚 **Kết quả mô phỏng:**
+1. **ASP.NET Core Documentation**
+   - URL: https://learn.microsoft.com/aspnet/core/
+   - Mô tả: Comprehensive guide for ASP.NET Core development
+   
+2. **Azure Documentation**  
+   - URL: https://learn.microsoft.com/azure/
+   - Mô tả: Official Azure documentation and tutorials
+   
+3. **C# Programming Guide**
+   - URL: https://learn.microsoft.com/dotnet/csharp/
+   - Mô tả: Complete C# language reference and examples
+
+✅ **Tính năng thực tế:**
+- Semantic search qua toàn bộ Microsoft Learn
+- Truy cập real-time đến tài liệu mới nhất
+- Kết quả có context và source links
+"""
+        
+        elif server_name == "Azure MCP":
+            return f"""
+☁️ **Azure MCP Server**
+Action: {tool_name}
+Query: {query}
+
+🔧 **Kết quả mô phỏng:**
+- Resource Groups: 5 active
+- Storage Accounts: 12 total
+- Virtual Machines: 3 running
+- App Services: 8 deployed
+
+✅ **Tính năng thực tế:**
+- Quản lý 15+ Azure services
+- Monitor logs với KQL queries  
+- Database connectivity (PostgreSQL, SQL Server)
+- Cosmos DB integration
+"""
+        
+        elif server_name == "GitHub MCP":
+            return f"""
+🐙 **GitHub MCP Server**
+Action: {tool_name}
+Query: {query}
+
+📊 **Kết quả mô phỏng:**
+- Repositories found: 25
+- Open Issues: 12
+- Pull Requests: 8
+- Recent commits: 45
+
+✅ **Tính năng thực tế:**
+- Tạo và quản lý GitHub issues
+- Search repositories và code
+- Manage pull requests
+- Repository analytics
+"""
+        
+        else:
+            return f"""
+🛠️ **{server_name}**
+Tool: {tool_name}
+Query: {query}
+
+📋 **Mô phỏng kết quả:**
+{server_info['description']}
+
+Đây là demo mô phỏng. Trong thực tế, server này sẽ:
+- Kết nối trực tiếp với service
+- Thực hiện các thao tác real-time
+- Trả về dữ liệu chính xác từ API
+"""
+
+def create_demo_interface():
+    demo_instance = MCPServerDemo()
+    
+    def process_mcp_request(server_name: str, tool_name: str, query: str) -> str:
+        if not query.strip():
+            return "Vui lòng nhập query để test MCP server"
+        
+        return demo_instance.simulate_mcp_call(server_name, tool_name, query)
+    
+    def get_tools_for_server(server_name: str) -> gr.Dropdown:
+        if server_name in demo_instance.servers:
+            tools = demo_instance.servers[server_name]["tools"]
+            return gr.Dropdown(choices=tools, value=tools[0] if tools else None)
+        return gr.Dropdown(choices=[], value=None)
+    
+    with gr.Blocks(
+        title="Microsoft MCP Servers Demo",
+        theme=gr.themes.Soft(),
+        css="""
+        .gradio-container {
+            max-width: 1200px !important;
+        }
+        .server-info {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            margin: 10px 0;
+        }
+        """
+    ) as demo:
+        
+        gr.HTML("""
+        <div class="server-info">
+            <h1>🚀 Microsoft MCP Servers Demo</h1>
+            <p>Khám phá 10 Microsoft MCP Servers để tăng tốc development workflow của bạn!</p>
+            <p><strong>Model Context Protocol (MCP)</strong> cho phép AI assistant kết nối với external tools và data sources.</p>
+        </div>
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.HTML("<h3>🛠️ Chọn MCP Server</h3>")
+                server_dropdown = gr.Dropdown(
+                    choices=list(demo_instance.servers.keys()),
+                    value="Microsoft Learn Docs",
+                    label="MCP Server",
+                    info="Chọn server để test"
+                )
+                
+                tool_dropdown = gr.Dropdown(
+                    choices=demo_instance.servers["Microsoft Learn Docs"]["tools"],
+                    value="microsoft_docs_search",
+                    label="Tool/Function",
+                    info="Chọn function để gọi"
+                )
+                
+                query_input = gr.Textbox(
+                    label="Query/Input",
+                    placeholder="Nhập query để test MCP server...",
+                    lines=3,
+                    value="ASP.NET Core authentication"
+                )
+                
+                submit_btn = gr.Button("🔍 Test MCP Server", variant="primary")
+                
+            with gr.Column(scale=2):
+                gr.HTML("<h3>📊 Kết quả</h3>")
+                output_text = gr.Textbox(
+                    label="MCP Server Response",
+                    lines=20,
+                    max_lines=30,
+                    show_copy_button=True
+                )
+        
+        # Server info section
+        with gr.Row():
+            gr.HTML("""
+            <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0;">
+                <h3>📚 Thông tin về Microsoft MCP Servers</h3>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 15px;">
+                    <div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #0078d4;">
+                        <h4>📚 Microsoft Learn Docs</h4>
+                        <p>Tìm kiếm semantic qua tài liệu Microsoft chính thức</p>
+                    </div>
+                    <div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #00bcf2;">
+                        <h4>☁️ Azure MCP</h4>
+                        <p>Quản lý 15+ Azure services và resources</p>
+                    </div>
+                    <div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #24292e;">
+                        <h4>🐙 GitHub MCP</h4>
+                        <p>Tương tác với GitHub repos, issues, PRs</p>
+                    </div>
+                    <div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #0078d4;">
+                        <h4>🔄 Azure DevOps</h4>
+                        <p>Quản lý work items, builds, releases</p>
+                    </div>
+                </div>
+            </div>
+            """)
+        
+        # Event handlers
+        server_dropdown.change(
+            fn=lambda server: gr.Dropdown(
+                choices=demo_instance.servers[server]["tools"] if server in demo_instance.servers else [],
+                value=demo_instance.servers[server]["tools"][0] if server in demo_instance.servers and demo_instance.servers[server]["tools"] else None
+            ),
+            inputs=[server_dropdown],
+            outputs=[tool_dropdown]
+        )
+        
+        submit_btn.click(
+            fn=process_mcp_request,
+            inputs=[server_dropdown, tool_dropdown, query_input],
+            outputs=[output_text]
+        )
+        
+        # Load initial result
+        demo.load(
+            fn=lambda: demo_instance.simulate_mcp_call("Microsoft Learn Docs", "microsoft_docs_search", "ASP.NET Core authentication"),
+            outputs=[output_text]
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo_interface()
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        show_error=True
+    )
+

requirements.txt

@@ -0,0 +1,9 @@
+gradio==4.44.0
+openai==1.54.3
+requests==2.31.0
+python-dotenv==1.0.0
+mcp==1.0.0
+httpx==0.27.0
+asyncio-mqtt==0.16.2
+aiofiles==23.2.1
+