diff --git a/website/src/components/Header.jsx b/website/src/components/Header.jsx index 0333f2edb5..6a35dca553 100644 --- a/website/src/components/Header.jsx +++ b/website/src/components/Header.jsx @@ -216,6 +216,18 @@ export const Header = forwardRef(function Header( > Actors + + agentOS + + + Pricing + { + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(command); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error('Failed to copy:', err); + } + }; + + return ( + + ); +}; + +const PricingCard = ({ tier, index, showCloudNotice = false }: { tier: typeof pricingTiers[0]; index: number; showCloudNotice?: boolean }) => { + const Icon = tier.icon; + + return ( + +
+
+ +
+

{tier.name}

+

+ {tier.description} +

+
+ +
+
+ {tier.price} +
+

+ {tier.priceSuffix} +

+
+ + {tier.copyCommand ? ( + + ) : ( + + {tier.cta} + + + )} + + + + {showCloudNotice && ( +
+ + +
+

Deploy on Rivet Cloud

+

Scale your agents with managed infrastructure

+
+ + +
+ )} + + ); +}; + +const FAQSection = () => { + const faqs = [ + { + question: 'Is agentOS really free?', + answer: 'Yes. agentOS is open source under the Apache 2.0 license. You can run it on your own infrastructure at no cost. Rivet Cloud is a paid service for those who want managed infrastructure.', + }, + { + question: 'What is the difference between self-hosted and Rivet Cloud?', + answer: 'Self-hosted means you run agentOS on your own servers. You handle deployment, scaling, and maintenance. Rivet Cloud is a fully managed service where we handle all of that for you.', + }, + { + question: 'Can I switch from self-hosted to Rivet Cloud later?', + answer: 'Absolutely. agentOS uses the same API whether you self-host or use Rivet Cloud. You can migrate with minimal code changes.', + }, + { + question: 'What support is available for open source users?', + answer: 'Open source users can get help through our Discord community and GitHub issues. Enterprise customers receive dedicated support channels with guaranteed response times.', + }, + { + question: 'Do you offer volume discounts?', + answer: 'Yes. Contact our sales team for custom pricing on high-volume usage or enterprise deployments.', + }, + ]; + + return ( + +
+

+ Frequently asked questions +

+
+ {faqs.map((faq) => ( +
+

{faq.question}

+

{faq.answer}

+
+ ))} +
+
+ + ); +}; + +const CTASection = () => ( + +
+

+ Ready to get started? +

+

+ Deploy agentOS today. Start with the open source version or try Rivet Cloud for free. +

+
+ + Start for Free + + + + + Talk to Sales + +
+
+ +); + +export default function AgentOSPricingPage() { + return ( +
+
+ {/* Hero */} +
+
+ +

+ Free and open source. +

+

+ agentOS is Apache 2.0 licensed and free to self-host. Use Rivet Cloud for managed infrastructure, or contact us for enterprise support. +

+ +
+
+ + {/* Pricing Cards */} +
+
+
+ {pricingTiers.map((tier, index) => ( + + ))} +
+
+
+ + + +
+
+ ); +} diff --git a/website/src/components/marketing/solutions/AgentOSUseCasesPage.tsx b/website/src/components/marketing/solutions/AgentOSUseCasesPage.tsx new file mode 100644 index 0000000000..cb1ca5a94a --- /dev/null +++ b/website/src/components/marketing/solutions/AgentOSUseCasesPage.tsx @@ -0,0 +1,326 @@ +'use client'; + +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { + ArrowRight, + Clock, + Rocket, + FlaskConical, + Globe, + Code, + User, + Users, + Headphones, + Server, + Database, + Pencil, + Workflow, + Cpu, + Check, + Terminal, +} from 'lucide-react'; + +// --- Copy Install Button --- +const CopyInstallButton = () => { + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText('npm install @rivetkit/agent-os'); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error('Failed to copy:', err); + } + }; + + return ( + + ); +}; + +interface UseCaseProps { + icon: React.ComponentType<{ className?: string }>; + title: string; + description: string; + benefits: string[]; + example?: string; + delay?: number; +} + +const UseCase = ({ icon: Icon, title, description, benefits, example, delay = 0 }: UseCaseProps) => ( + +
+ +
+

{title}

+

{description}

+ + {example && ( +
+ Example +

{example}

+
+ )} + +); + +const useCases: UseCaseProps[] = [ + { + icon: Clock, + title: 'Background Agents', + description: 'Long-running agents that operate asynchronously, processing tasks over hours or days without human intervention.', + benefits: [ + 'Persistent state survives crashes and restarts', + 'Queue commands while agents work', + 'Resume from exactly where they left off', + 'Monitor progress in real-time', + ], + example: 'A code migration agent that refactors a large codebase over several hours, committing changes incrementally.', + }, + { + icon: Rocket, + title: 'Production Agents', + description: 'Deploy agents at scale with enterprise-grade reliability, security, and observability built in.', + benefits: [ + 'Auto-scaling to thousands of concurrent agents', + 'Built-in health checks and recovery', + 'Comprehensive audit logging', + 'Network isolation and access controls', + ], + example: 'A fleet of agents processing customer requests 24/7 with guaranteed uptime and automatic failover.', + }, + { + icon: Cpu, + title: 'Edge & Embedded Agents', + description: 'Run agents on resource-constrained devices like Raspberry Pi, edge servers, or IoT gateways.', + benefits: [ + '~3.4 MB memory footprint per agent', + 'No containers or VMs required', + 'Works offline with local LLMs', + 'ARM and x86 support', + ], + example: 'A home automation agent running on a Raspberry Pi that controls smart devices and responds to voice commands.', + }, + { + icon: FlaskConical, + title: 'Efficient Evals', + description: 'Run agent evaluations and benchmarks at scale without spinning up expensive sandboxes for each test.', + benefits: [ + '75x lower memory per instance than sandboxes', + 'Millisecond cold starts for rapid iteration', + 'Deterministic replay for debugging', + 'Cost-effective at thousands of runs', + ], + example: 'Evaluating 10,000 agent responses in parallel to measure performance across different prompts.', + }, + { + icon: Globe, + title: 'Browser-based LLM Interfaces', + description: 'Build interactive web applications where agents execute code and manage state in real-time.', + benefits: [ + 'WebSocket streaming for live updates', + 'Preview URLs for agent-generated apps', + 'Secure execution in isolated environments', + 'Session persistence across page reloads', + ], + example: 'An AI coding assistant that runs in the browser, executing code and showing live previews.', + }, + { + icon: Code, + title: 'Programming Agents', + description: 'Purpose-built for agents that write, test, and deploy code autonomously.', + benefits: [ + 'Native file system access with git support', + 'Shell execution with full toolchain access', + 'Package installation and dependency management', + 'Test runner integration', + ], + example: 'An agent that takes a GitHub issue, writes the fix, runs tests, and opens a pull request.', + }, + { + icon: User, + title: 'Personal Agents', + description: 'Lightweight agents that assist individual users with daily tasks and workflows.', + benefits: [ + 'Low resource overhead for personal use', + 'Local-first with optional cloud sync', + 'Custom tool integration', + 'Privacy-focused execution', + ], + example: 'A personal agent that organizes your calendar, drafts emails, and manages your todo list.', + }, + { + icon: Users, + title: 'Multi-Agent Systems', + description: 'Coordinate multiple agents working together on complex tasks with shared state and communication.', + benefits: [ + 'Shared file systems between agents', + 'Real-time inter-agent messaging', + 'Workflow orchestration primitives', + 'Centralized observability', + ], + example: 'A team of agents where one researches, one writes, and one reviews, all collaborating on a document.', + }, + { + icon: Headphones, + title: 'Customer Support Agents', + description: 'Deploy agents that handle customer inquiries with access to your systems and data.', + benefits: [ + 'Database and API integration', + 'Secure credential management', + 'Audit trails for compliance', + 'Human handoff capabilities', + ], + example: 'An agent that resolves billing issues by checking accounts, applying credits, and sending confirmations.', + }, + { + icon: Server, + title: 'DevOps Agents', + description: 'Agents that manage infrastructure, deployments, and incident response autonomously.', + benefits: [ + 'SSH and cloud provider access', + 'Infrastructure as code execution', + 'Automated incident remediation', + 'Deployment pipeline integration', + ], + example: 'An on-call agent that detects issues, diagnoses root causes, and applies fixes automatically.', + }, + { + icon: Database, + title: 'Data Processing Agents', + description: 'Run ETL pipelines, data transformations, and analysis tasks with agent intelligence.', + benefits: [ + 'Stream processing capabilities', + 'Database connections and queries', + 'File format conversion', + 'Incremental processing', + ], + example: 'An agent that ingests raw data, cleans it, runs analysis, and generates reports on a schedule.', + }, + { + icon: Pencil, + title: 'Content Creation Agents', + description: 'Agents that create, edit, and publish content across multiple platforms.', + benefits: [ + 'Multi-modal content support', + 'Publishing API integrations', + 'Asset management', + 'Version control for drafts', + ], + example: 'An agent that writes blog posts, generates images, and publishes to your CMS automatically.', + }, + { + icon: Workflow, + title: 'Workflow Automation', + description: 'Chain agent tasks into complex workflows with conditional logic and human-in-the-loop steps.', + benefits: [ + 'Durable workflow execution', + 'Retry and error handling', + 'Scheduled and triggered runs', + 'Approval gates and notifications', + ], + example: 'A hiring workflow where agents screen resumes, schedule interviews, and prepare onboarding docs.', + }, +]; + +export default function AgentOSUseCasesPage() { + return ( +
+
+ {/* Hero */} +
+
+ + Who is agentOS for? + + + From personal assistants to enterprise fleets, agentOS powers every kind of AI agent. + +
+
+ + {/* Use Cases Grid */} +
+
+
+ {useCases.map((useCase, i) => ( + + ))} +
+
+
+ + {/* CTA */} +
+
+ + Ready to build? + + + Get started with agentOS in minutes. One npm install, zero infrastructure. + + + + Read the Docs + + + + +
+
+
+
+ ); +} diff --git a/website/src/components/marketing/solutions/GetStartedPage.tsx b/website/src/components/marketing/solutions/GetStartedPage.tsx index 803d5bc7ba..8bf0b535c2 100644 --- a/website/src/components/marketing/solutions/GetStartedPage.tsx +++ b/website/src/components/marketing/solutions/GetStartedPage.tsx @@ -1,9 +1,146 @@ 'use client'; -import { useState } from 'react'; +import { useState, useEffect, useRef, useCallback } from 'react'; import { motion } from 'framer-motion'; import { Check, Copy, ArrowRight } from 'lucide-react'; +// --- Conway's Game of Life Background --- +const GameOfLife = () => { + const canvasRef = useRef(null); + const gridRef = useRef([]); + const animationRef = useRef(); + + const CELL_SIZE = 16; + const UPDATE_INTERVAL = 150; + + const initGrid = useCallback((cols: number, rows: number) => { + const grid: boolean[][] = []; + for (let i = 0; i < rows; i++) { + grid[i] = []; + for (let j = 0; j < cols; j++) { + // Sparse random initialization + grid[i][j] = Math.random() < 0.15; + } + } + return grid; + }, []); + + const countNeighbors = useCallback((grid: boolean[][], x: number, y: number, rows: number, cols: number) => { + let count = 0; + for (let i = -1; i <= 1; i++) { + for (let j = -1; j <= 1; j++) { + if (i === 0 && j === 0) continue; + const ni = (y + i + rows) % rows; + const nj = (x + j + cols) % cols; + if (grid[ni][nj]) count++; + } + } + return count; + }, []); + + const nextGeneration = useCallback((grid: boolean[][], rows: number, cols: number) => { + const newGrid: boolean[][] = []; + for (let i = 0; i < rows; i++) { + newGrid[i] = []; + for (let j = 0; j < cols; j++) { + const neighbors = countNeighbors(grid, j, i, rows, cols); + if (grid[i][j]) { + newGrid[i][j] = neighbors === 2 || neighbors === 3; + } else { + newGrid[i][j] = neighbors === 3; + } + } + } + return newGrid; + }, [countNeighbors]); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const resize = () => { + canvas.width = canvas.offsetWidth; + canvas.height = canvas.offsetHeight; + const cols = Math.ceil(canvas.width / CELL_SIZE); + const rows = Math.ceil(canvas.height / CELL_SIZE); + gridRef.current = initGrid(cols, rows); + }; + + resize(); + window.addEventListener('resize', resize); + + let lastUpdate = 0; + + const draw = (timestamp: number) => { + if (!ctx || !canvas) return; + + if (timestamp - lastUpdate > UPDATE_INTERVAL) { + const cols = Math.ceil(canvas.width / CELL_SIZE); + const rows = Math.ceil(canvas.height / CELL_SIZE); + + // Occasionally add new cells to keep it alive + if (Math.random() < 0.02) { + const rx = Math.floor(Math.random() * cols); + const ry = Math.floor(Math.random() * rows); + for (let i = -1; i <= 1; i++) { + for (let j = -1; j <= 1; j++) { + const ni = (ry + i + rows) % rows; + const nj = (rx + j + cols) % cols; + if (gridRef.current[ni] && Math.random() < 0.5) { + gridRef.current[ni][nj] = true; + } + } + } + } + + gridRef.current = nextGeneration(gridRef.current, rows, cols); + lastUpdate = timestamp; + } + + ctx.clearRect(0, 0, canvas.width, canvas.height); + + const cols = Math.ceil(canvas.width / CELL_SIZE); + const rows = Math.ceil(canvas.height / CELL_SIZE); + + for (let i = 0; i < rows; i++) { + for (let j = 0; j < cols; j++) { + if (gridRef.current[i]?.[j]) { + ctx.fillStyle = 'rgba(228, 228, 231, 0.6)'; // zinc-200 with transparency + ctx.fillRect( + j * CELL_SIZE + 1, + i * CELL_SIZE + 1, + CELL_SIZE - 2, + CELL_SIZE - 2 + ); + } + } + } + + animationRef.current = requestAnimationFrame(draw); + }; + + animationRef.current = requestAnimationFrame(draw); + + return () => { + window.removeEventListener('resize', resize); + if (animationRef.current) { + cancelAnimationFrame(animationRef.current); + } + }; + }, [initGrid, nextGeneration]); + + return ( + + ); +}; + const CopyCommand = ({ command }: { command: string }) => { const [copied, setCopied] = useState(false); @@ -29,9 +166,13 @@ const CopyCommand = ({ command }: { command: string }) => { export default function GetStartedPage() { return ( -
+
+ {/* Game of Life Background */} +
+ +
{/* Hero */} -
+
+ + diff --git a/website/src/pages/agent-os/use-cases.astro b/website/src/pages/agent-os/use-cases.astro new file mode 100644 index 0000000000..ef757dc044 --- /dev/null +++ b/website/src/pages/agent-os/use-cases.astro @@ -0,0 +1,12 @@ +--- +import MarketingLayout from '@/layouts/MarketingLayout.astro'; +import AgentOSUseCasesPage from '@/components/marketing/solutions/AgentOSUseCasesPage'; +--- + + + +