initial

seligj95 · seligj95 · commit 4bdb858402e7 · 2025-08-15T16:43:59.000-04:00
diff --git a/README.md b/README.md
@@ -1,15 +1,15 @@
 # Python Todo List App with MCP Integration
 
-A Flask-based todo list application that exposes operations as MCP (Model Context Protocol) tools over HTTP and can be deployed to Azure App Service.
+A FastAPI-based todo list application that exposes operations as MCP (Model Context Protocol) tools over HTTP and can be deployed to Azure App Service.
 
 ## Features
 
 - ✅ **CRUD Operations**: Create, read, update, delete todos
 - 🎯 **Priority Management**: Set priority levels (low, medium, high)
 - ✅ **Mark Complete/Incomplete**: Toggle completion status
-- 🌐 **Web Interface**: Clean, responsive Bootstrap UI
-- 💬 **Chat Interface**: Placeholder for future LLM integration
+- 🌐 **Web Interface**: Clean, responsive UI with copy-to-clipboard functionality
 - 🔧 **MCP Tools**: HTTP-accessible tools for external integrations
+- 📋 **MCP URL Display**: Dynamic MCP server URL with one-click copy functionality
 - ☁️ **Azure Ready**: Optimized for Azure App Service deployment
 
 ## MCP Tools Available
@@ -26,15 +26,15 @@ The application exposes the following MCP tools over HTTP:
 
 ### Prerequisites
 
-- Python 3.12+
+- Python 3.11+
 - Virtual environment (venv)
 
 ### Setup
 
 1. **Clone and setup environment**:
    ```bash
-   git clone <repository-url>
-   cd python-todo-mcp-agent
+   git clone https://github.com/Azure-Samples/app-service-python-todo-mcp
+   cd app-service-python-todo-mcp
    python -m venv .venv
    .venv\Scripts\activate  # Windows
    # or
@@ -46,22 +46,15 @@ The application exposes the following MCP tools over HTTP:
    pip install -r requirements.txt
    ```
 
-3. **Set environment variables** (optional):
-   ```bash
-   set SECRET_KEY=your-secret-key-here
-   set DATABASE_URL=sqlite:///todos.db
-   ```
-
-4. **Run the application**:
+3. **Run the application**:
    ```bash
    python main.py
    ```
 
-5. **Access the application**:
+4. **Access the application**:
    - Web Interface: http://localhost:8000
-   - Chat Interface: http://localhost:8000/chat
    - Health Check: http://localhost:8000/health
-   - MCP Endpoint: http://localhost:8000/mcp
+   - MCP Endpoint: http://localhost:8000/mcp/stream
    - MCP Tools: http://localhost:8000/mcp/tools/*
 
 ## Azure Deployment
@@ -78,13 +71,7 @@ The application exposes the following MCP tools over HTTP:
    azd init
    ```
 
-2. **Set environment variables**:
-   ```bash
-   azd env set SECRET_KEY "your-production-secret-key"
-   azd env set DATABASE_URL "sqlite:///todos.db"
-   ```
-
-3. **Deploy to Azure**:
+2. **Deploy to Azure**:
    ```bash
    azd up
    ```
@@ -94,20 +81,19 @@ The application exposes the following MCP tools over HTTP:
 The deployment creates:
 
 - **App Service Plan**: P0V3 (Premium V3, Linux)
-- **App Service**: Python 3.12 runtime
-- **Managed Identity**: Secure Azure resource access
+- **App Service**: Python 3.11 runtime with Uvicorn ASGI server
 
 ## Architecture
 
 ```
 ┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
-│   Web Browser   │────│   Flask App      │────│   SQLite DB     │
+│   Web Browser   │────│   FastAPI App    │────│   SQLite DB     │
 │   (Todo UI)     │    │   (CRUD API)     │    │   (Data Store)  │
 └─────────────────┘    └──────────────────┘    └─────────────────┘
                                 │
                        ┌──────────────────┐
                        │   MCP Server     │
-                       │   (HTTP Tools)   │
+                       │   (HTTP Stream)  │
                        └──────────────────┘
                                 │
                        ┌──────────────────┐
@@ -127,46 +113,38 @@ The deployment creates:
 - `PATCH /api/todos/{id}/complete` - Toggle completion
 
 ### MCP Integration
-- `GET /mcp` - MCP server info and available tools
-- `POST /mcp` - MCP protocol endpoint (JSON-RPC 2.0)
+- `GET /mcp/stream` - MCP server endpoint (HTTP streaming)
+- `POST /mcp/stream` - MCP protocol endpoint (JSON-RPC 2.0)
 - `GET/POST /mcp/tools/create_todo` - Direct tool access
 - `GET/POST /mcp/tools/list_todos` - Direct tool access
 - `POST /mcp/tools/update_todo` - Direct tool access
 - `POST /mcp/tools/delete_todo` - Direct tool access
 - `POST /mcp/tools/mark_todo_complete` - Direct tool access
 
-## Environment Variables
+## MCP Configuration
 
-| Variable | Description | Default |
-|----------|-------------|---------|
-| `SECRET_KEY` | Flask secret key for sessions | `dev-secret-key` |
-| `DATABASE_URL` | Database connection string | `sqlite:///todos.db` |
+The application automatically displays the MCP server URL in the web interface with environment-aware detection:
 
-## Development Notes
+- **Local Development**: `http://localhost:8000/mcp/stream`
+- **Azure App Service**: `https://your-app-name.azurewebsites.net/mcp/stream`
 
-- **Database**: Uses SQLite for simplicity (can be upgraded to Azure SQL)
-- **Styling**: Bootstrap 5 with Font Awesome icons
-- **Frontend**: Vanilla JavaScript with fetch API
-- **Backend**: Flask with SQLAlchemy ORM
-- **MCP**: Native JSON-RPC 2.0 implementation in Flask
-- **Security**: HTTPS only, managed identity, CORS enabled
+### VS Code MCP Integration
 
-## Future Enhancements
+To use this app as an MCP server in VS Code, add the following to your `.vscode/mcp.json`:
 
-- 🤖 **LLM Integration**: Connect chat interface to language models
-- 🗄️ **Database Upgrade**: Migrate to Azure SQL Database
-- 🔐 **Authentication**: Add user accounts and auth
-- 📱 **Mobile App**: React Native or Flutter companion
-- 🔍 **Search**: Full-text search capabilities
-- 📊 **Analytics**: Usage metrics and insights
-
-## Contributing
+```json
+{
+  "servers": {
+    "todo-mcp-server": {
+      "url": "http://localhost:8000/mcp/stream",
+      "type": "http"
+    }
+  },
+  "inputs": []
+}
+```
 
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Add tests if applicable
-5. Submit a pull request
+For the deployed Azure version, replace the URL with your App Service URL.
 
 ## License
 
diff --git a/infra/main.bicep b/infra/main.bicep
@@ -6,9 +6,7 @@ param environmentName string
 @description('Primary location for all resources')
 param location string = resourceGroup().location
 
-@description('Secret key for Flask application')
-@secure()
-param secretKey string = ''
+
 
 // Generate unique resource token
 var resourceToken = uniqueString(subscription().id, resourceGroup().id, location, environmentName)
@@ -63,10 +61,6 @@ resource appService 'Microsoft.Web/sites@2024-04-01' = {
       ftpsState: 'FtpsOnly'
       appCommandLine: 'python -m uvicorn main:app --host 0.0.0.0 --port 8000'
       appSettings: [
-        {
-          name: 'SECRET_KEY'
-          value: secretKey
-        }
         {
           name: 'WEBSITES_PORT'
           value: '8000'
diff --git a/main.py b/main.py
@@ -9,6 +9,7 @@
 from pydantic import BaseModel
 from typing import Any, Dict, Optional
 import logging
+import os
 from contextlib import asynccontextmanager
 from datetime import datetime
 
@@ -398,7 +399,19 @@ async def lifespan(app: FastAPI):
 @app.get("/", response_class=HTMLResponse)
 async def root(request: Request):
     """Serve the main todo list page"""
-    return templates.TemplateResponse("index.html", {"request": request})
+    # Determine if running locally or in Azure App Service
+    host = request.headers.get("host", "localhost:8000")
+    
+    # Check if running in Azure App Service
+    if "azurewebsites.net" in host:
+        mcp_server_url = f"https://{host}/mcp/stream"
+    else:
+        mcp_server_url = f"http://{host}/mcp/stream"
+    
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "mcp_server_url": mcp_server_url
+    })
 
 @app.get("/health")
 async def health():
diff --git a/static/css/style.css b/static/css/style.css
@@ -29,6 +29,67 @@ body {
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
+.mcp-info {
+    margin-top: 15px;
+    padding: 15px;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border-radius: 8px;
+    border-left: 4px solid #007bff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.mcp-url {
+    color: #495057;
+    font-size: 0.95em;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.mcp-url code {
+    background: #f8f9fa;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.9em;
+    color: #0d6efd;
+    border: 1px solid #e9ecef;
+    font-weight: 500;
+    letter-spacing: -0.5px;
+    display: inline-block;
+    word-break: break-all;
+}
+
+.copy-btn {
+    background: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 0.9em;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 500;
+    box-shadow: 0 2px 4px rgba(0,123,255,0.2);
+}
+
+.copy-btn:hover {
+    background: #0056b3;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,123,255,0.3);
+}
+
+.copy-btn:active {
+    transform: translateY(0px);
+    box-shadow: 0 2px 4px rgba(0,123,255,0.2);
+}
+
 .header h1 {
     color: #2c3e50;
     margin-bottom: 10px;
diff --git a/templates/index.html b/templates/index.html
@@ -3,15 +3,23 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>App Service To-do List App</title>
+    <title>App Service MCP To-do List App</title>
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     <div class="container">
         <!-- Header -->
         <div class="header">
-            <h1>App Service To-do List App</h1>
-            <p>With MCP and Agent Integration</p>
+            <h1>App Service MCP To-do List App</h1>
+            <div class="mcp-info">
+                <div class="mcp-url">
+                    <span>MCP Server:</span>
+                    <code id="mcpUrl">{{ mcp_server_url }}</code>
+                    <button id="copyBtn" class="copy-btn" onclick="copyMcpUrl()" title="Copy MCP Server URL">
+                        📋 Copy
+                    </button>
+                </div>
+            </div>
         </div>
 
         <!-- Add Todo Section -->
@@ -55,5 +63,41 @@ <h2>Your Todos</h2>
     </div>
 
     <script src="/static/js/todo.js"></script>
+    <script>
+        function copyMcpUrl() {
+            const mcpUrl = document.getElementById('mcpUrl').textContent;
+            const copyBtn = document.getElementById('copyBtn');
+            
+            navigator.clipboard.writeText(mcpUrl).then(function() {
+                // Change button text temporarily to show success
+                const originalText = copyBtn.innerHTML;
+                copyBtn.innerHTML = '✅ Copied!';
+                copyBtn.style.background = '#28a745';
+                
+                setTimeout(function() {
+                    copyBtn.innerHTML = originalText;
+                    copyBtn.style.background = '';
+                }, 2000);
+            }).catch(function(err) {
+                // Fallback for older browsers
+                const textArea = document.createElement('textarea');
+                textArea.value = mcpUrl;
+                document.body.appendChild(textArea);
+                textArea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textArea);
+                
+                // Show success feedback
+                const originalText = copyBtn.innerHTML;
+                copyBtn.innerHTML = '✅ Copied!';
+                copyBtn.style.background = '#28a745';
+                
+                setTimeout(function() {
+                    copyBtn.innerHTML = originalText;
+                    copyBtn.style.background = '';
+                }, 2000);
+            });
+        }
+    </script>
 </body>
 </html>
