Open Generative AI Architecture and Monorepo Structure

Open Generative AI is built as a Next.js 15 App Router monorepo that is simultaneously a self-hosted web application, an Electron desktop app, and a library of reusable React studio components. A single shared packages/studio package contains all model definitions, API client code, and UI components — the same package that powers the hosted version at muapi.ai. Everything is wired together with npm workspaces and a lightweight CORS proxy so the browser never makes cross-origin requests.

Monorepo Overview

The repository root is a Next.js application. Additional npm workspace packages live under packages/ and are built before the Next.js application at setup time (npm run build:packages). The full workspace list from package.json:

"workspaces": [
  "packages/studio",
  "packages/Vibe-Workflow/packages/workflow-builder",
  "packages/Open-Poe-AI/packages/agents",
  "packages/Open-AI-Design-Agent/packages/design-agent"
]

Package	Workspace name	Purpose
`packages/studio`	`studio`	Shared React component library — all studios, model definitions, API client
`packages/Vibe-Workflow/packages/workflow-builder`	`workflow-builder`	Node-based visual workflow builder (git submodule)
`packages/Open-Poe-AI/packages/agents`	`ai-agent`	AI agents runtime (git submodule)
`packages/Open-AI-Design-Agent/packages/design-agent`	`design-agent`	Autonomous AI design agent (git submodule)

All four workspace packages are listed in transpilePackages inside next.config.mjs so Next.js compiles their source through Babel/SWC during the Next.js build:

// next.config.mjs
const nextConfig = {
  transpilePackages: ['studio', 'ai-agent', 'workflow-builder', 'design-agent'],
};

Directory Structure

Open-Generative-AI/
├── app/                        # Next.js App Router
│   ├── layout.js               # Root layout
│   ├── page.js                 # Redirects → /studio
│   └── studio/page.js          # Renders StandaloneShell
├── components/
│   ├── StandaloneShell.js      # Tab nav + BYOK API key
│   └── ApiKeyModal.js          # API key entry modal
├── packages/
│   └── studio/src/
│       ├── index.js            # Exports all studio components
│       ├── models.js           # 200+ model definitions
│       ├── muapi.js            # API client
│       └── components/         # Studio components
├── next.config.mjs             # transpilePackages: ['studio', 'ai-agent', 'workflow-builder', 'design-agent']
└── package.json                # workspaces config

The app/studio/page.js entry point renders StandaloneShell, which provides tab-based navigation across all studios and handles the Bring-Your-Own-Key (BYOK) API key flow via ApiKeyModal. Each tab renders one of the studio components exported from packages/studio.

packages/studio Library

packages/studio is the single source of truth for everything generation-related. It is consumed by both this self-hosted app and the hosted version at muapi.ai — a model added to models.js or a UI change in a studio component is reflected in both deployments automatically.

Exports

packages/studio/src/index.js exports the following studio components:

Export	Studio
`ImageStudio`	Text-to-image and image-to-image generation (50+ / 55+ models)
`VideoStudio`	Text-to-video and image-to-video generation (40+ / 60+ models)
`LipSyncStudio`	Portrait image or video + audio → talking video (9 models)
`CinemaStudio`	Photorealistic cinematic shots with pro camera controls
`WorkflowStudio`	Node-based multi-step AI pipeline builder and playground
`AgentStudio`	AI agent creation, conversation, and management
`AudioStudio`	Audio generation models
`MarketingStudio`	Marketing ad generation with omni-reference support
`ClippingStudio`	AI-powered video highlight clipping
`VibeMotionStudio`	Motion graphics generation and editing
`RecastStudio`	Body-swap and recast video generation
`DesignAgentStudio`	Autonomous AI design agent
`AppsStudio`	Hosted AI app catalogue
`McpCliStudio`	MCP and CLI integration interface
`AiInfluencerStudio`	AI influencer content generation

models.js

models.js contains definitions for all 200+ supported models — each entry specifies the model’s display name, endpoint slug, supported parameters (aspect ratios, resolutions, quality tiers, duration options), image field names for multi-image models, and mode flags. The studio components query these definitions at runtime to build their dynamic controls.

muapi.js

muapi.js is the API client. It exports named async functions (generateImage, generateVideo, generateI2I, generateI2V, processLipSync, uploadFile, executeWorkflow, etc.) that each accept the API key as their first parameter. All generation functions delegate to the internal submitAndPoll helper which implements the two-step submit-then-poll pattern described below.

Electron Desktop Integration

The desktop app uses Vite to bundle the frontend and Electron to wrap it in a native window. The build pipeline is:

Vite bundles the frontend

npm run vite:build compiles the React application (including all workspace packages) into the dist/ directory. The Vite config sets base: './' so that asset URLs are relative — required for Electron’s file:// origin.

Electron loads the bundle

electron/main.js is the Electron entry point (set as "main" in package.json). It creates a BrowserWindow and loads dist/index.html.

Local AI engine is bundled

The build/local-ai directory is copied into the packaged app as an extra resource (extraResources in the build config). The sd-cli binary and its shared library are extracted from there on first run into OPEN_GENERATIVE_AI_LOCAL_AI_DIR.

electron-builder creates installers

electron-builder produces platform-specific installers: .dmg for macOS (Intel + Apple Silicon), NSIS .exe for Windows, and .AppImage / .deb for Linux. Output goes to the release/ directory.

Because the Electron renderer uses a file:// origin rather than http://, the muapi.js client detects this and calls https://api.muapi.ai directly — no CORS proxy is needed.

API Communication Pattern

All cloud generation flows use a consistent two-step submit → poll pattern implemented in muapi.js.

User prompt
    │
    ▼
Studio component  (e.g. ImageStudio.jsx)
    │  calls generateImage(apiKey, params)
    ▼
muapi.js  →  submitAndPoll(endpoint, payload, key)
    │
    ├─ Step 1: POST /api/v1/{endpoint}
    │          Headers: x-api-key: <key>
    │          Body:    { prompt, aspect_ratio, … }
    │          Returns: { request_id }
    │
    └─ Step 2: GET /api/v1/predictions/{request_id}/result  (polled every 2 s)
               Until status = "completed" | "succeeded" | "success"
               Returns: { outputs: ["https://…/result.png"] }
                   │
                   ▼
            Studio component displays output

BASE_URL resolution

The BASE_URL constant in muapi.js is set once at module load time:

const BASE_URL = (typeof window !== 'undefined' && window.location?.protocol?.startsWith('http'))
    ? '/api'
    : 'https://api.muapi.ai';

Runtime	`BASE_URL`	Routing
Browser (Next.js)	`/api`	Next.js catch-all API routes proxy the call server-side to `https://api.muapi.ai`
Electron renderer	`https://api.muapi.ai`	Direct call — no proxy
SSR / Node.js	`https://api.muapi.ai`	Direct call — `window` is undefined

Authentication

Every request sends the user’s API key in the x-api-key header. The key is read from browser localStorage (muapi_key) by the studio components and passed as the first argument to every muapi.js function. It is never stored server-side.

File uploads

Before passing a reference image to a model, the file is uploaded via POST /api/v1/upload_file (multipart/form-data). The upload returns a hosted URL (data.url) that is then used as image_url or placed into the images_list array in the generation payload. Files are cached in localStorage by URL so they are not re-uploaded across sessions.

Tailwind CSS Theme

The UI uses a dark glassmorphism design system defined in tailwind.config.js. Custom tokens:

colors: {
  primary:   { DEFAULT: '#22d3ee', hover: '#06b6d4' },  // cyan accent
  'app-bg':  '#050505',   // near-black page background
  'panel-bg':'#0a0a0a',   // panel background
  'card-bg': '#141414',   // card / input background
  secondary: '#a1a1aa',   // muted text
  muted:     '#52525b',   // disabled / placeholder text
},
boxShadow: {
  'glow':        '0 0 20px rgba(34, 211, 238, 0.4)',   // cyan glow
  'glow-accent': '0 0 20px rgba(168, 85, 247, 0.4)',   // purple accent glow
},
fontFamily: {
  sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
},

Tailwind scans all workspace packages for class names so that components inside packages/studio, packages/Open-Poe-AI, packages/Open-AI-Design-Agent, and packages/Vibe-Workflow can use the same design tokens without duplicating the config.

Get Started

Studios

Local Inference

Configuration & Architecture

Open Generative AI Architecture and Monorepo Structure

Monorepo Overview

Directory Structure

packages/studio Library

Exports

models.js

muapi.js

Electron Desktop Integration

API Communication Pattern

BASE_URL resolution

Authentication

File uploads

Tailwind CSS Theme

Build docs developers (and LLMs) love

Get Started

Studios

Local Inference

Configuration & Architecture

Documentation Index

​Monorepo Overview

​Directory Structure

​packages/studio Library

​Exports

​models.js

​muapi.js

​Electron Desktop Integration

​API Communication Pattern

​BASE_URL resolution

​Authentication

​File uploads

​Tailwind CSS Theme

Build docs developers (and LLMs) love

Monorepo Overview

Directory Structure

packages/studio Library

Exports

models.js

muapi.js

Electron Desktop Integration

API Communication Pattern

BASE_URL resolution

Authentication

File uploads

Tailwind CSS Theme