@bluefly/openstandardagents 0.1.9 → 0.2.5-RC

package/website/app/ecosystem/page.tsx

@@ -0,0 +1,375 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Ecosystem - Open Standard Agents',
+  description: 'Explore OSSA framework support, integrations, and runtime compatibility across the AI agent ecosystem.',
+};
+
+interface FrameworkSupport {
+  name: string;
+  status: 'Supported' | 'Native' | 'Planned';
+  migrationGuide?: string;
+  example?: string;
+  notes: string;
+  logo?: string;
+}
+
+const frameworks: FrameworkSupport[] = [
+  {
+    name: 'kAgent',
+    status: 'Native',
+    example: '/examples#kagent',
+    notes: 'Native OSSA implementation - built from the ground up on OSSA specification',
+    logo: '🚀',
+  },
+  {
+    name: 'LangChain',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#langchain',
+    example: '/examples#langchain',
+    notes: 'Full support for LangChain agents with OSSA manifest compatibility',
+    logo: '🦜',
+  },
+  {
+    name: 'CrewAI',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#crewai',
+    example: '/examples#crewai',
+    notes: 'Multi-agent crew orchestration with OSSA coordination',
+    logo: '⚓',
+  },
+  {
+    name: 'Anthropic MCP',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#mcp',
+    example: '/examples#mcp',
+    notes: 'Model Context Protocol integration for Claude and other models',
+    logo: '🔌',
+  },
+  {
+    name: 'Langflow',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#langflow',
+    example: '/examples#langflow',
+    notes: 'Visual flow-based agent builder with OSSA export',
+    logo: '🌊',
+  },
+  {
+    name: 'Drupal ECA',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#drupal-eca',
+    example: '/examples#drupal',
+    notes: 'Event-Condition-Action framework integration for Drupal CMS',
+    logo: '💧',
+  },
+  {
+    name: 'OpenAI Assistants',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#openai-assistants',
+    example: '/examples#openai',
+    notes: 'OpenAI Assistants API with OSSA manifest support',
+    logo: '🤖',
+  },
+];
+
+interface RuntimeSupport {
+  name: string;
+  status: 'Supported' | 'Beta' | 'Planned';
+  notes: string;
+  logo: string;
+}
+
+const runtimes: RuntimeSupport[] = [
+  {
+    name: 'Docker',
+    status: 'Supported',
+    notes: 'Container-based deployment with full OSSA manifest support',
+    logo: '🐳',
+  },
+  {
+    name: 'Kubernetes',
+    status: 'Supported',
+    notes: 'Cloud-native orchestration with autoscaling and service mesh',
+    logo: '☸️',
+  },
+  {
+    name: 'AWS Lambda',
+    status: 'Supported',
+    notes: 'Serverless execution with event-driven agent invocation',
+    logo: '⚡',
+  },
+  {
+    name: 'Google Cloud Functions',
+    status: 'Supported',
+    notes: 'Serverless deployment on Google Cloud Platform',
+    logo: '☁️',
+  },
+  {
+    name: 'Azure Functions',
+    status: 'Supported',
+    notes: 'Serverless compute service on Microsoft Azure',
+    logo: '🔷',
+  },
+  {
+    name: 'Cloudflare Workers',
+    status: 'Beta',
+    notes: 'Edge computing with global distribution',
+    logo: '🌐',
+  },
+];
+
+function StatusBadge({ status }: { status: string }) {
+  const colors = {
+    Supported: 'bg-green-100 text-green-800 border-green-300',
+    Native: 'bg-blue-100 text-blue-800 border-blue-300',
+    Planned: 'bg-gray-100 text-gray-800 border-gray-300',
+    Beta: 'bg-yellow-100 text-yellow-800 border-yellow-300',
+  };
+
+  return (
+    <span className={`px-3 py-1 rounded-full text-sm font-medium border ${colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800'}`}>
+      {status}
+    </span>
+  );
+}
+
+export default function EcosystemPage() {
+  return (
+    <div className="container mx-auto max-w-7xl px-4 py-12">
+      <div className="max-w-6xl mx-auto">
+        <h1 className="text-5xl font-bold mb-6">OSSA Ecosystem</h1>
+        <p className="text-xl text-gray-700 mb-12">
+          Explore framework support, integrations, and runtime compatibility across the Open Standard Agents ecosystem.
+          OSSA enables interoperability between AI agent frameworks and deployment flexibility across cloud platforms.
+        </p>
+
+        {/* Framework Support Matrix */}
+        <section className="mb-16">
+          <h2 className="text-4xl font-bold mb-6 text-primary">Framework Support</h2>
+          <p className="text-lg text-gray-700 mb-8">
+            OSSA provides compatibility layers for popular AI agent frameworks, enabling you to standardize
+            agent definitions while preserving framework-specific features.
+          </p>
+
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse bg-white shadow-sm rounded-lg overflow-hidden">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-200">
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Framework</th>
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Status</th>
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Migration Guide</th>
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Example</th>
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Notes</th>
+                </tr>
+              </thead>
+              <tbody>
+                {frameworks.map((framework, index) => (
+                  <tr key={framework.name} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                    <td className="px-6 py-4 font-medium">
+                      <span className="text-2xl mr-2">{framework.logo}</span>
+                      {framework.name}
+                    </td>
+                    <td className="px-6 py-4">
+                      <StatusBadge status={framework.status} />
+                    </td>
+                    <td className="px-6 py-4">
+                      {framework.migrationGuide ? (
+                        <Link href={framework.migrationGuide} className="text-primary hover:underline">
+                          View Guide
+                        </Link>
+                      ) : (
+                        <span className="text-gray-400">N/A</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4">
+                      {framework.example ? (
+                        <Link href={framework.example} className="text-primary hover:underline">
+                          View Example
+                        </Link>
+                      ) : (
+                        <span className="text-gray-400">Coming Soon</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 text-gray-600">{framework.notes}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Runtime Compatibility */}
+        <section className="mb-16">
+          <h2 className="text-4xl font-bold mb-6 text-primary">Runtime Compatibility</h2>
+          <p className="text-lg text-gray-700 mb-8">
+            Deploy OSSA-compliant agents across multiple cloud platforms and execution environments.
+            The specification ensures consistent behavior regardless of deployment target.
+          </p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {runtimes.map((runtime) => (
+              <div key={runtime.name} className="card p-6 hover:shadow-lg transition-shadow">
+                <div className="flex items-center justify-between mb-4">
+                  <span className="text-4xl">{runtime.logo}</span>
+                  <StatusBadge status={runtime.status} />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">{runtime.name}</h3>
+                <p className="text-gray-600">{runtime.notes}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Integration Ecosystem */}
+        <section className="mb-16">
+          <h2 className="text-4xl font-bold mb-6 text-primary">Integration Ecosystem</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="card p-6">
+              <h3 className="text-2xl font-semibold mb-4 text-primary">Tool Integration</h3>
+              <ul className="space-y-3 text-gray-700">
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>MCP Servers:</strong> Native Model Context Protocol support</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>OpenAPI/REST:</strong> Standard HTTP API integration</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>GraphQL:</strong> Query-based data fetching</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>gRPC:</strong> High-performance RPC protocols</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>WebSockets:</strong> Real-time bidirectional communication</span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="card p-6">
+              <h3 className="text-2xl font-semibold mb-4 text-primary">Data Integration</h3>
+              <ul className="space-y-3 text-gray-700">
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>Vector Databases:</strong> Pinecone, Weaviate, Qdrant</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>SQL Databases:</strong> PostgreSQL, MySQL, SQLite</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>NoSQL:</strong> MongoDB, Redis, DynamoDB</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>Message Queues:</strong> RabbitMQ, Kafka, SQS</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>Object Storage:</strong> S3, GCS, Azure Blob</span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="card p-6">
+              <h3 className="text-2xl font-semibold mb-4 text-primary">Monitoring & Observability</h3>
+              <ul className="space-y-3 text-gray-700">
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>OpenTelemetry:</strong> Distributed tracing support</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>Prometheus:</strong> Metrics collection and alerting</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>Grafana:</strong> Visualization and dashboards</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>Sentry:</strong> Error tracking and reporting</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>DataDog:</strong> Full-stack monitoring</span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="card p-6">
+              <h3 className="text-2xl font-semibold mb-4 text-primary">CI/CD & DevOps</h3>
+              <ul className="space-y-3 text-gray-700">
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>GitHub Actions:</strong> Automated testing and deployment</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>GitLab CI/CD:</strong> Pipeline automation</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>Jenkins:</strong> Continuous integration server</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>ArgoCD:</strong> GitOps continuous delivery</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2">✓</span>
+                  <span><strong>Terraform:</strong> Infrastructure as code</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Community & Resources */}
+        <section className="mb-16">
+          <h2 className="text-4xl font-bold mb-6 text-primary">Community & Resources</h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            <Link href="/docs/ecosystem/overview" className="card-hover p-6">
+              <h3 className="text-xl font-semibold mb-2 text-primary">Ecosystem Overview</h3>
+              <p className="text-gray-700">Learn about the OSSA ecosystem architecture and integration patterns.</p>
+            </Link>
+            <Link href="/docs/ecosystem/framework-support" className="card-hover p-6">
+              <h3 className="text-xl font-semibold mb-2 text-primary">Framework Support Guide</h3>
+              <p className="text-gray-700">Detailed compatibility information and migration guides for each framework.</p>
+            </Link>
+            <Link href="/examples" className="card-hover p-6">
+              <h3 className="text-xl font-semibold mb-2 text-primary">Integration Examples</h3>
+              <p className="text-gray-700">Real-world examples of OSSA integrations across frameworks and platforms.</p>
+            </Link>
+          </div>
+        </section>
+
+        {/* Call to Action */}
+        <section className="bg-gradient-to-r from-primary to-blue-600 rounded-lg p-8 text-white">
+          <h2 className="text-3xl font-bold mb-4">Build on OSSA</h2>
+          <p className="text-lg mb-6">
+            Ready to integrate OSSA into your framework or platform? Our specification is open source
+            and designed for extensibility.
+          </p>
+          <div className="flex flex-wrap gap-4">
+            <Link href="/docs/getting-started/5-minute-overview" className="btn-secondary">
+              Get Started
+            </Link>
+            <Link href="/specification" className="bg-white text-primary px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
+              Read Specification
+            </Link>
+            <Link href="https://github.com/blueflyio/openstandardagents/issues" target="_blank" rel="noopener noreferrer" className="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary transition-colors">
+              Request Integration
+            </Link>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/website/app/examples/page.tsx

@@ -0,0 +1,133 @@
+import fs from 'fs';
+import path from 'path';
+import { Suspense } from 'react';
+import { ExamplesViewer } from '@/components/examples/ExamplesViewer';
+
+interface ExampleFile {
+  name: string;
+  path: string;
+  content: string;
+  category: string;
+}
+
+function getAllExamples(): ExampleFile[] {
+  try {
+    // Try multiple absolute paths
+    const paths = [
+      path.resolve(process.cwd(), 'public', 'examples.json'),
+      path.join(process.cwd(), 'public', 'examples.json'),
+      path.resolve(__dirname, '..', '..', 'public', 'examples.json'),
+    ];
+    
+    for (const examplesJsonPath of paths) {
+      if (fs.existsSync(examplesJsonPath)) {
+        const content = fs.readFileSync(examplesJsonPath, 'utf8');
+        const examples = JSON.parse(content);
+        if (Array.isArray(examples) && examples.length > 0) {
+          return examples;
+        }
+      }
+    }
+    
+    // If still not found, try reading from public directory directly
+    const publicDir = path.resolve(process.cwd(), 'public');
+    const directPath = path.join(publicDir, 'examples.json');
+    if (fs.existsSync(directPath)) {
+      const content = fs.readFileSync(directPath, 'utf8');
+      const examples = JSON.parse(content);
+      if (Array.isArray(examples)) {
+        return examples;
+      }
+    }
+    
+    return [];
+  } catch (error) {
+    console.error('Error loading examples:', error);
+    return [];
+  }
+}
+
+export default function ExamplesPage() {
+  const examples = getAllExamples();
+
+  // Group examples by category with counts
+  const categoryStats = examples.reduce((acc, ex) => {
+    acc[ex.category] = (acc[ex.category] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  // Extract unique frameworks from example paths and content
+  const frameworkNames = [
+    'kagent', 'langchain', 'crewai', 'openai', 'anthropic', 
+    'autogen', 'langflow', 'langgraph', 'llamaindex', 'cursor', 
+    'vercel', 'drupal', 'mcp', 'huggingface', 'google', 'aws', 
+    'azure', 'github', 'docker', 'kubernetes'
+  ];
+  
+  const frameworksInExamples = new Set<string>();
+  examples.forEach(ex => {
+    const pathLower = ex.path.toLowerCase();
+    const contentLower = ex.content.toLowerCase();
+    frameworkNames.forEach(fw => {
+      if (pathLower.includes(fw) || contentLower.includes(`"${fw}"`) || contentLower.includes(`'${fw}'`)) {
+        frameworksInExamples.add(fw);
+      }
+    });
+  });
+
+  return (
+    <>
+      {/* Hero Section */}
+      <div className="bg-gradient-to-br from-blue-600 via-primary to-secondary text-white py-16 px-4">
+        <div className="container mx-auto max-w-6xl text-center">
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full mb-6">
+            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          </div>
+          <h1 className="text-5xl font-bold mb-4">OSSA Examples Gallery</h1>
+          <p className="text-xl text-white/90 mb-2">
+            {examples.length}+ real-world Open Standard Agents manifests
+          </p>
+          <p className="text-base text-white/80">
+            Learn from production-ready implementations across multiple frameworks
+          </p>
+        </div>
+      </div>
+
+      {/* Stats Bar */}
+      <div className="bg-gradient-to-r from-primary/5 to-secondary/5 border-b border-primary/20">
+        <div className="container mx-auto max-w-7xl px-4 py-6">
+          <div className="flex flex-wrap gap-6 justify-center items-center">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-primary">{examples.length}</div>
+              <div className="text-sm text-gray-600">Total Examples</div>
+            </div>
+            <div className="w-px h-12 bg-gray-300"></div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-secondary">{Object.keys(categoryStats).length}</div>
+              <div className="text-sm text-gray-600">Categories</div>
+            </div>
+            <div className="w-px h-12 bg-gray-300"></div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-primary">{frameworksInExamples.size}</div>
+              <div className="text-sm text-gray-600">Frameworks</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container mx-auto max-w-7xl px-4 py-12">
+        <Suspense fallback={
+          <div className="text-center py-12">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+            <p className="mt-4 text-gray-600">Loading examples...</p>
+          </div>
+        }>
+          <ExamplesViewer examples={examples} />
+        </Suspense>
+      </div>
+    </>
+  );
+}
+

package/website/app/globals.scss

@@ -0,0 +1,135 @@
+@use '../styles/variables.scss' as *;
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* OSSA Brand Colors - from SCSS variables */
+    --ossa-primary: #{$ossa-primary};
+    --ossa-secondary: #{$ossa-secondary};
+    --ossa-accent: #{$ossa-accent};
+    
+    /* Semantic Colors - Muted for better visual harmony */
+    --ossa-success: #{$ossa-success};
+    --ossa-warning: #{$ossa-warning};
+    --ossa-error: #{$ossa-error};
+    --ossa-info: #{$ossa-info};
+    
+    /* Neutral Colors */
+    --ossa-dark: #{$ossa-dark};
+    --ossa-gray-900: #{$ossa-gray-900};
+    --ossa-gray-700: #{$ossa-gray-700};
+    --ossa-gray-500: #{$ossa-gray-500};
+    --ossa-gray-300: #{$ossa-gray-300};
+    --ossa-gray-100: #{$ossa-gray-100};
+    --ossa-white: #{$ossa-white};
+
+    /* Brand gradients */
+    --gradient-brand: #{$gradient-brand};
+    --gradient-hero: #{$gradient-hero};
+    --gradient-button: #{$gradient-button};
+
+    /* Code syntax highlighting */
+    --code-bg: #{$code-bg};
+    --code-text: #{$code-text};
+    --code-keyword: #{$code-keyword};
+    --code-string: #{$code-string};
+    --code-comment: #{$code-comment};
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply font-sans text-gray-900 bg-white antialiased;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-sans font-semibold;
+  }
+
+  code {
+    @apply font-mono;
+  }
+
+  pre {
+    @apply bg-code-bg text-code-text rounded-lg p-4 overflow-x-auto;
+  }
+
+  pre code {
+    @apply text-code-text;
+  }
+
+  a {
+    cursor: pointer;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .focus\:not-sr-only:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: inherit;
+    margin: inherit;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
+  }
+  
+  .bg-gradient-hero {
+    background: var(--gradient-hero);
+  }
+  
+  .bg-gradient-button {
+    background: var(--gradient-button);
+  }
+  
+  .bg-code-bg {
+    background-color: var(--code-bg);
+  }
+  
+  .text-code-text {
+    color: var(--code-text);
+  }
+  
+  .text-success {
+    color: var(--ossa-success);
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2;
+  }
+
+  .btn-outline {
+    @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
+  }
+
+  .card {
+    @apply bg-white rounded-lg shadow-md p-6 border border-gray-300;
+  }
+
+  .card-hover {
+    @apply card hover:shadow-lg transition-shadow;
+  }
+}
+