Firebase Studio

This is a NextJS starter in Firebase Studio.

To get started, take a look at src/app/page.tsx.

• Platform Switching - Work with Roblox, UEFN, Spatial, or Core
• Platform-Specific Templates:
  • 🎮 Roblox: 25 Lua templates
  • ⚡ UEFN: 8 Verse templates (Beta)
  • 🌐 Spatial: Coming soon
  • 🎯 Core: Coming soon
• Cross-Platform Translation - AI-powered code conversion between platforms
• Side-by-Side Comparison - Compare original and translated code
• Smart Editor - Language highlighting adapts to selected platform

🎨 Modern Code Editor

• Monaco Editor - The same editor that powers VS Code
• Multi-language Support - Lua, Verse, TypeScript
• Real-time code validation and linting
• Multi-file editing with tab management
• File tree navigation with drag-and-drop organization

🤖 AI-Powered Assistant

• Built-in AI chat for code help and debugging
• Context-aware suggestions
• Code explanation and documentation
• Roblox API knowledge

📁 Project Management

• File Tree - Organize your scripts into folders
• Drag-and-drop - Rearrange files easily
• Quick file search (Cmd/Ctrl+P) - Find files instantly
• Search in files (Cmd/Ctrl+Shift+F) - Global text search

🎯 Productivity Features

• 33+ Code Templates - Ready-made scripts for multiple platforms
  • Roblox (25 templates):
    • Beginner templates (Hello World, Touch Detectors, etc.)
    • Gameplay systems (DataStore, Teams, Combat, etc.)
    • UI components (GUIs, Timers, etc.)
    • Advanced features (Pathfinding, Inventory, etc.)
  • UEFN (8 templates):
    • Beginner (Hello World, Player Tracking)
    • Gameplay (Timers, Triggers, Damage Zones)
    • UI (Button Interactions)
    • Tools (Item Spawners)
• Command Palette (Cmd/Ctrl+K) - Quick access to all commands
• Keyboard Shortcuts - Professional IDE shortcuts
• Code Preview - Test your scripts instantly

💻 Interactive Terminal & CLI

• Built-in Terminal - Full-featured command line interface
• 10+ CLI Commands for Roblox development:
  • help - Display available commands
  • run - Execute current Lua script
  • check - Validate syntax and find errors
  • count - Count lines, words, characters
  • api <class> - Lookup Roblox API documentation
  • template [list|name] - Browse and load templates
  • export [filename] - Export scripts to .lua files
  • clear - Clear terminal output
  • info - Display system information
  • echo - Print text to terminal
• Command History - Navigate previous commands with ↑/↓ arrows
• Auto-completion - Tab-complete command names
• Smart Suggestions - Context-aware command hints
• Toggle with Cmd/Ctrl + ` - Quick terminal access

🎨 Customization

• 5 Beautiful Themes:
  • Dark - Classic dark theme for comfortable coding
  • Light - Clean light theme for bright environments
  • Synthwave - Retro neon aesthetic
  • Forest - Calming green tones
  • Ocean - Deep blue theme
• Persistent preferences - Your settings are saved

📱 Mobile Responsive

• Optimized layouts for phones and tablets
• Touch-friendly controls
• Hamburger menu for mobile
• Collapsible panels

🚀 Developer Experience

• Code splitting for fast loading
• Error boundaries with graceful error handling
• Loading states with spinners
• Toast notifications for user feedback
• Testing infrastructure with Vitest

🎮 Perfect For

• Multi-Platform Developers - Build for Roblox, UEFN, Spatial, and Core from one IDE
• Game Studios - Translate games between platforms with AI assistance
• Roblox → UEFN Migration - Converting existing Roblox games to Fortnite
• Students & Learners - Learn multiple game development languages
• Rapid Prototyping - Build once, deploy to multiple platforms
• Web-Based Development - Code anywhere, no installation needed

⌨️ Keyboard Shortcuts

Shortcut	Action
Cmd/Ctrl + S	Save file (auto-save enabled)
Cmd/Ctrl + P	Quick file search
Cmd/Ctrl + K	Command palette
Cmd/Ctrl + N	New project
Cmd/Ctrl + F	Find in editor
Cmd/Ctrl + Shift + F	Search in all files
Cmd/Ctrl + `	Toggle terminal

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/AeThex-LABS/aethex-studio.git

# Navigate to the project directory
cd aethex-studio

# Install dependencies
npm install

# Start the development server
npm run dev

Visit http://localhost:3000 to see the application.

🔑 Enabling Cross-Platform Translation

To unlock the AI-powered code translation feature, you need a Claude API key:

1. Get API Key: Visit Anthropic Console and create a new API key

2. Configure Environment:

 # Copy example environment file
 cp .env.example .env.local

 # Edit .env.local and add your API key
 VITE_CLAUDE_API_KEY=sk-ant-api03-your-api-key-here

3. Restart Dev Server:

 npm run dev

4. Test Translation:
   • Open AeThex Studio
   • Click "Translate" button in toolbar
   • Watch real AI translation happen! 🎉

📖 Full Setup Guide: See CLAUDE_API_SETUP.md for detailed instructions, cost estimates, and troubleshooting.

💡 Note: Without an API key, the app works perfectly but shows mock translations instead of real AI conversions.

Building for Production

# Build the application
npm run build

# Start the production server
npm start

📖 Usage Guide

Creating Your First Script

1. Click "New File" in the file tree
2. Choose a template or start from scratch
3. Write your Lua code in the Monaco editor
4. Click "Preview" to test
5. Copy or Export your script

Using Templates

1. Click the Templates button in the toolbar
2. Browse categories: Beginner, Gameplay, UI, Tools, Advanced
3. Click a template to load it into your editor
4. Customize the code for your needs

AI Assistant

1. Open the AI Chat panel (right side on desktop)
2. Ask questions about:
   • Roblox scripting
   • Code debugging
   • API usage
   • Best practices
3. Get instant, context-aware answers

Organizing Files

• Create folders - Right-click in file tree
• Drag and drop - Move files between folders
• Rename - Click the menu (⋯) next to a file
• Delete - Use the menu to remove files

Searching

• Quick search - Cmd/Ctrl+P to find files by name
• Global search - Cmd/Ctrl+Shift+F to search text across all files
• In-editor search - Cmd/Ctrl+F to find text in current file

🛠️ Tech Stack

• Next.js 14 - React framework
• React 18 - UI library
• TypeScript - Type safety
• Monaco Editor - Code editor
• Tailwind CSS - Styling
• Radix UI - Component primitives
• Phosphor Icons - Icon library
• Vitest - Testing framework
• PostHog - Analytics (optional)
• Sentry - Error tracking (optional)

🧪 Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run test:coverage

📂 Project Structure

aethex-studio/
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # Reusable UI components
│   │   ├── CodeEditor.tsx
│   │   ├── FileTree.tsx
│   │   ├── AIChat.tsx
│   │   └── ...
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   │   ├── templates.ts  # Code templates
│   │   └── ...
│   └── App.tsx           # Main application
├── app/                  # Next.js app directory
│   └── globals.css       # Global styles
├── public/               # Static assets
└── tests/                # Test files

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Code Templates

AeThex Studio includes 25+ production-ready templates:

Beginner:

• Hello World, Player Join Handler, Part Touch Detector, etc.

Gameplay:

• DataStore System, Teleport Part, Team System, Combat System, etc.

UI:

• GUI Buttons, Proximity Prompts, Countdown Timers, etc.

Tools:

• Give Tool, Sound Manager, Admin Commands, Chat Commands, etc.

Advanced:

• Round System, Inventory System, Pathfinding NPC, Shop System, etc.

🐛 Bug Reports

Found a bug? Please open an issue on GitHub with:

• Description of the bug
• Steps to reproduce
• Expected vs actual behavior
• Screenshots (if applicable)

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Monaco Editor - For the powerful code editor
• Roblox - For the game platform
• Radix UI - For accessible component primitives
• Vercel - For Next.js framework

📧 Contact

• Website: aethex.com
• GitHub: @AeThex-LABS
• Issues: GitHub Issues

---

---

Built with ❤️ by the AeThex team

Happy coding! 🎮✨