Spaces:

yourgui
/

undefined

Running

App Files Files Community

yourgui commited on Oct 17, 2025

Commit

9ff1f13

verified ·

1 Parent(s): c92831d

ok now how can i actually create an integration where vai connects to my gpt, email to rube.app, etc

Browse files

Files changed (4) hide show

agents.html +2 -4
dashboard.html +1 -1
index.html +1 -1
integrations.html +335 -0

agents.html CHANGED Viewed

@@ -61,15 +61,13 @@
                 <img src="https://static.photos/technology/200x200/42" alt="VAI Logo" class="w-10 h-10 rounded-lg">
                 <h1 class="text-2xl font-bold text-primary-500">VAI</h1>
             </div>
             <nav class="hidden md:flex space-x-6">
                 <a href="index.html" class="hover:text-primary-500 transition">Home</a>
                 <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
                 <a href="agents.html" class="text-primary-500 hover:text-primary-400 transition">Agents</a>
-                <a href="#" class="hover:text-primary-500 transition">Integrations</a>
             </nav>
-            <div class="flex items-center space-x-4">
                 <button class="p-2 rounded-full bg-dark-800 hover:bg-dark-700 transition">
                     <i data-feather="settings"></i>
                 </button>

                 <img src="https://static.photos/technology/200x200/42" alt="VAI Logo" class="w-10 h-10 rounded-lg">
                 <h1 class="text-2xl font-bold text-primary-500">VAI</h1>
             </div>
             <nav class="hidden md:flex space-x-6">
                 <a href="index.html" class="hover:text-primary-500 transition">Home</a>
                 <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
                 <a href="agents.html" class="text-primary-500 hover:text-primary-400 transition">Agents</a>
+                <a href="integrations.html" class="hover:text-primary-500 transition">Integrations</a>
             </nav>
+<div class="flex items-center space-x-4">
                 <button class="p-2 rounded-full bg-dark-800 hover:bg-dark-700 transition">
                     <i data-feather="settings"></i>
                 </button>

dashboard.html CHANGED Viewed

@@ -80,7 +80,7 @@
             <nav class="hidden md:flex space-x-6">
                 <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
                 <a href="agents.html" class="hover:text-primary-500 transition">Agents</a>
-                <a href="#" class="hover:text-primary-500 transition">Integrations</a>
                 <a href="#" class="hover:text-primary-500 transition">Community</a>
             </nav>
 <div class="flex items-center space-x-4">

             <nav class="hidden md:flex space-x-6">
                 <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
                 <a href="agents.html" class="hover:text-primary-500 transition">Agents</a>
+                <a href="integrations.html" class="hover:text-primary-500 transition">Integrations</a>
                 <a href="#" class="hover:text-primary-500 transition">Community</a>
             </nav>
 <div class="flex items-center space-x-4">

index.html CHANGED Viewed

@@ -111,7 +111,7 @@ secondary: {
             <nav class="hidden md:flex space-x-6">
                 <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
                 <a href="agents.html" class="hover:text-primary-500 transition">Agents</a>
-                <a href="#" class="hover:text-primary-500 transition">Integrations</a>
                 <a href="#" class="hover:text-primary-500 transition">Community</a>
             </nav>
 <div class="flex items-center space-x-4">

             <nav class="hidden md:flex space-x-6">
                 <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
                 <a href="agents.html" class="hover:text-primary-500 transition">Agents</a>
+                <a href="integrations.html" class="hover:text-primary-500 transition">Integrations</a>
                 <a href="#" class="hover:text-primary-500 transition">Community</a>
             </nav>
 <div class="flex items-center space-x-4">

integrations.html ADDED Viewed

	@@ -0,0 +1,335 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Integrations | VAI</title>
+    <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        .glass-panel {
+            backdrop-filter: blur(16px);
+            background: rgba(16, 21, 27, 0.7);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+        }
+        .integration-card {
+            transition: all 0.3s ease;
+        }
+        .integration-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(63, 242, 140, 0.1);
+        }
+        .connected-badge {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(63, 242, 140, 0.4); }
+            70% { box-shadow: 0 0 0 10px rgba(63, 242, 140, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(63, 242, 140, 0); }
+        }
+    </style>
+</head>
+<body class="bg-dark-900 text-gray-200 font-sans min-h-screen overflow-x-hidden" id="vanta-bg">
+    <script>
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: "#3FF28C",
+            backgroundColor: "#10151B",
+            size: 0.8
+        })
+    </script>
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-12">
+            <div class="flex items-center space-x-2">
+                <img src="https://static.photos/technology/200x200/42" alt="VAI Logo" class="w-10 h-10 rounded-lg">
+                <h1 class="text-2xl font-bold text-primary-500">VAI</h1>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="index.html" class="hover:text-primary-500 transition">Home</a>
+                <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
+                <a href="agents.html" class="hover:text-primary-500 transition">Agents</a>
+                <a href="integrations.html" class="text-primary-500 hover:text-primary-400 transition">Integrations</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button class="p-2 rounded-full bg-dark-800 hover:bg-dark-700 transition">
+                    <i data-feather="settings"></i>
+                </button>
+                <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
+                    <i data-feather="plus" class="mr-2"></i> New Agent
+                </button>
+            </div>
+        </header>
+        <!-- Integrations Management -->
+        <section class="mb-8">
+            <div class="flex justify-between items-center mb-8">
+                <div>
+                    <h2 class="text-3xl font-bold mb-2">Connected Services</h2>
+                    <p class="text-gray-400">Connect your favorite tools to automate workflows</p>
+                </div>
+                <div class="relative">
+                    <input type="text" placeholder="Search integrations..." class="bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                    <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500"></i>
+                </div>
+            </div>
+            <!-- Connected Integrations -->
+            <div class="mb-12">
+                <h3 class="text-xl font-bold mb-6">Your Active Connections</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- GPT Connection -->
+                    <div class="integration-card glass-panel rounded-xl p-6 border border-green-400/20 hover:border-green-400/40 transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="flex items-center space-x-3">
+                                <img src="https://static.photos/technology/200x200/42" alt="GPT" class="w-12 h-12 rounded-lg">
+                                <div>
+                                    <h3 class="font-bold">GPT-4</h3>
+                                    <span class="text-xs text-green-400 flex items-center">
+                                        <span class="w-2 h-2 rounded-full bg-green-400 mr-1 connected-badge"></span>
+                                        Connected
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="dropdown relative">
+                                <button class="text-gray-400 hover:text-green-400">
+                                    <i data-feather="more-vertical"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <p class="text-sm text-gray-300 mb-4">AI model for text generation and analysis</p>
+                        <div class="flex justify-between text-xs text-gray-400">
+                            <span>API calls: 142 today</span>
+                            <span>Last used: 2 min ago</span>
+                        </div>
+                    </div>
+                    <!-- Email Connection -->
+                    <div class="integration-card glass-panel rounded-xl p-6 border border-blue-400/20 hover:border-blue-400/40 transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="flex items-center space-x-3">
+                                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg" alt="Gmail" class="w-12 h-12 rounded-lg">
+                                <div>
+                                    <h3 class="font-bold">Gmail</h3>
+                                    <span class="text-xs text-blue-400 flex items-center">
+                                        <span class="w-2 h-2 rounded-full bg-blue-400 mr-1 connected-badge"></span>
+                                        Connected
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="dropdown relative">
+                                <button class="text-gray-400 hover:text-blue-400">
+                                    <i data-feather="more-vertical"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <p class="text-sm text-gray-300 mb-4">Email processing and automation</p>
+                        <div class="flex justify-between text-xs text-gray-400">
+                            <span>Processed: 24 emails</span>
+                            <span>Last sync: 5 min ago</span>
+                        </div>
+                    </div>
+                    <!-- Rube.app Connection -->
+                    <div class="integration-card glass-panel rounded-xl p-6 border border-purple-500/20 hover:border-purple-500/40 transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="flex items-center space-x-3">
+                                <img src="https://static.photos/technology/200x200/43" alt="Rube.app" class="w-12 h-12 rounded-lg">
+                                <div>
+                                    <h3 class="font-bold">Rube.app</h3>
+                                    <span class="text-xs text-purple-500 flex items-center">
+                                        <span class="w-2 h-2 rounded-full bg-purple-500 mr-1 connected-badge"></span>
+                                        Connected
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="dropdown relative">
+                                <button class="text-gray-400 hover:text-purple-500">
+                                    <i data-feather="more-vertical"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <p class="text-sm text-gray-300 mb-4">Workflow automation platform</p>
+                        <div class="flex justify-between text-xs text-gray-400">
+                            <span>Workflows: 3 active</span>
+                            <span>Last run: 1 hour ago</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Available Integrations -->
+            <div>
+                <h3 class="text-xl font-bold mb-6">Available Integrations</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <!-- Slack -->
+                    <div class="integration-card glass-panel rounded-xl p-6 border border-gray-700 hover:border-primary-500/30 transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg" alt="Slack" class="w-12 h-12 rounded-lg">
+                            <span class="text-xs bg-gray-700 px-2 py-1 rounded">Popular</span>
+                        </div>
+                        <h3 class="font-bold mb-2">Slack</h3>
+                        <p class="text-sm text-gray-300 mb-4">Team communication and notifications</p>
+                        <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
+                            Connect
+                        </button>
+                    </div>
+                    <!-- Notion -->
+                    <div class="integration-card glass-panel rounded-xl p-6 border border-gray-700 hover:border-primary-500/30 transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png" alt="Notion" class="w-12 h-12 rounded-lg">
+                        </div>
+                        <h3 class="font-bold mb-2">Notion</h3>
+                        <p class="text-sm text-gray-300 mb-4">Knowledge management and databases</p>
+                        <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
+                            Connect
+                        </button>
+                    </div>
+                    <!-- Zapier -->
+                    <div class="integration-card glass-panel rounded-xl p-6 border border-gray-700 hover:border-primary-500/30 transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <img src="https://static.photos/technology/200x200/44" alt="Zapier" class="w-12 h-12 rounded-lg">
+                        </div>
+                        <h3 class="font-bold mb-2">Zapier</h3>
+                        <p class="text-sm text-gray-300 mb-4">Connect with 5000+ apps</p>
+                        <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
+                            Connect
+                        </button>
+                    </div>
+                    <!-- Make -->
+                    <div class="integration-card glass-panel rounded-xl p-6 border border-gray-700 hover:border-primary-500/30 transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <img src="https://static.photos/technology/200x200/45" alt="Make" class="w-12 h-12 rounded-lg">
+                        </div>
+                        <h3 class="font-bold mb-2">Make</h3>
+                        <p class="text-sm text-gray-300 mb-4">Advanced automation scenarios</p>
+                        <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
+                            Connect
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Custom API Section -->
+        <section class="glass-panel rounded-2xl p-8 mb-8">
+            <h3 class="text-2xl font-bold mb-4">Custom API Integration</h3>
+            <p class="text-gray-400 mb-6">Connect to any service with a REST API</p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <h4 class="font-medium mb-3">API Configuration</h4>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-1">API Name</label>
+                            <input type="text" class="w-full bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary-500" placeholder="My Custom API">
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-1">Base URL</label>
+                            <input type="text" class="w-full bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary-500" placeholder="https://api.example.com/v1">
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-1">Authentication</label>
+                            <select class="w-full bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                                <option>API Key</option>
+                                <option>OAuth 2.0</option>
+                                <option>Bearer Token</option>
+                                <option>Basic Auth</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="font-medium mb-3">API Key</h4>
+                    <div class="bg-dark-800 rounded-lg p-4 border border-gray-700 mb-4">
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-sm text-gray-400">Key</span>
+                            <button class="text-xs text-primary-500 hover:text-primary-400">
+                                <i data-feather="eye" class="w-3 h-3 mr-1"></i> Show
+                            </button>
+                        </div>
+                        <input type="password" value="sk_test_51MZ..." class="w-full bg-transparent border-none focus:outline-none font-mono text-sm">
+                    </div>
+                    <div class="flex space-x-4">
+                        <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
+                            Test Connection
+                        </button>
+                        <button class="px-4 py-2 border border-gray-700 hover:bg-dark-800 rounded-lg transition">
+                            Save Configuration
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Footer -->
+        <footer class="border-t border-gray-800 pt-8 pb-12">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 VAI. All rights reserved.</p>
+                <div class="flex space-x-4">
+                    <a href="#" class="text-gray-500 hover:text-primary-500 transition">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 hover:text-primary-500 transition">
+                        <i data-feather="linkedin"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 hover:text-primary-500 transition">
+                        <i data-feather="github"></i>
+                    </a>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script>
+        feather.replace();
+        // Connection modal would go here
+        document.querySelectorAll('.integration-card button').forEach(button => {
+            button.addEventListener('click', function() {
+                const card = this.closest('.integration-card');
+                const serviceName = card.querySelector('h3').textContent;
+                // In a real app, this would open an OAuth flow or API key input
+                alert(`Connecting to ${serviceName}... This would initiate OAuth or show API key input.`);
+                // Simulate successful connection
+                setTimeout(() => {
+                    const statusBadge = card.querySelector('.text-xs');
+                    statusBadge.innerHTML = '<span class="w-2 h-2 rounded-full bg-green-400 mr-1 connected-badge"></span> Connected';
+                    statusBadge.className = 'text-xs text-green-400 flex items-center';
+                    const connectButton = card.querySelector('button');
+                    if (connectButton) {
+                        connectButton.textContent = 'Configure';
+                        connectButton.className = 'w-full px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition';
+                    }
+                }, 1500);
+            });
+        });
+    </script>
+</body>
+</html>