IDE Extensions Setup Guide

This comprehensive guide walks you through the complete process of installing, configuring, and using the Emuluxe IDE extensions across VS Code, Cursor, and Antigravity. The Emuluxe IDE extension brings the hardware foundry directly into your coding environment, eliminating context switching by providing real-time, high-fidelity mobile preview alongside your source code.

Prerequisites

Before beginning the installation process, ensure you have:

• Active Internet Connection: Required for authentication and dashboard sync
• Emuluxe Account: Sign up at app.emuluxe.com
• IDE Requirements:
  • VS Code: Version 1.80.0 or higher
  • Cursor: Latest version with MCP support
  • Antigravity: Latest version with MCP support
• Development Server: A running local server (Vite, Webpack, Live Server, etc.) for testing

Installation Overview

The installation process follows these key stages:

1. Extension Installation - Download and install the extension in your preferred IDE
2. Authentication - Link your IDE to your Emuluxe account
3. Configuration - Set up your API token and preferences
4. Smart Discovery - Configure local server detection
5. First Simulation - Launch your first mobile simulation

Detailed Installation Steps

Step 1: Install the Extension

For VS Code Users

1. Open VS Code and navigate to the Extensions view by pressing Cmd+Shift+X on macOS or Ctrl+Shift+X on Windows/Linux
2. In the search bar, type "Emuluxe" to find the extension
3. Click the Install button on the Emuluxe extension card
4. Wait for the installation to complete (typically 5-10 seconds)
5. Alternatively, install directly from the VS Code Marketplace

For Cursor Users

1. Open Cursor and access the Extensions view through the sidebar or via keyboard shortcut
2. Search for "Emuluxe" in the extension marketplace
3. Click Install to add the extension to your Cursor environment
4. The extension will automatically integrate with Cursor's AI-native architecture
5. View the listing on the Cursor Directory for additional details

For Antigravity Users

1. Open Antigravity and navigate to the Extensions section
2. Search for "Emuluxe" in the extension registry
3. Click Install to enable the integration
4. The extension provides Antigravity agents with direct access to hardware fingerprints
5. Alternatively, install from the Open VSX Registry

Step 2: Authentication Setup

Method A: Manual Login via Command Palette

1. Open the Command Palette in your IDE:
   • VS Code/Cursor/Antigravity: Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
2. Type "Emuluxe: Login" and select the command
3. Your default browser will open and navigate to the Emuluxe authentication page
4. Log in with your Emuluxe account credentials
5. Upon successful authentication, you'll receive an API token
6. Copy this token for the next configuration step

Method B: One-Click Sync (Recommended)

1. Navigate to your Integrations Settings in the Emuluxe dashboard
2. Locate the section for your IDE (VS Code, Cursor, or Antigravity)
3. Click the Sync / Login button corresponding to your IDE
4. The extension will automatically authenticate without requiring manual token entry
5. This method is faster and reduces the risk of token entry errors

Step 3: Token Configuration (Manual Method Only)

If you used Method A for authentication, complete these steps:

1. Open your IDE Settings:
   • VS Code/Cursor/Antigravity: Cmd+, (macOS) or Ctrl+, (Windows/Linux)
2. In the search bar, type "Emuluxe" to filter settings
3. Locate the "Emuluxe: Token" field
4. Paste your API token (copied from Step 2)
5. The token is stored securely in your IDE's credential storage
6. Tokens expire after 30 days; you'll be prompted to re-login when needed

Step 4: Smart Localhost Discovery

The Emuluxe extension automatically detects running development servers:

1. Ensure your development server is running (e.g., npm run dev, vite, webpack serve)
2. The extension scans common ports (3000, 3001, 4000, 5000, 5173, 8080, etc.)
3. Detected servers appear in the quick-pick interface when you launch simulation
4. The discovery process runs in the background without interrupting your workflow
5. If your server uses a non-standard port, you can manually enter the URL

Step 5: Launch Your First Simulation

Using the Toolbar Logo

1. Click the Emuluxe logo in the top-right corner of any editor tab
2. The Smart Discovery interface opens, showing detected local servers
3. Select your desired server from the list
4. The simulation panel opens with the default device (iPhone 15 Pro Max)

Using Keyboard Shortcuts

1. Press Cmd+Alt+E (macOS) or Ctrl+Alt+E (Windows/Linux)
2. The quick-pick interface appears with server options
3. Select your target server
4. Simulation launches immediately in a dedicated panel

Using Context Menu

1. Right-click on any file, folder, or editor tab
2. Select "Emuluxe: Start Simulation" from the context menu
3. The extension infers the appropriate URL based on your project structure
4. Simulation begins automatically

Step 6: Device Selection and Customization

Once simulation is running, you can customize the device configuration:

1. Change Device: Press Cmd+Alt+D to open the device quick-pick
2. Available Devices: Choose from 30+ device profiles including:
   • iPhone series (SE, 14, 15, 15 Pro, 15 Pro Max)
   • iPad series (mini 6, Pro 12.9, Air)
   • Android flagships (Pixel 8 Pro, Galaxy S24 Ultra, OnePlus 12)
   • Android mid-range (Galaxy A54, Pixel 7a)
   • Android budget (Redmi Note 13, Moto G Power)
   • Foldables (Galaxy Z Fold 6, Pixel Fold)
   • Desktop profiles (MacBook Pro, Windows Laptop, 4K Display)

Step 7: Advanced Simulation Features

Orientation Toggle

1. Press Cmd+R to instantly toggle between portrait and landscape modes
2. The simulation maintains your current state during rotation
3. Layout shifts and responsive behaviors are immediately visible
4. Note: This shortcut may conflict with VS Code's reload command; customize if needed

Screenshot Capture

1. Press Cmd+S while simulation is active
2. A high-fidelity screenshot is captured including:
   • The device frame and bezels
   • The rendered website content
   • Current orientation and device state
3. Screenshots are saved to your default downloads folder
4. File naming includes timestamp and device information

Developer Inspector

1. Press Cmd+I to open the Chrome DevTools inspector
2. Debug your application using standard Chrome DevTools features
3. The inspector operates within the simulated mobile environment
4. Inspect elements, view console logs, and analyze network activity
5. This provides the same debugging experience as native mobile browsers

Biometric Simulation

1. Navigate to a page with WebAuthn or biometric authentication
2. The extension intercepts biometric API calls
3. Simulated FaceID/TouchID prompts appear for testing
4. Test both success and failure scenarios for comprehensive coverage
5. This feature requires a Pro or Enterprise subscription

Step 8: Network Simulation

1. Access the network controls from the simulation panel
2. Select from pre-configured network profiles:
   • 4G: Typical mobile broadband (10 Mbps download, 5 Mbps upload)
   • 3G: Slower mobile connection (1.5 Mbps download, 750 Kbps upload)
   • 2G: Edge/GPRS (250 Kbps download, 50 Kbps upload)
   • Offline: No network connectivity
3. Custom profiles can be created for specific testing scenarios
4. Network conditions affect:
   • Page load times
   • Resource loading sequences
   • JavaScript execution timing
   • API request/response patterns

Step 9: Session Management

1. Use the session controls to save your current simulation state
2. Saved sessions include:
   • Device configuration
   • Network conditions
   • Cookie and local storage state
   • Current URL and scroll position
3. Share sessions with team members for collaborative debugging
4. Export sessions for offline analysis or documentation
5. Session features require Pro or Enterprise subscription

Step 10: Plan Enforcement

The extension automatically enforces feature access based on your subscription tier:

• Free Tier: Basic viewport resizing, 6 devices, 3 AI analyses per day
• Pro Tier: 30+ devices, unlimited AI, sessions, advanced features
• Enterprise Tier: All Pro features plus team sharing, SSO, audit logs

No manual configuration is required—the extension detects your tier and enables features accordingly.

Troubleshooting

Login Issues

Problem: Authentication fails or token is rejected

Solutions:

1. Verify you have an active Emuluxe account at emuluxe.com
2. Check your internet connection
3. Try clearing VS Code credentials: Run Emuluxe: Logout then login again
4. Ensure your token hasn't expired (30-day validity period)
5. Contact support if issues persist

Simulation Not Starting

Problem: Extension doesn't launch simulation panel

Solutions:

1. Verify your token is correctly configured in Settings
2. Check that your development server is running on a detected port
3. Try restarting your IDE after installation
4. Check the IDE's output panel for error messages
5. Ensure your IDE meets the minimum version requirements

Smart Discovery Not Finding Servers

Problem: Local servers aren't detected automatically

Solutions:

1. Confirm your development server is actually running
2. Check that your server uses a standard port (3000-5173 range)
3. Manually enter the URL in the simulation interface
4. Check firewall settings that might block port scanning
5. Restart the extension by reloading your IDE window

Keyboard Shortcuts Not Working

Problem: Shortcuts don't trigger expected actions

Solutions:

1. Some shortcuts may conflict with IDE defaults or other extensions
2. Customize shortcuts in: Settings > Keyboard Shortcuts > search "Emuluxe"
3. Check that the simulation panel has focus when using shortcuts
4. Verify you're using the correct modifier keys for your OS
5. Try alternative access methods (toolbar, context menu, command palette)

Device Frames Not Displaying

Problem: Simulation runs but device frames are missing

Solutions:

1. Ensure you have a Pro or Enterprise subscription (frames are a paid feature)
2. Check that hardware acceleration is enabled in your IDE
3. Update your graphics drivers
4. Try switching to a different device profile
5. Check the output panel for rendering errors

Integration with AI Agents

Cursor Integration

The Emuluxe extension provides Cursor's AI assistant with hardware-aware context:

1. Cursor can "see" your site through specific device geometries
2. AI suggestions account for device-specific constraints (safe areas, notches)
3. The assistant can recommend device-optimized code changes
4. Real-time validation of AI-generated code against 80+ device profiles

Antigravity Integration

Antigravity agents gain direct access to hardware fingerprints:

1. Agents can verify code changes against simulated devices in real-time
2. Automated testing across multiple device configurations
3. Hardware-aware code generation and optimization
4. Integration with Antigravity's advanced AI capabilities

MCP Server Integration

For advanced AI workflows, the extension works with the Emuluxe MCP Server:

1. Install the MCP Server: npx -y @emuluxe/mcp-server
2. Configure your IDE's MCP settings with your EMULUXE_TOKEN
3. AI agents can programmatically launch simulations
4. Automated testing and validation workflows
5. Deep-link integration for seamless simulation launching

Best Practices

Development Workflow

1. Start Early: Use simulation from the beginning of development, not just at the end
2. Test Multiple Devices: Verify your site across different device categories
3. Test Network Conditions: Don't assume fast, reliable connections
4. Use Sessions: Save interesting states for later analysis
5. Leverage AI: Use AI analysis to catch issues you might miss

Performance Optimization

1. Close Unused Simulations: Multiple active simulations can impact performance
2. Use Appropriate Devices: Test with devices relevant to your target audience
3. Monitor Resource Usage: Check your IDE's resource usage during simulation
4. Cache Sessions: Reuse saved sessions instead of recreating configurations

Team Collaboration

1. Share Sessions: Export and share sessions with team members
2. Document Issues: Use screenshots to document mobile-specific bugs
3. Standardize Testing: Agree on a standard set of devices for team testing
4. Use Enterprise Features: Leverage team sharing and audit logs for large teams

Security and Privacy

• Data Collection: Only anonymous usage analytics and authentication tokens are collected
• Source Code Privacy: Your source code never leaves your local machine
• Secure Storage: Tokens are stored in your IDE's secure credential storage
• Encrypted Communication: All dashboard communication uses HTTPS
• Token Expiration: Tokens expire after 30 days for security
• No Remote Code: The extension does not execute remote code

Next Steps

After completing the setup:

1. Explore the Command Palette for advanced commands
2. Learn about AI Analysis for automated issue detection
3. Configure Network Throttling for realistic testing
4. Set up Session Management for collaborative debugging
5. Explore Biometrics Simulation for authentication testing

For additional help, visit the Help Center or contact support@emuluxe.com.