Spaces:

designfailure
/

insur-mcp

Running

App Files Files Community

designfailure commited on Jun 2

Commit

8c1a4dd

verified ·

1 Parent(s): f138aac

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +579 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Insur Mcp
-emoji: 🌍
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: insur-mcp
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,579 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Insur.MCP | Agentic AI for Insurance</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom CSS for elements that need more precise control */
+        .hero-gradient {
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .swipe-container {
+            scroll-snap-type: x mandatory;
+        }
+        .swipe-card {
+            scroll-snap-align: start;
+        }
+        /* Mobile menu animation */
+        .mobile-menu {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .mobile-menu.open {
+            max-height: 500px;
+        }
+        /* Canvas area styling */
+        .canvas-area {
+            background-color: #f8fafc;
+            border: 2px dashed #cbd5e1;
+            border-radius: 0.5rem;
+            min-height: 400px;
+        }
+        .draggable-item {
+            cursor: grab;
+            user-select: none;
+        }
+        .draggable-item:active {
+            cursor: grabbing;
+        }
+    </style>
+</head>
+<body class="font-sans antialiased text-gray-800 bg-white">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <span class="text-blue-600 font-bold text-xl">Insur.MCP</span>
+                    </div>
+                </div>
+                <!-- Desktop Navigation -->
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#" class="text-blue-600 font-medium border-b-2 border-blue-600 px-1">Home</a>
+                    <a href="#features" class="text-gray-500 hover:text-blue-600 font-medium px-1">Features</a>
+                    <a href="#about" class="text-gray-500 hover:text-blue-600 font-medium px-1">About</a>
+                    <a href="subpage.html" class="text-gray-500 hover:text-blue-600 font-medium px-1">Canvas</a>
+                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition duration-300">
+                        Contact Us
+                    </button>
+                </div>
+                <!-- Mobile menu button -->
+                <div class="md:hidden flex items-center">
+                    <button id="mobile-menu-button" class="text-gray-500 hover:text-blue-600 focus:outline-none">
+                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="mobile-menu md:hidden bg-white">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600 bg-blue-50">Home</a>
+                <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-blue-50">Features</a>
+                <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-blue-50">About</a>
+                <a href="subpage.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-blue-50">Canvas</a>
+                <button class="w-full text-left block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-600 hover:bg-blue-700">
+                    Contact Us
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="hero-gradient">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">
+                        Deploying Synthetic Workers with Strategic Confidence
+                    </h1>
+                    <p class="text-lg text-gray-700 mb-8">
+                        At Insur.MCP, we're not just experimenting with AI — we're deploying synthetic workers through our Strategic and Structured Iterative Model Context Protocol (MSP) approach.
+                    </p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
+                            Get Started
+                        </button>
+                        <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-md font-medium transition duration-300">
+                            Learn More
+                        </button>
+                    </div>
+                </div>
+                <div class="md:w-1/2 flex justify-center">
+                    <div class="relative w-full max-w-md">
+                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-blue-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
+                        <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
+                        <div class="relative bg-white p-8 rounded-2xl shadow-xl">
+                            <h3 class="text-xl font-semibold text-gray-800 mb-4">Agentic Workflow System</h3>
+                            <p class="text-gray-600 mb-6">Helps incumbents escape pilot purgatory and confidently scale real AI outcomes.</p>
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
+                                    <i class="fas fa-robot text-blue-600 text-xl"></i>
+                                </div>
+                                <div class="ml-4">
+                                    <p class="text-sm font-medium text-gray-900">Digital Workforce</p>
+                                    <p class="text-sm text-gray-500">Always-on synthetic agents</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Scrollable Content Section -->
+    <section id="about" class="py-16 bg-white">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Approach</h2>
+                <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
+            </div>
+            <div class="space-y-12 text-lg text-gray-700 leading-relaxed">
+                <p>
+                    At Insur.MCP, we help corporates and incubators automate the digitalization of skills by replicating how teams work — their tools, tasks, and workflows — into agentic AI systems.
+                </p>
+                <p>
+                    We bring deep insurance industry knowledge where departments run on repetitive, structured tasks, and we translate that into multi-agent AI environments that perform jobs-to-be-done autonomously.
+                </p>
+                <p>
+                    Our mission is to build secure, sandboxed workspaces with synthetic datasets to validate and train these agents safely, because we believe the future of work is agentic, modular, and truly autonomous.
+                </p>
+                <p>
+                    It's like giving every team a digital twin that thinks and acts, not just reacts.
+                </p>
+            </div>
+        </div>
+    </section>
+    <!-- Feature Cards Section -->
+    <section id="features" class="py-16 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Capabilities</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+                    Strategic deployment of synthetic workers through our MSP approach
+                </p>
+                <div class="w-20 h-1 bg-blue-600 mx-auto mt-4"></div>
+            </div>
+            <!-- Desktop Grid Layout -->
+            <div class="hidden md:grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
+                    <div class="w-14 h-14 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-project-diagram text-blue-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-3">Agentic Workflows</h3>
+                    <p class="text-gray-600">
+                        Transform traditional processes into autonomous, self-optimizing workflows powered by AI agents that collaborate like human teams.
+                    </p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
+                    <div class="w-14 h-14 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-3">Sandboxed Validation</h3>
+                    <p class="text-gray-600">
+                        Test and refine synthetic workers in secure environments with synthetic data before deployment to production systems.
+                    </p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
+                    <div class="w-14 h-14 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-random text-blue-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-3">Modular Architecture</h3>
+                    <p class="text-gray-600">
+                        Compose and reconfigure specialized AI agents to match evolving business needs without costly reimplementation.
+                    </p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
+                    <div class="w-14 h-14 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-database text-blue-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-3">Industry Knowledge</h3>
+                    <p class="text-gray-600">
+                        Pre-built insurance domain models that understand underwriting, claims, compliance and other core functions.
+                    </p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
+                    <div class="w-14 h-14 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-sync-alt text-blue-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-3">Continuous Learning</h3>
+                    <p class="text-gray-600">
+                        Agents that improve over time through reinforcement learning and human feedback loops.
+                    </p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
+                    <div class="w-14 h-14 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-chart-line text-blue-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-3">Performance Analytics</h3>
+                    <p class="text-gray-600">
+                        Comprehensive dashboards tracking synthetic worker efficiency, accuracy and business impact.
+                    </p>
+                </div>
+            </div>
+            <!-- Mobile Swipe Layout -->
+            <div class="md:hidden overflow-x-auto pb-6 swipe-container">
+                <div class="flex space-x-4 w-max px-4">
+                    <div class="w-72 flex-shrink-0 bg-white p-6 rounded-xl shadow-sm swipe-card">
+                        <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-4">
+                            <i class="fas fa-project-diagram text-blue-600 text-xl"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Agentic Workflows</h3>
+                        <p class="text-sm text-gray-600">
+                            Transform traditional processes into autonomous workflows powered by AI agents.
+                        </p>
+                    </div>
+                    <div class="w-72 flex-shrink-0 bg-white p-6 rounded-xl shadow-sm swipe-card">
+                        <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-4">
+                            <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Sandboxed Validation</h3>
+                        <p class="text-sm text-gray-600">
+                            Test synthetic workers in secure environments before deployment.
+                        </p>
+                    </div>
+                    <div class="w-72 flex-shrink-0 bg-white p-6 rounded-xl shadow-sm swipe-card">
+                        <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-4">
+                            <i class="fas fa-random text-blue-600 text-xl"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Modular Architecture</h3>
+                        <p class="text-sm text-gray-600">
+                            Reconfigure specialized AI agents to match business needs.
+                        </p>
+                    </div>
+                    <div class="w-72 flex-shrink-0 bg-white p-6 rounded-xl shadow-sm swipe-card">
+                        <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-4">
+                            <i class="fas fa-database text-blue-600 text-xl"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Industry Knowledge</h3>
+                        <p class="text-sm text-gray-600">
+                            Pre-built insurance domain models for core functions.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-16 bg-blue-600 text-white">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Insurance Operations?</h2>
+            <p class="text-xl mb-8 opacity-90">
+                Discover how our agentic AI systems can automate your most complex workflows.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-md font-medium transition duration-300">
+                    Schedule a Demo
+                </button>
+                <button class="border border-white text-white hover:bg-blue-700 px-8 py-3 rounded-md font-medium transition duration-300">
+                    Contact Our Team
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Insur.MCP</h3>
+                    <p class="text-gray-400">
+                        Deploying synthetic workers with strategic confidence through our MSP approach.
+                    </p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
+                        <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
+                        <li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li>
+                        <li><a href="subpage.html" class="text-gray-400 hover:text-white transition">Canvas</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-linkedin text-xl"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-twitter text-xl"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-github text-xl"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-medium text-xl"></i>
+                        </a>
+                    </div>
+                    <p class="text-gray-400 mt-4">
+                        [email protected]<br>
+                        +1 (555) 123-4567
+                    </p>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 text-sm">
+                    © 2023 Insur.MCP. All rights reserved.
+                </p>
+                <div class="flex space-x-6 mt-4 md:mt-0">
+                    <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Canvas Subpage (hidden by default) -->
+    <div id="subpage" class="fixed inset-0 bg-white z-50 overflow-auto hidden">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Agent Workflow Canvas</h2>
+                <button id="close-subpage" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times text-2xl"></i>
+                </button>
+            </div>
+            <div class="flex flex-col lg:flex-row gap-6">
+                <!-- Components Panel -->
+                <div class="lg:w-1/4 bg-gray-50 p-4 rounded-lg">
+                    <h3 class="font-semibold text-lg mb-4">Components</h3>
+                    <div class="space-y-3">
+                        <div class="draggable-item bg-white p-3 rounded border border-gray-200 cursor-move" draggable="true" data-type="input">
+                            <i class="fas fa-keyboard text-blue-500 mr-2"></i> Input Node
+                        </div>
+                        <div class="draggable-item bg-white p-3 rounded border border-gray-200 cursor-move" draggable="true" data-type="process">
+                            <i class="fas fa-cog text-green-500 mr-2"></i> Process Node
+                        </div>
+                        <div class="draggable-item bg-white p-3 rounded border border-gray-200 cursor-move" draggable="true" data-type="decision">
+                            <i class="fas fa-code-branch text-yellow-500 mr-2"></i> Decision Node
+                        </div>
+                        <div class="draggable-item bg-white p-3 rounded border border-gray-200 cursor-move" draggable="true" data-type="output">
+                            <i class="fas fa-file-export text-red-500 mr-2"></i> Output Node
+                        </div>
+                        <div class="draggable-item bg-white p-3 rounded border border-gray-200 cursor-move" draggable="true" data-type="agent">
+                            <i class="fas fa-robot text-purple-500 mr-2"></i> AI Agent
+                        </div>
+                    </div>
+                </div>
+                <!-- Canvas Area -->
+                <div class="lg:w-3/4">
+                    <div id="workflow-canvas" class="canvas-area p-6">
+                        <p class="text-gray-500 text-center py-20">Drag and drop components here to build your agent workflow</p>
+                    </div>
+                    <div class="mt-4 flex justify-end space-x-3">
+                        <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
+                            Clear Canvas
+                        </button>
+                        <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
+                            Save Workflow
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('open');
+        });
+        // Canvas subpage functionality
+        const canvasLink = document.querySelector('a[href="subpage.html"]');
+        const subpage = document.getElementById('subpage');
+        const closeSubpage = document.getElementById('close-subpage');
+        if (canvasLink) {
+            canvasLink.addEventListener('click', (e) => {
+                e.preventDefault();
+                subpage.classList.remove('hidden');
+                document.body.style.overflow = 'hidden';
+            });
+        }
+        closeSubpage.addEventListener('click', () => {
+            subpage.classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        });
+        // Drag and drop functionality for canvas
+        const draggableItems = document.querySelectorAll('.draggable-item');
+        const canvas = document.getElementById('workflow-canvas');
+        draggableItems.forEach(item => {
+            item.addEventListener('dragstart', (e) => {
+                e.dataTransfer.setData('text/plain', e.target.dataset.type);
+                e.dataTransfer.effectAllowed = 'copy';
+            });
+        });
+        canvas.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+        });
+        canvas.addEventListener('drop', (e) => {
+            e.preventDefault();
+            const type = e.dataTransfer.getData('text/plain');
+            // Create a new node based on the type
+            const newNode = document.createElement('div');
+            newNode.className = 'inline-block bg-white p-3 m-2 rounded-lg shadow-sm border cursor-move';
+            // Position the new node near the drop location
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left - 50;
+            const y = e.clientY - rect.top - 20;
+            newNode.style.position = 'absolute';
+            newNode.style.left = `${x}px`;
+            newNode.style.top = `${y}px`;
+            // Set content based on type
+            let icon, color, text;
+            switch(type) {
+                case 'input':
+                    icon = 'keyboard';
+                    color = 'blue';
+                    text = 'Input';
+                    break;
+                case 'process':
+                    icon = 'cog';
+                    color = 'green';
+                    text = 'Process';
+                    break;
+                case 'decision':
+                    icon = 'code-branch';
+                    color = 'yellow';
+                    text = 'Decision';
+                    break;
+                case 'output':
+                    icon = 'file-export';
+                    color = 'red';
+                    text = 'Output';
+                    break;
+                case 'agent':
+                    icon = 'robot';
+                    color = 'purple';
+                    text = 'AI Agent';
+                    break;
+            }
+            newNode.innerHTML = `
+                <i class="fas fa-${icon} text-${color}-500 mr-2"></i> ${text}
+            `;
+            canvas.appendChild(newNode);
+            // Make new nodes draggable
+            newNode.draggable = true;
+            newNode.addEventListener('dragstart', (e) => {
+                e.dataTransfer.setData('text/plain', 'move');
+                e.dataTransfer.setData('node-id', newNode.id);
+                e.dataTransfer.effectAllowed = 'move';
+            });
+            // Generate unique ID for the new node
+            newNode.id = `node-${Date.now()}`;
+        });
+        // Make canvas nodes draggable
+        canvas.addEventListener('dragover', (e) => {
+            const node = document.elementFromPoint(e.clientX, e.clientY);
+            if (node && node !== canvas && node.draggable) {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+            }
+        });
+        canvas.addEventListener('drop', (e) => {
+            const nodeId = e.dataTransfer.getData('node-id');
+            if (nodeId) {
+                const node = document.getElementById(nodeId);
+                if (node) {
+                    const rect = canvas.getBoundingClientRect();
+                    const x = e.clientX - rect.left - node.offsetWidth / 2;
+                    const y = e.clientY - rect.top - node.offsetHeight / 2;
+                    node.style.left = `${x}px`;
+                    node.style.top = `${y}px`;
+                }
+            }
+        });
+        // Detect mobile device and adjust layout if needed
+        function detectMobile() {
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        }
+        if (detectMobile()) {
+            document.body.classList.add('mobile');
+        } else {
+            document.body.classList.add('desktop');
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=designfailure/insur-mcp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ #Context: I need a website application with frontend and backend components and modules. The frontend styling design must be minimalistic and modern, with a canvas page for a drag & drop feature, component capabilities for one sub-page. Additionally, the main page and one subpage are just navigable subpages from the main menu bar tab. The website must also be optimized for desktop and mobile browsing by simply detecting the user's browser type. “Scope: Deploying Synthetic Workers with Strategic Confidence at Insur.MCP, we’re not just experimenting with AI — we’re deploying synthetic workers through our Strategic and Structured Iterative Model Context Protocol (MSP) approach, for the AGENTIC insurance workflow system. It helps incumbents escape pilot purgatory and confidently scale real AI outcomes.” ##Task: Start with the frontend main page wich contains a scrollable context and a swipe layout of feature cards as follows: “At Insur.MCP, we help corporates and incubators automate the digitalization of skills by replicating how teams work — their tools, tasks, and workflows — into agentic AI systems. We bring deep insurance industry knowledge where departments run on repetitive, structured tasks, and we translate that into multi-agent AI environments that perform jobs-to-be-done autonomously. Our mission is to build secure, sandboxed workspaces with synthetic datasets to validate and train these agents safely, because we believe the future of work is agentic, modular, and truly autonomous. It’s like giving every team a digital twin that thinks and acts, not just reacts.” Start with the largest layout components and progressively refine down to smaller elements and individual components. Ensure the plan includes clear steps for testing responsiveness across all breakpoints to maintain consistency and a seamless user experience. Share the plan for review before proceeding. ###Guidelines: Name the site “Insur.MCP”.
2	+ # Context: Implement modifications to the second task feature while ensuring core functionality, other features, and processes remain unaffected. ## Task: The second task is to develop and deploy step-by-step the canvas of the drag & drop subpage. Enhance the drag & drop feature capability of this subpage. Ensuring the drag & drop from the left TAB, where are placed <agent> , <task> , <tool> , <data>. Each of this TAB when selected and drag & dropped to the canvas will appear as a feature component. Users could interconnect each of those all together in different ways and specialities. ### Guidelines: a header button [Get Started] drives use to this canvas subpage, which one has the drag & drop capability. Users can select either the AGENT, TASK, TOOL, or the DATA set from the left tab. Once the TAB is placed on the canvas shows the drop-down menu as follows: [Agent]; underwriting_agent, sales_agent, fraud_agent, claims_agent [Task]; risk_assesment, fraud_detection, sales_propsective, appraisal, estimation, [Tool]; web_search, data_set, analysis, delegation, think, output_delivery [Data]; customer_synt, claim_synt, process_synt, dataset, sales, #### Constraints: Make visual enhancements—ensure functionality and drag & drop logic capability to the canvas subpage, others pages remain unaffected. Gain a comprehensive understanding of how the existing UI interacts with applicative drag & drop UX. Make certain that all designs are completely responsive at every breakpoint, adopting a mobile-first strategy. Apply contemporary UI/UX best practices to define how components should adjust for varying screen sizes, utilizing ShadCN and Tailwind’s standard breakpoints.