atlas-chat 0.1.0__py3-none-any.whl

atlas/mcp/ui-demo/main.py

@@ -0,0 +1,383 @@
+#!/usr/bin/env python3
+"""
+Demo MCP server that demonstrates custom UI capabilities.
+
+This server shows how MCP servers can return responses with custom_html
+fields to modify the UI.
+"""
+
+import os
+from typing import Any, Dict
+
+from fastmcp import FastMCP
+
+# Create the MCP server instance
+mcp = FastMCP("UI Demo Server")
+
+def load_template(template_name: str) -> str:
+    """
+    Load HTML template from templates directory.
+
+    Args:
+        template_name: Name of the template file to load
+
+    Returns:
+        The HTML content of the template
+
+    Raises:
+        FileNotFoundError: If the template file doesn't exist
+    """
+    template_path = os.path.join(os.path.dirname(__file__), "templates", template_name)
+    with open(template_path, "r") as f:
+        return f.read()
+
+@mcp.tool
+def create_button_demo() -> Dict[str, Any]:
+    """
+    Generate interactive HTML demonstrations showcasing advanced UI customization and dynamic interface capabilities.
+
+    This UI prototyping tool creates sophisticated interactive demonstrations:
+
+    **Interactive UI Components:**
+    - Custom HTML button interfaces with advanced styling
+    - Dynamic interaction patterns and user feedback systems
+    - Professional design templates with modern aesthetics
+    - Responsive layouts optimized for different screen sizes
+
+    **UI Customization Features:**
+    - Advanced CSS styling with modern design patterns
+    - Interactive JavaScript functionality for user engagement
+    - Professional color schemes and typography
+    - Accessibility-compliant interface elements
+
+    **Demonstration Capabilities:**
+    - Real-time UI modification examples
+    - Interactive component behavior showcases
+    - Design pattern implementation demonstrations
+    - User experience optimization examples
+
+    **Technical Implementation:**
+    - Clean HTML5 structure with semantic elements
+    - Modern CSS3 styling with flexbox and grid layouts
+    - Vanilla JavaScript for cross-browser compatibility
+    - Base64 encoding for seamless artifact delivery
+
+    **Use Cases:**
+    - UI design prototyping and concept validation
+    - Client demonstration and stakeholder presentations
+    - Design system documentation and examples
+    - Interactive tutorial and training materials
+    - A/B testing interface variations
+    - User experience research and testing
+
+    **Professional Features:**
+    - Production-ready code quality and structure
+    - Cross-browser compatibility and standards compliance
+    - Performance-optimized implementation
+    - Maintainable and extensible code architecture
+
+    **Integration Capabilities:**
+    - Canvas viewer integration for immediate preview
+    - Downloadable HTML for offline use and sharing
+    - Framework-agnostic implementation
+    - Easy customization and extension
+
+    Returns:
+        Dictionary containing:
+        - results: Demo creation summary and success confirmation
+        - artifacts: Interactive HTML demonstration as downloadable content
+        - display: Optimized canvas viewer configuration for immediate preview
+        - Interactive elements ready for user testing and evaluation
+        Or error message if HTML generation or template loading fails
+    """
+    # Load the HTML template
+    html_content = load_template("button_demo.html")
+
+    # Convert to v2 MCP format with artifacts and display
+    import base64
+    html_base64 = base64.b64encode(html_content.encode('utf-8')).decode('utf-8')
+
+    return {
+        "results": {
+            "content": "Custom UI demo created successfully! Check the canvas panel for the interactive demo.",
+            "success": True
+        },
+        "artifacts": [
+            {
+                "name": "ui_demo.html",
+                "b64": html_base64,
+                "mime": "text/html",
+                "size": len(html_content.encode('utf-8')),
+                "description": "Interactive UI demo with buttons and styling",
+                "viewer": "html"
+            }
+        ],
+        "display": {
+            "open_canvas": True,
+            "primary_file": "ui_demo.html",
+            "mode": "replace",
+            "viewer_hint": "html"
+        }
+    }
+
+@mcp.tool
+def create_data_visualization() -> Dict[str, Any]:
+    """
+    Create a simple data visualization using HTML and CSS.
+
+    Returns:
+        Dictionary with custom HTML containing a bar chart visualization
+    """
+    # Load the HTML template
+    html_content = load_template("data_visualization.html")
+
+    # Convert to v2 MCP format with artifacts and display
+    import base64
+    import datetime
+    html_base64 = base64.b64encode(html_content.encode('utf-8')).decode('utf-8')
+
+    return {
+        "results": {
+            "content": "Data visualization created and displayed in the canvas panel.",
+            "data_points": {
+                "sales": 75,
+                "satisfaction": 92,
+                "market_share": 58
+            }
+        },
+        "artifacts": [
+            {
+                "name": "data_visualization.html",
+                "b64": html_base64,
+                "mime": "text/html",
+                "size": len(html_content.encode('utf-8')),
+                "description": "Sales and customer satisfaction data visualization",
+                "viewer": "html"
+            }
+        ],
+        "display": {
+            "open_canvas": True,
+            "primary_file": "data_visualization.html",
+            "mode": "replace",
+            "viewer_hint": "html"
+        },
+        "meta_data": {
+            "chart_type": "bar_chart",
+            "data_points": 3,
+            "metrics": ["sales", "satisfaction", "market_share"],
+            "tool_execution": "create_data_visualization executed successfully",
+            "timestamp": f"{datetime.datetime.now().isoformat()}"
+        }
+    }
+
+@mcp.tool
+def create_form_demo() -> Dict[str, Any]:
+    """
+    Create a demo form to show interactive UI capabilities.
+
+    Returns:
+        Dictionary with custom HTML containing an interactive form
+    """
+    # Load the HTML template
+    html_content = load_template("form_demo.html")
+
+    # Convert to v2 MCP format with artifacts and display
+    import base64
+    html_base64 = base64.b64encode(html_content.encode('utf-8')).decode('utf-8')
+
+    return {
+        "results": {
+            "content": "Interactive form demo created! You can interact with the form in the canvas panel.",
+            "form_type": "demo"
+        },
+        "artifacts": [
+            {
+                "name": "interactive_form.html",
+                "b64": html_base64,
+                "mime": "text/html",
+                "size": len(html_content.encode('utf-8')),
+                "description": "Interactive form demo with input validation",
+                "viewer": "html"
+            }
+        ],
+        "display": {
+            "open_canvas": True,
+            "primary_file": "interactive_form.html",
+            "mode": "replace",
+            "viewer_hint": "html"
+        },
+        "meta_data": {
+            "form_fields": ["name", "email", "message"],
+            "interactive": True,
+            "validation": "client_side"
+        }
+    }
+
+@mcp.tool
+def get_image() -> Dict[str, Any]:
+    """
+    Return the badmesh.png image from the ui-demo directory.
+
+    Returns:
+        Dictionary with the image data encoded in base64
+    """
+    # Get the path to the image file
+    image_path = os.path.join(os.path.dirname(__file__), "badmesh.png")
+
+    # Read the image file as binary
+    with open(image_path, "rb") as f:
+        image_data = f.read()
+
+    # Encode the image data in base64
+    import base64
+    image_base64 = base64.b64encode(image_data).decode('utf-8')
+
+    # Return the image data with appropriate MIME type
+    return {
+        "results": {
+            "content": "Image retrieved successfully!"
+        },
+        "artifacts": [
+            {
+                "name": "badmesh.png",
+                "b64": image_base64,
+                "mime": "image/png",
+                "size": len(image_data),
+                "description": "Bad mesh image for demonstration",
+                "viewer": "image"
+            }
+        ],
+        "display": {
+            "open_canvas": True,
+            "primary_file": "badmesh.png",
+            "mode": "replace",
+            "viewer_hint": "image"
+        }
+    }
+
+@mcp.tool
+def create_iframe_demo() -> Dict[str, Any]:
+    """
+    Create a demo showing how to embed external content using iframes.
+
+    This demonstrates the v2 MCP iframe capability for embedding interactive
+    external content like dashboards, visualizations, or web applications.
+
+    IMPORTANT - CSP Configuration Required:
+        To display external URLs in iframes, the SECURITY_CSP_VALUE environment
+        variable must include the iframe URL in the frame-src directive.
+
+        Example for https://www.sandia.gov/:
+        SECURITY_CSP_VALUE="... frame-src 'self' blob: data: https://www.sandia.gov/; ..."
+
+        Without proper CSP configuration, the browser will block the iframe.
+
+    Returns:
+        Dictionary with iframe display configuration
+    """
+    return {
+        "results": {
+            "content": "Iframe demo created! An external webpage will be displayed in the canvas panel.",
+            "iframe_url": "https://www.sandia.gov/"
+        },
+        "artifacts": [],
+        "display": {
+            "open_canvas": True,
+            "type": "iframe",
+            "url": "https://www.sandia.gov/",
+            "title": "Example Website",
+            "sandbox": "allow-scripts allow-same-origin",
+            "mode": "replace"
+        }
+    }
+
+@mcp.tool
+def create_html_with_iframe() -> Dict[str, Any]:
+    """
+    Create an HTML artifact that includes an embedded iframe.
+
+    This demonstrates how MCP tools can return HTML content with embedded
+    iframes that will be properly rendered in the canvas panel.
+
+    IMPORTANT - CSP Configuration Required:
+        To display external URLs in iframes, the SECURITY_CSP_VALUE environment
+        variable must include the iframe URL in the frame-src directive.
+
+        Example for https://www.sandia.gov/:
+        SECURITY_CSP_VALUE="... frame-src 'self' blob: data: https://www.sandia.gov/; ..."
+
+        Without proper CSP configuration, the browser will block the iframe.
+
+    Returns:
+        Dictionary with HTML artifact containing an iframe
+    """
+    html_content = """<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+            background: #1a1a1a;
+            color: #fff;
+        }
+        .iframe-container {
+            width: 100%;
+            height: 600px;
+            border: 2px solid #444;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        h1 {
+            color: #4a9eff;
+            margin-bottom: 10px;
+        }
+        p {
+            color: #aaa;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Embedded Content Demo</h1>
+    <p>This HTML artifact includes an embedded iframe showing external content:</p>
+    <div class="iframe-container">
+        <iframe
+            src="https://www.sandia.gov/"
+            width="100%"
+            height="100%"
+            sandbox="allow-scripts allow-same-origin"
+            frameborder="0">
+        </iframe>
+    </div>
+</body>
+</html>"""
+
+    import base64
+    html_base64 = base64.b64encode(html_content.encode('utf-8')).decode('utf-8')
+
+    return {
+        "results": {
+            "content": "HTML with embedded iframe created! Check the canvas panel."
+        },
+        "artifacts": [
+            {
+                "name": "iframe_demo.html",
+                "b64": html_base64,
+                "mime": "text/html",
+                "size": len(html_content.encode('utf-8')),
+                "description": "HTML page with embedded iframe",
+                "viewer": "html"
+            }
+        ],
+        "display": {
+            "open_canvas": True,
+            "primary_file": "iframe_demo.html",
+            "mode": "replace",
+            "viewer_hint": "html"
+        }
+    }
+
+if __name__ == "__main__":
+    mcp.run()

atlas/mcp/ui-demo/templates/button_demo.html

@@ -0,0 +1,32 @@
+<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+            padding: 28px 32px; 
+            border-radius: 14px; 
+            color: white; 
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 32px auto;">
+    <h2 style="margin-top: 0;">🎨 Custom UI Demo</h2>
+    <p>This content was injected by an MCP server using the custom_html field!</p>
+    <div style="display: flex; gap: 10px; margin-top: 15px;">
+        <button onclick="alert('Hello from MCP!')" 
+                style="background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">
+            Click Me!
+        </button>
+        <button onclick="document.getElementById('demo-text').style.color = 'yellow'" 
+                style="background: #ff9800; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">
+            Change Text Color
+        </button>
+    </div>
+    <p id="demo-text" style="margin-top: 15px; font-size: 16px;">
+        This text can be modified by the button above!
+    </p>
+    <div style="margin-top: 20px; padding: 10px; background: rgba(255,255,255,0.2); border-radius: 5px;">
+        <strong>Capabilities Demonstrated:</strong>
+        <ul style="margin: 10px 0; padding-left: 20px;">
+            <li>Custom HTML injection</li>
+            <li>Interactive JavaScript buttons</li>
+            <li>Dynamic styling</li>
+            <li>Safe HTML sanitization</li>
+        </ul>
+    </div>
+</div>

atlas/mcp/ui-demo/templates/data_visualization.html

@@ -0,0 +1,32 @@
+<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+            padding: 28px 32px; 
+            border-radius: 14px; 
+            color: white; 
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 32px auto;">
+    <h3 style="text-align: center; margin-top: 0; color: #63b3ed;">📊 Sample Data Visualization</h3>
+    <div style="margin: 20px 0;">
+        <div style="margin-bottom: 10px;">
+            <span style="color: #a0aec0;">Sales (Jan-Mar 2024)</span>
+            <div style="background: #1a202c; height: 30px; border-radius: 15px; position: relative; margin-top: 5px;">
+                <div style="background: linear-gradient(90deg, #4299e1, #63b3ed); height: 100%; width: 75%; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold;">75%</div>
+            </div>
+        </div>
+        <div style="margin-bottom: 10px;">
+            <span style="color: #a0aec0;">Customer Satisfaction</span>
+            <div style="background: #1a202c; height: 30px; border-radius: 15px; position: relative; margin-top: 5px;">
+                <div style="background: linear-gradient(90deg, #48bb78, #68d391); height: 100%; width: 92%; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold;">92%</div>
+            </div>
+        </div>
+        <div style="margin-bottom: 10px;">
+            <span style="color: #a0aec0;">Market Share</span>
+            <div style="background: #1a202c; height: 30px; border-radius: 15px; position: relative; margin-top: 5px;">
+                <div style="background: linear-gradient(90deg, #ed8936, #f6ad55); height: 100%; width: 58%; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold;">58%</div>
+            </div>
+        </div>
+    </div>
+    <div style="text-align: center; margin-top: 20px; padding: 10px; background: rgba(99, 179, 237, 0.1); border-radius: 5px;">
+        <small style="color: #a0aec0;">Generated by MCP Server with custom HTML</small>
+    </div>
+</div>

atlas/mcp/ui-demo/templates/form_demo.html

@@ -0,0 +1,28 @@
+<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+            padding: 28px 32px; 
+            border-radius: 14px; 
+            color: white; 
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 32px auto;">
+    <h3 style="color: #63b3ed; margin-top: 0; text-align: center;">📋 Interactive Form Demo</h3>
+    <form onsubmit="event.preventDefault(); alert('Form submitted! Data: ' + JSON.stringify({name: this.name.value, email: this.email.value, message: this.message.value}));" style="display: flex; flex-direction: column; gap: 15px;">
+        <div>
+            <label style="display: block; color: #a0aec0; margin-bottom: 5px;">Name:</label>
+            <input type="text" name="name" style="width: 100%; padding: 8px 12px; border: 1px solid #4a5568; border-radius: 6px; background: #2d3748; color: white; box-sizing: border-box;" placeholder="Enter your name" />
+        </div>
+        <div>
+            <label style="display: block; color: #a0aec0; margin-bottom: 5px;">Email:</label>
+            <input type="email" name="email" style="width: 100%; padding: 8px 12px; border: 1px solid #4a5568; border-radius: 6px; background: #2d3748; color: white; box-sizing: border-box;" placeholder="Enter your email" />
+        </div>
+        <div>
+            <label style="display: block; color: #a0aec0; margin-bottom: 5px;">Message:</label>
+            <textarea name="message" rows="4" style="width: 100%; padding: 8px 12px; border: 1px solid #4a5568; border-radius: 6px; background: #2d3748; color: white; resize: vertical; box-sizing: border-box;" placeholder="Enter your message"></textarea>
+        </div>
+        <button type="submit" style="background: linear-gradient(45deg, #667eea, #764ba2); color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">Submit Form</button>
+    </form>
+    <div style="margin-top: 20px; padding: 15px; background: rgba(72, 187, 120, 0.1); border-radius: 6px; border-left: 4px solid #48bb78;">
+        <strong style="color: #68d391;">Note:</strong> 
+        <span style="color: #a0aec0;">This form demonstrates how MCP servers can create interactive UI elements. Form submission shows an alert with the entered data.</span>
+    </div>
+</div>