Generated by Spark: # Create Next.js app

npx create-next-app@latest aethex-studio --typescript --tailwind --app

# Install core dependencies
npm install @monaco-editor/react
npm install @anthropic-ai/sdk
npm install prisma @prisma/client
npm install zustand (state management)
npm install socket.io-client (real-time)
```

**Don't try to host it IN Firebase Studio. Build it as a separate web app.**

**File Structure:**
```
aethex-studio/
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   └── signup/
│   ├── (studio)/
│   │   ├── editor/
│   │   ├── preview/
│   │   └── ai-assistant/
│   └── api/
│       ├── projects/
│       ├── files/
│       └── ai/
├── components/
│   ├── Editor/
│   │   ├── MonacoEditor.tsx
│   │   ├── FileTree.tsx
│   │   └── Tabs.tsx
│   ├── Preview/
│   │   ├── RobloxPreview.tsx
│   │   ├── WebPreview.tsx
│   │   └── MobilePreview.tsx
│   └── AI/
│       ├── ChatPanel.tsx
│       └── QuickActions.tsx
├── lib/
│   ├── db.ts (Prisma client)
│   ├── anthropic.ts (Claude API)
│   └── nexus.ts (Nexus Engine SDK)
└── prisma/
    └── schema.prisma

'use client';

import { Editor } from '@monaco-editor/react';
import { useState } from 'react';

export default function AeThexEditor() {
  const [code, setCode] = useState('-- Your Lua code here\nprint("Hello from AeThex!")');

  return (
    <div className="h-full w-full">
      <Editor
        height="100%"
        defaultLanguage="lua"
        theme="vs-dark"
        value={code}
        onChange={(value) => setCode(value || '')}
        options={{
          minimap: { enabled: true },
          fontSize: 14,
          lineNumbers: 'on',
          automaticLayout: true,
        }}
      />
    </div>
  );
}

.spark-initial-sha

@@ -0,0 +1 @@
+HEAD