# 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

#
```bash
# 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](https://console.anthropic.com/settings/keys) and create a new API key

2. **Configure Environment**:
  ```bash
   # 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**:
  ```bash
   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](./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

#
```bash
# 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

#
```bash
# 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](https://aethex.com)
- **GitHub**: [@AeThex-LABS](https://github.com/AeThex-LABS)
- **Issues**: [GitHub Issues](https://github.com/AeThex-LABS/aethex-studio/issues)

---


---

**Built with ❤️ by the AeThex team**

Happy coding! 🎮✨