Skip to main content

​
Digital Alchemy OS

A futuristic, AI-powered operating system interface that brings together workspace management, AI assistance, and beautiful animations in a single web application.

​
Overview

Digital Alchemy OS reimagines the desktop experience for the web, combining modern UI/UX patterns with cutting-edge AI capabilities powered by Google’s Gemini API.

Next.js 16

Latest Next.js with App Router and React Server Components

Google Gemini AI

Advanced AI assistance integrated throughout the OS

Framer Motion

Smooth, physics-based animations for every interaction

Zustand State

Lightweight, fast state management

​
Key Features

​
AI-Powered Workspace

Integrated AI assistant powered by Google Gemini:
  • Natural language commands
  • Context-aware responses
  • File and project understanding
  • Code generation and explanation
  • Task automation suggestions

​
Modern UI/UX

Glass Morphism

Translucent panels with backdrop blur effects

Dark Mode Native

Designed for dark environments with optional light mode

Responsive Layout

Adapts from desktop to tablet to mobile

Keyboard Shortcuts

Power-user friendly with intuitive hotkeys

Context Menus

Right-click anywhere for contextual actions

Window Management

Resize, minimize, and organize multiple windows

​
Visual Design

Built on the Digital Alchemy design system:
  • Cyberpunk aesthetic with neon accents
  • Smooth animations powered by Framer Motion
  • Utility-first styling with Tailwind CSS 4
  • lucide-react icons for consistent visuals
  • Custom fonts and typography scale

​
Tech Stack

package.json
{
  "name": "digital-alchemy-os",
  "version": "0.1.0",
  "dependencies": {
    "next": "16.1.0",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "@google/generative-ai": "^0.24.1",
    "framer-motion": "^12.23.26",
    "zustand": "^5.0.9",
    "lucide-react": "^0.562.0",
    "clsx": "^2.1.1",
    "tailwind-merge": "^3.4.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "typescript": "^5",
    "eslint": "^9",
    "eslint-config-next": "16.1.0"
  }
}
This project uses Next.js 16 with the App Router, which provides improved performance through React Server Components and streaming.

​
Architecture

​
App Router Structure

digital-alchemy-os/
├── app/
│   ├── layout.tsx          # Root layout with providers
│   ├── page.tsx            # Desktop/home screen
│   ├── workspace/
│   │   └── page.tsx        # Workspace management
│   ├── apps/
│   │   ├── editor/
│   │   ├── notes/
│   │   └── terminal/
│   └── api/
│       └── ai/
│           └── route.ts    # AI endpoint
├── components/
│   ├── desktop/            # Desktop UI components
│   ├── windows/            # Window management
│   ├── apps/              # Mini-app components
│   └── ui/                # Reusable UI primitives
├── lib/
│   ├── ai.ts              # Gemini AI integration
│   ├── store.ts           # Zustand stores
│   └── utils.ts           # Helper functions
└── public/
    └── icons/             # App icons and assets

​
State Management

Using Zustand for lightweight, performant state: 
import { create } from 'zustand';

interface WindowState {
  windows: Window[];
  activeWindow: string | null;
  openWindow: (app: string) => void;
  closeWindow: (id: string) => void;
  focusWindow: (id: string) => void;
}

const useWindowStore = create<WindowState>((set) => ({
  windows: [],
  activeWindow: null,
  openWindow: (app) => set((state) => ({
    windows: [...state.windows, createWindow(app)],
  })),
  closeWindow: (id) => set((state) => ({
    windows: state.windows.filter((w) => w.id !== id),
  })),
  focusWindow: (id) => set({ activeWindow: id }),
}));

​
AI Integration

​
Google Gemini Setup

1

Get API Key

Sign up for Google AI Studio and get your Gemini API key: https://ai.google.dev
2

Set Environment Variable

Create .env.local:
GOOGLE_GEMINI_API_KEY=your_api_key_here
3

Initialize Client

import { GoogleGenerativeAI } from '@google/generative-ai';

const genAI = new GoogleGenerativeAI(
  process.env.GOOGLE_GEMINI_API_KEY!
);
const model = genAI.getGenerativeModel({ 
  model: 'gemini-pro' 
});

​
AI Assistant Features

const chat = model.startChat({
  history: [
    {
      role: 'user',
      parts: [{ text: 'Hello!' }],
    },
    {
      role: 'model',
      parts: [{ text: 'Hi! How can I help you today?' }],
    },
  ],
});

const result = await chat.sendMessage(userInput);
const response = result.response.text();

​
Animation Patterns

​
Window Animations

import { motion } from 'framer-motion';

const Window = ({ children, isActive }) => (
  <motion.div
    initial={{ opacity: 0, scale: 0.9, y: 50 }}
    animate={{ 
      opacity: 1, 
      scale: 1, 
      y: 0,
      zIndex: isActive ? 100 : 1
    }}
    exit={{ 
      opacity: 0, 
      scale: 0.8,
      transition: { duration: 0.2 }
    }}
    drag
    dragConstraints={{ top: 0, left: 0, right: 1000, bottom: 600 }}
    dragElastic={0.1}
    className="window"
  >
    {children}
  </motion.div>
);

​
Desktop Transitions

const pageVariants = {
  initial: { opacity: 0, scale: 1.05 },
  enter: { 
    opacity: 1, 
    scale: 1,
    transition: { 
      duration: 0.4,
      ease: [0.43, 0.13, 0.23, 0.96]
    }
  },
  exit: { 
    opacity: 0, 
    scale: 0.95,
    transition: { duration: 0.3 }
  }
};

​
Getting Started

1

Clone and Install

git clone [repository]
cd digital-alchemy-os
npm install
2

Configure Environment

Create .env.local with your Gemini API key:
GOOGLE_GEMINI_API_KEY=your_key_here
3

Run Development Server

npm run dev
Open http://localhost:3000
4

Build for Production

npm run build
npm run start

​
Deployment

Deployment options for Next.js 16:
Remember to add your GOOGLE_GEMINI_API_KEY to your deployment platform’s environment variables.

​
Customization

​
Adding New Apps

Create a new app in the app/apps/ directory: 
// app/apps/calculator/page.tsx
export default function Calculator() {
  return (
    <div className="p-4">
      <h1>Calculator</h1>
      {/* Your app UI */}
    </div>
  );
}
Register it in the app registry: 
// lib/apps.ts
export const apps = [
  {
    id: 'calculator',
    name: 'Calculator',
    icon: 'calculator',
    path: '/apps/calculator'
  },
  // ... other apps
];

​
Theming

Customize colors in tailwind.config.ts: 
export default {
  theme: {
    extend: {
      colors: {
        'os-bg': '#0A0A0A',
        'os-surface': '#1A1A1A',
        'os-primary': '#00E639',
        'os-accent': '#A855F7',
        // ... more colors
      }
    }
  }
}

Experience the OS

Try Digital Alchemy OS live and explore all features

Build docs developers (and LLMs) love

Get started for freeTalk to us