# How to Vibe Code Your Own Scenario (and Stop Paying for It) > The Creative AI Infrastructure - Site: https://scenario.com - Category: AI Infrastructure & Creative Workflows - Platforms: Web app, REST API, MCP Server - Verdict: **Serious undertaking** (38/100 vibecodeable) - Estimated effort: 6+ weeks of part-time development ## Verdict Build a simplified personal node-graph wrapper for a few core AI models, but keep paying if you need production-grade enterprise GPU orchestration and custom LoRA pipelines. Replicating Scenario for personal use means building a visual graph editor that coordinates asynchronous AI inference calls across multiple modality APIs (image, 3D, audio, video) while managing local database state for assets. The hardest subsystems are the visual node execution engine and handling the compute states for multi-step workflows. While an AI agent can scaffold the Next.js frontend, React Flow canvas, and API routers quickly, wiring robust error handling across unstable third-party media endpoints requires serious debugging. ### What you can't replicate - Enterprise SOC 2 compliance and absolute data isolation guarantees - Deep native production plugins for Unreal and Unity engines - Built-in commercial enterprise licensing agreements with 50+ foundation model providers ## What it does Creative AI infrastructure and workflow platform built for professional teams, offering custom model training, 500+ foundation models across image, video, 3D, and audio, and visual node-based workflows. ### Core features - Multi-model generation router across 50+ third-party providers - Custom LoRA model training pipeline (5–100 reference images) - Visual canvas-based node execution engine for workflows - 3D PBR mesh generation and browser-based GLB/OBJ/FBX viewer - Model Context Protocol (MCP) server for AI coding agents - One-click app wrapper for visual pipelines - REST API and webhooks for pipeline integration - Asset management, organization, and tagging ## The business ### Pricing - Free: Free - Starter: $15/mo - Pro: $45/mo - Max: $75/mo - Enterprise: Custom ### Funding $6.0M raised. - Seed Investors: Play Ventures, Anorak Ventures, Decasonic, The Venture Reality Fund, Founders Inc., CoinFund, The Games Fund, Justin Kan, Brendan Iribe, Clément Delangue, Balaji Srinivasan Founded 2022. Team size: Small lean team. ## The hard parts - Managing asynchronous compute queues and state persistence across 50+ disparate AI model APIs - Building a custom GPU training orchestrator to fine-tune and host LoRAs securely per workspace - Constructing a robust canvas node-execution graph that passes tensors, images, and text reliably - Rendering and inspecting complex 3D PBR asset formats natively in the browser ## How to vibe code Scenario ### Prerequisites - Node.js (Free): Required runtime for building the Next.js full-stack web application. - GitHub (Free): Source code repository and CI/CD deployment connection to Vercel. - Fal.ai API Key (Pay-as-you-go): Provides fast, cost-effective inference for image and video models like Flux. ### Recommended AI tools - Claude Code: Executes complex multi-file scaffolding for both the Next.js frontend and the node-execution backend. - Cursor: Ideal for fine-tuning the React Flow visual canvas components and UI layout components interactively. ### Stack - Frontend: Next.js with Tailwind CSS, shadcn/ui, and React Flow for the visual node canvas - Backend: Next.js API Routes / Server Actions with Inngest for background orchestration - Database: Turso (SQLite at the edge for users, projects, and asset metadata) - Auth: better-auth - Payments: None (Personal use clone) - Other: Fal.ai API for image generation, Cloudflare R2 for asset storage (images, 3D models), Vercel AI SDK for LLM interactions ### Hosting - Vercel (Hosting the Next.js web application and serverless endpoints): $0-20/mo - Cloudflare R2 (Storing generated images, videos, and 3D files with zero egress fees): $0-5/mo ### Build guide 1. **Scaffold Next.js & Database Schema** — Initialize the Next.js project with Tailwind CSS, shadcn/ui, and Turso database connection via Drizzle ORM. ``` Create a new Next.js 16 project with TypeScript and Tailwind CSS. Configure Drizzle ORM to connect to Turso (SQLite). Create database schemas for users, workspaces, projects, assets (storing metadata, file URLs, modality types), and workflows (storing JSON node graph structures). Implement better-auth for secure email/password authentication. Ensure proper environment variable configuration and TypeScript strict type checking across the entire codebase. ``` 2. **Build Asset Management & Storage Pipeline** — Set up Cloudflare R2 object storage integration and a gallery dashboard for viewing generated media. ``` Implement server-side file upload and retrieval utilities targeting Cloudflare R2 using the AWS SDK S3 client. Create an API route for signed upload and download URLs. Build a responsive dashboard UI using shadcn/ui components that displays uploaded and generated assets in a grid with filtering by modality (image, video, 3D, audio) and project tags. Include a detailed view modal with metadata display and download actions. ``` 3. **Integrate AI Model Generation APIs** — Connect external AI inference providers (Fal.ai and OpenAI) for image and text generation features. ``` Create a modular backend service for AI model generation. Integrate the Fal.ai API for image generation (using Flux models) and OpenAI API for prompt expansion and Genie assistant queries. Build a dedicated generation page with input controls for prompts, aspect ratios, and negative prompts. Implement asynchronous polling for long-running generation tasks, storing successful outputs directly into Cloudflare R2 and recording asset metadata in Turso. ``` 4. **Develop Visual Node-Based Workflow Canvas** — Build an interactive node graph editor using React Flow to chain multi-step generation pipelines. ``` Install and configure React Flow within a dedicated workflow editor page. Create custom node components for 'Prompt Input', 'Model Selector', 'Image Generator', and 'Output Preview'. Implement state management to connect node handles (passing text strings and image URLs between connected nodes). Build an execution engine that traverses the node graph topologically, triggering backend API calls sequentially or in parallel, and updating node execution states in real time. ``` 5. **Add 3D Asset Viewer & App Wrapper** — Incorporate a WebGL/Three.js 3D model viewer for inspectable GLB assets and package workflows into runnable apps. ``` Integrate '@react-three/fiber' and 'three' to build a responsive 3D asset viewer component capable of rendering GLB and OBJ files with orbit controls and PBR lighting. Create an 'App Mode' view that strips away the complex node graph canvas, presenting simplified form inputs and output display screens for saved workflows, allowing users to run custom pipelines as one-click internal applications. ``` 6. **Implement MCP Server & Polish Dashboard** — Add a Model Context Protocol (MCP) server endpoint so local AI developer environments can interact with the workspace. ``` Build a lightweight Model Context Protocol (MCP) server endpoint using standard transport mechanisms that exposes tools for querying projects, listing generated assets, and triggering model generation runs. Add comprehensive error handling, toast notifications for background tasks, and polish the dashboard layout for responsive desktop use. Write unit tests for the workflow graph execution logic. ``` ### Cost vs paying **Starting costs (one-time):** - Custom Domain: $12 one-time - Total: $12 one-time **Ongoing costs (monthly):** - Hosting & Object Storage: $5/mo - AI Inference APIs (Fal.ai / OpenAI): $15/mo - Total: ~$20/mo - Paying for the SaaS instead: $45/mo (Pro tier) - Build time: 40-60 hours - AI tool credits: $20/mo (Claude Pro / Cursor) - Break-even: Never (built for learning and personal use control) ## Sources - [Scenario Official Website](https://scenario.com) - [Scenario Pricing Page](https://www.scenario.com/pricing) - [Scenario About Page](https://www.scenario.com/about) - [Scenario Features & Changelog](https://www.scenario.com/changelog)