Spaces:
Running
Running
Create a website for this: use modern UX/UI elements, styles, interactive animations, visual workflows with nodes and edges. and make the visuals of the workflow interactive, like dragging the nodes around and other creative things. success criteria: resembles an enterprise corproation that has been around for many years and is well funded with an excellent web developer team using newest features and techniques. here is info of the product: MCO Protocol Model Configuration Orchestration (MCO) Server is a lightweight orchestration layer that makes AI agents dramatically more reliable by maintaining core requirements in persistent memory while strategically introducing implementation details at the right moments. Features Framework Agnostic: Works with virtually any agentic workflow or framework Syntactical Natural Language Programming (SNLP): Combines structured syntax with natural language for reliable agent guidance Progressive Revelation: Strategically introduces features and styles at the right moments in the workflow Success Criteria Tracking: Explicitly evaluates progress against defined success criteria Persistent Memory: Maintains core requirements throughout the entire process Why MCO? Traditional agent frameworks often struggle with reliability, determinism, and focus. MCO was created to solve these challenges by introducing a structured approach to agent orchestration that maintains the benefits of natural language while adding the reliability of structured programming. The MCO Protocol is a new standard for reliable, deterministic autonomous agentic orchestration that addresses the challenges of traditional agentic systems through structured workflows and progressive revelation. Think about the complete autonomy of AutoGPT, AgentGPT, etc. - MCO is the missing piece of Agent, Auto, BabyAGI or GPT or anything else. It allows for easily orchestrated robust and reliable results, prevents hallucinations, and provides a progressive feedback loop that builds on itself to iteratively complete the task, or continue is on-going job. Whether giving you a daily news update, checking your stocks, posting on social media, and with the goal of eventually even entireprise-level, complex multi-step, multi-agentic pipelines for industrial/factory autonomy in control systems. MCO As An MCP Server Packeged With An Easy Configuration Tool This repository contains the implementation of the MCO (Model Configuration Orchestration) Protocol MCP Server and Configuration Tool, designed to provide robust, and uniquely innovative autonomous orchestration capabilities to any agent framework with a single MCP Server. Overview The MCO Protocol operates as an MCP (Model Context Protocol) server, exposing orchestration tools through the MCP protocol. This allows any MCP-enabled framework (AutoGPT, CrewAI, etc.) to use MCO by adding one line to their MCP config. Key Features Framework Agnostic: Works with any MCP-enabled agent framework Progressive Revelation: Strategically reveals information to agents at the right time SNLP Configuration: Uses Syntactic Natural Language Programming for workflow definition Web-based Configuration Tool: Easy creation of SNLP files through a guided interface Success Criteria Evaluation: Automatically evaluates agent outputs against defined criteria Installation npm install -g @paradiselabs/mco-protocol Quick Start Create a new MCO project: mco init my-project This opens the configuration tool in your browser. Configure your workflow: Define workflow steps Set success criteria Add features and styling preferences Export SNLP files Add to your MCP config: { "mcpServers": { "mco-orchestration": { "command": "mco-server", "args": ["--config-dir", "./my-project"] } } } Use in your agent framework: # Example with any MCP-enabled framework directive = mcp_client.call_tool("get_next_directive") result = execute_task(directive.instruction) mcp_client.call_tool("complete_step", step_id=directive.step_id, result=result) SNLP File Structure MCO uses four SNLP files to define the orchestration workflow: mco.core: Defines workflow, data variables, and workflow steps mco.sc: Defines goal, success criteria, target audience, and developer vision mco.features: Defines features to be injected during implementation steps mco.styles: Defines styling preferences to be injected during formatting steps Progressive Revelation MCO implements progressive revelation to improve agent reliability: Persistent Memory: Content from mco.core and mco.sc is always available Strategic Injection: Content from mco.features and mco.styles is injected at strategic points Step Analysis: Injection points are determined by analyzing step tasks or using default positions MCP Tools MCO exposes the following tools through the MCP protocol: Workflow Management start_orchestration: Start a new orchestration workflow get_next_directive: Get the next directive for the current orchestration complete_step: Complete the current step in the orchestration get_workflow_status: Get the current status of the workflow Success Criteria evaluate_against_criteria: Evaluate a result against the defined success criteria State Management get_persistent_context: Get the persistent context for the current orchestration set_workflow_variable: Set a workflow variable get_workflow_variable: Get a workflow variable CLI Commands mco init [project-name]: Create new MCO project with config tool mco validate [config-dir]: Validate SNLP files mco serve [config-dir]: Start MCP server mco templates: List available templates mco deploy [config-dir]: Deploy to cloud MCP service (coming soon) Architecture The MCO MCP Server consists of the following components: SNLP Parser: Parses and interprets SNLP files Orchestration Engine: Manages workflow state and progressive revelation MCP Tool Provider: Exposes orchestration tools through the MCP protocol Configuration Tool: Web-based interface for creating SNLP files - Follow Up Deployment
9de4b6d
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MCO Protocol - Enterprise-grade AI Orchestration</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"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #6366f1; | |
| --secondary: #10b981; | |
| --accent: #8b5cf6; | |
| --dark: #0f172a; | |
| --darker: #0b1120; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-image: radial-gradient(circle at 25% 25%, rgba(15, 23, 42, 0.9) 0%, rgba(11, 17, 32, 1) 100%); | |
| color: #cbd5e1; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, h5 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: radial-gradient(circle at 60% 50%, rgba(99, 102, 241, 0.15), transparent 70%); | |
| } | |
| .glow { | |
| filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.7)); | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| background: linear-gradient(150deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8)); | |
| backdrop-filter: blur(10px); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.25); | |
| border-color: rgba(99, 102, 241, 0.4); | |
| } | |
| .workflow-node { | |
| position: absolute; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 0.75rem; | |
| padding: 1.25rem 1rem; | |
| cursor: grab; | |
| user-select: none; | |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)); | |
| border: 2px solid; | |
| transition: all 0.3s ease; | |
| min-width: 140px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .workflow-node:hover { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); | |
| transform: scale(1.03); | |
| } | |
| .workflow-node.active { | |
| box-shadow: 0 0 0 3px var(--primary); | |
| } | |
| .workflow-line { | |
| position: absolute; | |
| background: rgba(99, 102, 241, 0.7); | |
| transform-origin: left; | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-panel { | |
| background: rgba(15, 23, 42, 0.6); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .terminal { | |
| background-color: #0f172a; | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| border-radius: 0.5rem; | |
| font-family: 'SF Mono', 'Menlo', monospace; | |
| font-size: 14px; | |
| position: relative; | |
| } | |
| .terminal-header { | |
| background: linear-gradient(90deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)); | |
| padding: 0.5rem 1rem; | |
| border-top-left-radius: 0.5rem; | |
| border-top-right-radius: 0.5rem; | |
| } | |
| .terminal-body { | |
| padding: 1.25rem; | |
| height: 100%; | |
| overflow-y: auto; | |
| } | |
| @media (max-width: 768px) { | |
| .workflow-container { | |
| height: 500px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen relative"> | |
| <!-- Gradient Overlays --> | |
| <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-[#6366f1]/10 to-transparent -z-10"></div> | |
| <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-[#10b981]/10 to-transparent -z-10"></div> | |
| <!-- Header --> | |
| <header class="bg-[rgba(11,17,32,0.9)] backdrop-blur-lg border-b border-[#1e293b] sticky top-0 z-50"> | |
| <nav class="container mx-auto px-4 py-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-brain text-white text-xl"></i> | |
| </div> | |
| <span class="text-xl font-bold bg-gradient-to-r from-purple-400 to-indigo-300 bg-clip-text text-transparent">MCO Protocol</span> | |
| </div> | |
| <div class="hidden md:flex ml-12 space-x-8"> | |
| <a href="#" class="text-indigo-200 hover:text-white transition-all">Product</a> | |
| <a href="#" class="text-slate-300 hover:text-white transition-all">Solutions</a> | |
| <a href="#" class="text-slate-300 hover:text-white transition-all">Documentation</a> | |
| <a href="#" class="text-slate-300 hover:text-white transition-all">Pricing</a> | |
| <a href="#" class="text-slate-300 hover:text-white transition-all">Resources</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 text-slate-300 hover:text-white transition-all font-medium">Sign In</button> | |
| <button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-medium px-6 py-2 rounded-lg transition-all">Get Started</button> | |
| <button class="md:hidden text-slate-300 hover:text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient relative overflow-hidden pt-16 pb-28"> | |
| <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-indigo-500/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl -z-10"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center md:space-x-12"> | |
| <div class="md:w-2/3 mt-12 md:mt-24"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <span class="px-3 py-1 bg-indigo-900/30 text-indigo-300 rounded-full text-sm font-medium">Version 2.1</span> | |
| <span class="px-3 py-1 bg-emerald-900/20 text-emerald-300 rounded-full text-sm font-medium">Enterprise Ready</span> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6 text-white"> | |
| <span class="bg-gradient-to-r from-indigo-300 to-purple-300 bg-clip-text text-transparent">Transform AI Agents</span> | |
| <br> | |
| <span class="text-slate-300">With Orchestrated Intelligence</span> | |
| </h1> | |
| <p class="text-xl text-slate-300 max-w-2xl mb-10 leading-relaxed"> | |
| MCO Protocol delivers enterprise-grade reliability to AI agents through structured orchestration, persistent memory, and progressive revelation. Go from experimental to production-ready with confidence. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-12"> | |
| <button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-bold px-8 py-4 rounded-lg text-lg transition-all transform hover:-translate-y-1 shadow-lg shadow-indigo-500/20"> | |
| Start Building Now | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button class="bg-white/5 backdrop-blur-lg border border-slate-700 hover:bg-white/10 hover:border-slate-500 text-white font-bold px-8 py-4 rounded-lg text-lg transition-all"> | |
| Watch Demo | |
| <i class="fas fa-play-circle ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="mt-8 flex space-x-6"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-slate-800"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-slate-800"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-slate-800"> | |
| </div> | |
| <p class="ml-3 text-slate-400">Used by <span class="text-white">1500+</span> developers</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3 flex justify-center mt-12 md:mt-0"> | |
| <div class="glow relative overflow-hidden rounded-2xl"> | |
| <div class="w-80 h-80 rounded-2xl bg-gradient-to-br from-indigo-900/20 via-slate-900 to-slate-900 border border-slate-700/50 flex flex-col items-center justify-center p-8"> | |
| <div class="flex items-center justify-center w-20 h-20 rounded-full bg-indigo-500/10 mb-6"> | |
| <i class="fas fa-network-wired text-indigo-400 text-4xl"></i> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="text-xl font-bold text-white mb-2">MCO Workflow Engine</h3> | |
| <p class="text-slate-400">Configure once, run anywhere with managed state persistence and reliability</p> | |
| </div> | |
| <div class="mt-6 flex space-x-3"> | |
| <div class="p-3 rounded-lg bg-indigo-500/10 backdrop-blur flex flex-col items-center justify-center"> | |
| <div class="text-indigo-300 text-2xl font-bold">90%</div> | |
| <div class="text-indigo-200 text-xs">Success Rate</div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-emerald-500/10 backdrop-blur flex flex-col items-center justify-center"> | |
| <div class="text-emerald-300 text-2xl font-bold">8x</div> | |
| <div class="text-emerald-200 text-xs">Faster Iteration</div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-cyan-500/10 backdrop-blur flex flex-col items-center justify-center"> | |
| <div class="text-cyan-300 text-2xl font-bold">99.8%</div> | |
| <div class="text-cyan-200 text-xs">Uptime</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features with Workflow --> | |
| <section class="py-24 relative" id="workflow"> | |
| <div class="absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-black/20 to-transparent -z-10"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-2xl mx-auto mb-20"> | |
| <span class="bg-gradient-to-r from-cyan-400 to-emerald-400 bg-clip-text text-transparent font-bold">CORE FEATURES</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mt-4 mb-6">Built for Reliable AI Orchestration</h2> | |
| <p class="text-slate-400 text-lg">MCO Protocol ensures your AI agents execute with unparalleled reliability through a combination of structured syntax and progressive revelation.</p> | |
| </div> | |
| <!-- Feature Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-24"> | |
| <div class="feature-card rounded-2xl p-6 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-24 h-24 bg-indigo-500/10 blur-xl -z-10"></div> | |
| <div class="w-12 h-12 rounded-full bg-indigo-500/10 flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-indigo-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Persistent Memory</h3> | |
| <p class="text-slate-400">Maintains core requirements throughout entire workflows to combat agent drift and hallucination.</p> | |
| </div> | |
| <div class="feature-card rounded-2xl p-6 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-24 h-24 bg-cyan-500/10 blur-xl -z-10"></div> | |
| <div class="w-12 h-12 rounded-full bg-cyan-500/10 flex items-center justify-center mb-6"> | |
| <i class="fas fa-bezier-curve text-cyan-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Syntactic NLP</h3> | |
| <p class="text-slate-400">Blends structured syntax with natural language for more reliable agent guidance and execution.</p> | |
| </div> | |
| <div class="feature-card rounded-2xl p-6 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-24 h-24 bg-purple-500/10 blur-xl -z-10"></div> | |
| <div class="w-12 h-12 rounded-full bg-purple-500/10 flex items-center justify-center mb-6"> | |
| <i class="fas fa-calendar-day text-purple-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Progressive Revelation</h3> | |
| <p class="text-slate-400">Introduces implementation details at the right moments to prevent agent overload and distraction.</p> | |
| </div> | |
| <div class="feature-card rounded-2xl p-6 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-24 h-24 bg-emerald-500/10 blur-xl -z-10"></div> | |
| <div class="w-12 h-12 rounded-full bg-emerald-500/10 flex items-center justify-center mb-6"> | |
| <i class="fas fa-clipboard-check text-emerald-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Success Tracking</h3> | |
| <p class="text-slate-400">Explicitly evaluates progress against defined success criteria at every step of the workflow.</p> | |
| </div> | |
| </div> | |
| <!-- Interactive Workflow --> | |
| <div class="text-center max-w-2xl mx-auto mb-16"> | |
| <span class="bg-gradient-to-r from-purple-400 to-indigo-400 bg-clip-text text-transparent font-bold">VISUAL WORKFLOW</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mt-4 mb-6">Drag & Drop Orchestration Workflow</h2> | |
| <p class="text-slate-400 text-lg">Interact with our MCO orchestration process. Drag nodes to reconfigure the workflow.</p> | |
| </div> | |
| <div class="workflow-container border border-slate-700/60 rounded-2xl bg-gradient-to-br from-slate-900/50 to-slate-900 p-6 relative h-[600px] overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-1/3 bg-gradient-to-b from-indigo-500/5 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-emerald-500/5 to-transparent"></div> | |
| <!-- Workflow Lines (Will be dynamically managed with JS) --> | |
| <div class="workflow-line" id="line1"></div> | |
| <div class="workflow-line" id="line2"></div> | |
| <div class="workflow-line" id="line3"></div> | |
| <div class="workflow-line" id="line4"></div> | |
| <!-- Workflow Nodes (Draggable) --> | |
| <div class="workflow-node border-cyan-500/40" style="top: 20%; left: 15%;" id="node1"> | |
| <div class="w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-code text-cyan-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-white text-center">SNLP Config</h3> | |
| <p class="text-xs text-slate-400 mt-1">Define workflow</p> | |
| </div> | |
| <div class="workflow-node border-purple-500/40" style="top: 20%; left: 45%;" id="node2"> | |
| <div class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-server text-purple-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-white text-center">MCP Server</h3> | |
| <p class="text-xs text-slate-400 mt-1">Orchestration engine</p> | |
| </div> | |
| <div class="workflow-node border-indigo-500/40" style="top: 20%; left: 75%;" id="node3"> | |
| <div class="w-12 h-12 rounded-xl bg-indigo-500/10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-brain text-indigo-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-white text-center">AI Agent</h3> | |
| <p class="text-xs text-slate-400 mt-1">GPT, AutoGPT, etc</p> | |
| </div> | |
| <div class="workflow-node border-emerald-500/40" style="top: 60%; left: 30%;" id="node4"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-database text-emerald-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-white text-center">Persistent Memory</h3> | |
| <p class="text-xs text-slate-400 mt-1">Core requirements</p> | |
| </div> | |
| <div class="workflow-node border-orange-500/40" style="top: 60%; left: 60%;" id="node5"> | |
| <div class="w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-clipboard-check text-orange-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-white text-center">Success Criteria</h3> | |
| <p class="text-xs text-slate-400 mt-1">Quality control</p> | |
| </div> | |
| <div class="workflow-node border-rose-500/40" style="top: 60%; left: 85%;" id="node6"> | |
| <div class="w-12 h-12 rounded-xl bg-rose-500/10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-rocket text-rose-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-white text-center">Output</h3> | |
| <p class="text-xs text-slate-400 mt-1">Reliable results</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-8"> | |
| <button class="bg-slate-800/60 backdrop-blur border border-slate-700 hover:bg-slate-800/80 text-slate-300 hover:text-white px-6 py-3 rounded-lg transition-colors"> | |
| Reset Workflow | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quick Start --> | |
| <section class="py-24 relative overflow-hidden"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-20"> | |
| <span class="bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent font-bold">QUICK START</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mt-4 mb-6">Get Started in Under 5 Minutes</h2> | |
| <p class="text-slate-400 text-lg">Install the MCO Protocol and configure your first AI orchestration workflow in minutes.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="terminal rounded-xl overflow-hidden h-full"> | |
| <div class="terminal-header flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-rose-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-emerald-500"></div> | |
| </div> | |
| <div class="text-slate-400 text-sm">~/projects/mco-setup</div> | |
| </div> | |
| <div class="terminal-body font-mono text-slate-300"> | |
| <div class="mb-4"> | |
| <span class="text-emerald-400 font-semibold">$</span> npm install -g @paradiselabs/mco-protocol | |
| </div> | |
| <div class="text-slate-500 text-sm mb-4">Installing MCO Protocol CLI...</div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-emerald-400 font-semibold">$</span> | |
| <span class="ml-2">mco init my-project</span> | |
| </div> | |
| <div class="pl-6 font-medium"> | |
| <p class="mb-2 text-blue-400">→ Initializing MCO configuration</p> | |
| <p class="mb-2 text-blue-400">→ Opening web configuration tool</p> | |
| <p class="mb-2 text-green-400">✓ Success! Configuration created</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-emerald-400 font-semibold">$</span> | |
| <span class="ml-2">cd my-project</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-emerald-400 font-semibold">$</span> | |
| <span class="ml-2">mco serve</span> | |
| </div> | |
| <div class="pl-6 font-medium"> | |
| <p class="mb-2 text-sky-400">MCO Server v2.1.3</p> | |
| <p class="mb-2">→ Loading SNLP files...</p> | |
| <p class="mb-2 text-green-400">✓ Success! Loaded 4 configuration files</p> | |
| <p class="mb-2 text-slate-500">MCP server started on port 8080</p> | |
| <p class="text-amber-400">Ready to accept agent connections</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 flex justify-center"> | |
| <div class="animate-pulse flex items-center"> | |
| <div class="w-3 h-3 bg-emerald-500 rounded-full mr-2"></div> | |
| <div class="text-emerald-500 text-sm">SERVER ACTIVE</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-6">Configuration Made Simple</h3> | |
| <div class="mb-4 p-5 rounded-xl gradient-border bg-slate-900/50"> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-indigo-500/10 flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-file-alt text-indigo-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white text-lg mb-2">SNLP File Structure</h4> | |
| <p class="text-slate-400">Define your AI workflow using four simple configuration files for different aspects of orchestration.</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3 ml-16"> | |
| <div class="bg-slate-800/50 rounded-lg p-3"> | |
| <div class="text-indigo-300 font-mono">mco.core.snlp</div> | |
| <div class="text-xs text-slate-400 mt-1">Workflow definition</div> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-lg p-3"> | |
| <div class="text-emerald-300 font-mono">mco.sc.snlp</div> | |
| <div class="text-xs text-slate-400 mt-1">Success criteria</div> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-lg p-3"> | |
| <div class="text-purple-300 font-mono">mco.features.snlp</div> | |
| <div class="text-xs text-slate-400 mt-1">Feature injection</div> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-lg p-3"> | |
| <div class="text-cyan-300 font-mono">mco.styles.snlp</div> | |
| <div class="text-xs text-slate-400 mt-1">Styling preferences</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-5 rounded-xl gradient-border bg-slate-900/50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-cyan-500/10 flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-cloud text-cyan-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white text-lg mb-2">Agent Integration</h4> | |
| <p class="text-slate-400 mb-3">Integrate with any MCP-enabled AI framework with just a few lines of configuration.</p> | |
| <pre class="bg-slate-800/60 text-xs p-3 rounded-lg mt-4 text-slate-300 overflow-x-auto"> | |
| { | |
| "mcpServers": { | |
| "mco-orchestration": { | |
| "command": "mco-server", | |
| "args": ["--config-dir", "./my-project"] | |
| } | |
| } | |
| }</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Architecture --> | |
| <section class="py-24 relative" id="architecture"> | |
| <div class="absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-black/30 to-transparent -z-10"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-2xl mx-auto mb-20"> | |
| <span class="bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent font-bold">ARCHITECTURE</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mt-4 mb-6">Enterprise-Grade Orchestration</h2> | |
| <p class="text-slate-400 text-lg">Designed for scalability, reliability, and seamless integration with any agentic framework.</p> | |
| </div> | |
| <div class="dashboard-panel rounded-2xl p-6 overflow-hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 relative"> | |
| <!-- Architecture Blocks --> | |
| <div class="col-span-1"> | |
| <div class="bg-slate-800/50 backdrop-blur rounded-xl p-5 h-full"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-code text-indigo-400"></i> | |
| </div> | |
| <h3 class="font-bold text-xl text-white">SNLP Parser</h3> | |
| </div> | |
| <p class="text-slate-400">Parses and interprets Syntactic Natural Language programming files for workflow definition.</p> | |
| </div> | |
| </div> | |
| <div class="col-span-1"> | |
| <div class="bg-slate-800/50 backdrop-blur rounded-xl p-5 h-full"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-cogs text-emerald-400"></i> | |
| </div> | |
| <h3 class="font-bold text-xl text-white">Orchestration Engine</h3> | |
| </div> | |
| <p class="text-slate-400">Manages workflow state, timelines, and progressive revelation logic.</p> | |
| </div> | |
| </div> | |
| <div class="col-span-1"> | |
| <div class="bg-slate-800/50 backdrop-blur rounded-xl p-5 h-full"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-cyan-500/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-plug text-cyan-400"></i> | |
| </div> | |
| <h3 class="font-bold text-xl text-white">MCP Tool Provider</h3> | |
| </div> | |
| <p class="text-slate-400">Exposes orchestration tools through the Model Context Protocol interface.</p> | |
| </div> | |
| </div> | |
| <div class="col-span-1"> | |
| <div class="bg-slate-800/50 backdrop-blur rounded-xl p-5 h-full"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-tools text-purple-400"></i> | |
| </div> | |
| <h3 class="font-bold text-xl text-white">Config Tool</h3> | |
| </div> | |
| <p class="text-slate-400">Web-based visual interface for creating and managing SNLP configuration files.</p> | |
| </div> | |
| </div> | |
| <!-- Lines connecting the blocks --> | |
| <div class="absolute top-1/4 left-1/4 w-1/5 h-1 border-t-2 border-t-indigo-500/40 transform translate-y-12"></div> | |
| <div class="absolute top-1/4 left-2/4 w-1/5 h-1 border-t-2 border-t-emerald-500/40 transform translate-y-12"></div> | |
| <div class="absolute top-1/4 left-3/4 w-1/5 h-1 border-t-2 border-t-cyan-500/40 transform translate-y-12"></div> | |
| <!-- Client integration at bottom --> | |
| <div class="col-span-4 mt-16 relative"> | |
| <div class="bg-gradient-to-r from-slate-800/30 to-slate-900/20 backdrop-blur border border-slate-700/50 rounded-xl p-6 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-24 h-24 bg-indigo-500/10 rounded-full -translate-x-1/2 -translate-y-1/2 blur-xl -z-10"></div> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-orange-500/20 to-amber-500/20 flex items-center justify-center mr-6"> | |
| <i class="fas fa-meteor text-amber-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white">Any MCP-Compatible Agent Framework</h3> | |
| </div> | |
| <div class="flex space-x-3 mt-4 md:mt-0"> | |
| <div class="px-3 py-1 rounded-lg bg-slate-700/50 text-sm font-mono">AutoGPT</div> | |
| <div class="px-3 py-1 rounded-lg bg-slate-700/50 text-sm font-mono">CrewAI</div> | |
| <div class="px-3 py-1 rounded-lg bg-slate-700/50 text-sm font-mono">BabyAGI</div> | |
| <div class="px-3 py-1 rounded-lg bg-slate-700/50 text-sm font-mono">+ More</div> | |
| </div> | |
| </div> | |
| <p class="mt-6 text-slate-400 text-center">MCO Protocol integrates seamlessly with your existing agent framework through the MCP interface.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-24 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-indigo-900/20 via-slate-900/80 to-slate-900 -z-10"></div> | |
| <div class="absolute -top-[200px] left-0 w-96 h-96 bg-indigo-500 rounded-full blur-[120px] -z-10"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold text-white mb-8">Start Orchestrating Smarter AI Agents</h2> | |
| <p class="text-xl text-slate-300 mb-10">Join thousands of developers building more reliable AI systems with MCO Protocol. Free for individual developers, enterprise plans available.</p> | |
| <div class="flex flex-col sm | |
| <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=paradiseDev/testmcosite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |