Web-Based Operating System with AI-Generated Applications

Features • Setup • Environment Variables • SDK • License

OZ is a web-based desktop operating system that runs in the browser. It features a full windowing system, file management via Google Drive integration, and the ability to generate fully functional HTML applications using AI.

• Desktop Environment: Full windowing system with drag-and-drop, minimize, maximize, and resize capabilities
• File Management: Integration with Google Drive for persistent file storage across sessions
• AI Application Generator: Generate complete single-page HTML applications from natural language prompts
• Application Marketplace: Publish and install applications created by other users
• Built-in Applications: Todo list, Notes, Calculator, Weather, Music player, and Photos gallery
• File Viewers: Native viewers for text files, images (PNG, JPEG, GIF), and PDF documents
• Software Versioning: Track application history using PostgreSQL ltree for lineage tracking
• Sandboxed Execution: Generated applications run in sandboxed iframes with access to system services
• Neo-Brutalist Design: Dark theme with monospace typography and lime accent colors

OZ consists of several key components:

• Desktop Environment: React-based UI with a window manager, dock, menu bar, launchpad, and spotlight search
• File System Layer: Abstracts Google Drive as the backend storage with local metadata caching in PostgreSQL
• Software Runtime: Executes user-generated HTML applications in sandboxed iframes with postMessage-based service communication
• AI Generation Service: Uses OpenAI to generate complete HTML applications from prompts
• Marketplace: Allows users to publish, discover, and install applications from other users

• Framework: Next.js 16 with App Router
• Language: TypeScript
• Database: PostgreSQL with Prisma ORM
• Styling: Tailwind CSS 4
• File Storage: Google Drive API
• AI: OpenAI API (GPT model)
• UI Components: Custom React components with Lucide icons

• Node.js 18 or later
• PostgreSQL 14 or later (with ltree extension)
• Google Cloud Console project with Drive API enabled
• OpenAI API key

Create a .env file in the project root with the following variables:

# Database
DATABASE_URL=postgresql://username:password@localhost:5432/oz

# Google OAuth (for Google Drive integration)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI=http://localhost:3000/api/auth/google/callback

# OpenAI (for AI application generation)
OPENAI_API_KEY=your-openai-api-key

git clone <repository-url>
cd oz
npm install

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Google Drive API:
   • Navigate to "APIs & Services" > "Library"
   • Search for "Google Drive API" and enable it
4. Configure OAuth consent screen:
   • Navigate to "APIs & Services" > "OAuth consent screen"
   • Select "External" user type
   • Fill in the required application information
   • Add the scope: https://www.googleapis.com/auth/drive
5. Create OAuth credentials:
   • Navigate to "APIs & Services" > "Credentials"
   • Click "Create Credentials" > "OAuth client ID"
   • Select "Web application"
   • Add authorized redirect URI: http://localhost:3000/api/auth/google/callback
   • Copy the Client ID and Client Secret to your .env file

1. Go to OpenAI Platform
2. Create an API key under "API Keys"
3. Copy the key to your .env file

Ensure PostgreSQL is running and create a database:

createdb oz

Enable the ltree extension (required for software versioning):

psql oz -c "CREATE EXTENSION IF NOT EXISTS ltree;"

Run Prisma migrations:

npx prisma migrate dev

Seed the database with demo data:

npx prisma db seed

npm run dev

Open http://localhost:3000 in your browser.

oz/
├── app/                          # Next.js App Router pages and API routes
│   ├── api/
│   │   ├── auth/                 # Google OAuth endpoints
│   │   │   ├── google/           # OAuth initiation
│   │   │   └── logout/           # Session logout
│   │   ├── files/                # File operations API
│   │   │   └── [fileId]/         # File read, info, image endpoints
│   │   ├── generate/             # AI application generation
│   │   └── services/             # Service APIs for sandboxed apps
│   │       └── ai/               # AI chat and completion
│   ├── login/                    # Login page
│   ├── globals.css               # Global styles and design system
│   ├── layout.tsx                # Root layout
│   ├── os-client.tsx             # Main OS client component
│   └── page.tsx                  # Home page (redirects to login or OS)
├── components/
│   ├── finder/                   # File browser components
│   │   ├── Breadcrumb.tsx
│   │   ├── FileList.tsx
│   │   ├── Finder.tsx
│   │   └── Sidebar.tsx
│   ├── icons/                    # Icon components
│   │   └── FileIcon.tsx
│   ├── os/                       # Core OS components
│   │   ├── Desktop.tsx           # Desktop with icons
│   │   ├── Dock.tsx              # Application dock
│   │   ├── GeneratePanel.tsx     # AI generation panel
│   │   ├── Launchpad.tsx         # Application launcher
│   │   ├── Marketplace.tsx       # App marketplace
│   │   ├── MenuBar.tsx           # Top menu bar
│   │   └── Spotlight.tsx         # Search interface
│   ├── services/                 # Service components
│   │   └── FilePicker.tsx        # File picker dialog
│   ├── viewers/                  # File viewer components
│   │   ├── ImageViewer.tsx
│   │   ├── PdfViewer.tsx
│   │   └── TextViewer.tsx
│   └── window/                   # Window management
│       ├── AppWindow.tsx         # Sandboxed app container
│       ├── Window.tsx            # Window chrome
│       └── WindowManager.tsx     # Window state manager
├── lib/
│   ├── actions.ts                # Server actions for data operations
│   ├── auth.ts                   # Authentication utilities
│   ├── google-drive.ts           # Google Drive API client
│   ├── mock-data.ts              # Demo data
│   ├── os-context.tsx            # React context for OS state
│   ├── prisma.ts                 # Prisma client singleton
│   ├── services/                 # Service implementations
│   │   ├── ai-service.ts         # AI service for sandboxed apps
│   │   ├── file-service.ts       # File service for sandboxed apps
│   │   ├── index.ts              # Service exports
│   │   ├── registry.ts           # Service registry
│   │   └── types.ts              # Service type definitions
│   ├── software-html.ts          # Built-in app HTML content
│   ├── software-lineage.ts       # ltree utilities for versioning
│   └── types.ts                  # TypeScript type definitions
├── prisma/
│   ├── migrations/               # Database migrations
│   ├── schema.prisma             # Database schema
│   └── seed.ts                   # Database seed script
├── .env                          # Environment variables (not committed)
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Generated applications have access to system services via the OzServices global object. These services enable file operations and AI capabilities within sandboxed applications.

// Open file picker
const files = await OzServices.files.select({
  multiple: false,
  accept: ["image/*"],
  title: "Select an image",
});

// Read file content
const fileInfo = await OzServices.files.read(fileId);

// Create a new file
const newFile = await OzServices.files.create("notes.txt", "Hello world", {
  mimeType: "text/plain",
});

// Update a file
await OzServices.files.write(fileId, "Updated content");

// List files in a folder
const files = await OzServices.files.list(folderId);

// Chat with AI
const response = await OzServices.ai.chat([
  { role: "user", content: "Hello!" },
]);

// Simple text completion
const text = await OzServices.ai.complete("Write a haiku about coding");

// Summarize text
const summary = await OzServices.ai.summarize(longText);

// Extract structured data
const data = await OzServices.ai.extract(text, ["name", "email", "phone"]);

// Translate text
const translated = await OzServices.ai.translate(text, "Spanish");

OZ uses a Neo-Brutalist design language with the following characteristics:

• Color Palette: Dark backgrounds (#0a0a0a, #141414), lime accent (#c6ff00), light text (#f4f4f0)
• Typography: Monospace fonts (JetBrains Mono, SF Mono, Consolas)
• Borders: Heavy 2px borders, minimal border radius (0-4px)
• Shadows: Hard box-shadows without blur
• Labels: Uppercase text with letter-spacing

The application uses four main tables:

• users: User accounts with Google Drive tokens and preferences
• file_metadata: Cached file metadata from Google Drive
• software: Application records with ltree-based lineage tracking
• pinned_files: Quick access pinned files for each user

MIT