MrPiglr
fbab43a6f9
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>
);
}
1 line
5 B
Text
1 line
5 B
Text
HEAD
|