Morpheus

Demo - https://morpheus.tailz.dev

Shape your data, transform your reality.

A comprehensive, web-based utility for developers that allows for rapid, on-the-fly data manipulation. Transform structured data in various formats using JavaScript, with optional AI-powered code generation.

✨ Features

Core Functionality

• 📊 Multi-Format Support: Parse JSON, YAML, CSV, TOML, and XML
• 🔍 Auto-Detection: Automatically detects data format with manual override option
• 💻 Code Editor: Built-in JavaScript editor with syntax highlighting and auto-completion (CodeMirror 6)
• ⚡ Real-Time Transformation: See results instantly as you type
• 🔒 Sandboxed Execution: Secure code execution in Web Workers
• 🎨 Beautiful UI: Modern, responsive interface built with Nuxt UI

AI-Powered Features

• 🤖 AI Code Generation: Generate transformation code from natural language using Google Gemini
• 🔐 Privacy First: Option to send only data schema instead of actual data to AI
• 📝 Smart Prompts: Context-aware code generation based on your data structure

Developer Experience

• ⚡️ Debounced Execution: Smooth performance with automatic debouncing
• 🚨 Error Handling: Clear, separate error messages for parsing and execution failures
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/Turbotailz/morpheus.git
cd morpheus

2. Install dependencies:

npm install

3. (Optional) Set up Gemini API for AI features:

cp .env.example .env

Edit .env and add your Gemini API key:

NUXT_PUBLIC_GEMINI_API_KEY=your_api_key_here

Get your API key from: https://makersuite.google.com/app/apikey

4. Start the development server:

npm run dev

Visit http://localhost:3000 in your browser.

📖 Usage

Basic Workflow

1. Paste Your Data: Copy and paste your data into the input area

   • Supports: JSON, YAML, CSV, TOML, XML
   • Auto-detects format or manually select from dropdown

2. Write Transformation Code: Use JavaScript to transform your data

   • Access your parsed data via the data variable
   • Use standard JavaScript methods (map, filter, reduce, etc.)
   • Example: return data.filter(item => item.age > 30)

3. See Results: View the transformed output in real-time

Using AI Code Generation

1. Describe what you want to do in plain English

   • Example: "get all users over 30 and return only their name and email"

2. Choose privacy option:

   • Schema only (recommended): Sends data structure without actual values
   • Actual data: Sends sample data for more accurate code generation

3. Click "Generate Code" to get AI-generated transformation code

Example Transformations

Filter and Map:

return data
  .filter(user => user.age > 30)
  .map(user => ({
    name: user.name,
    email: user.email
  }))

Group By:

return data.reduce((acc, item) => {
  const key = item.category
  if (!acc[key]) acc[key] = []
  acc[key].push(item)
  return acc
}, {})

Aggregate:

return {
  total: data.length,
  average: data.reduce((sum, item) => sum + item.value, 0) / data.length
}

🏗️ Project Structure

morpheus/
├── app/
│   ├── components/
│   │   └── CodeEditor.vue          # CodeMirror editor component
│   ├── composables/
│   │   ├── useCodeExecution.ts     # Web Worker code execution
│   │   ├── useDebounce.ts          # Debouncing utility
│   │   └── useGemini.ts            # Gemini AI integration
│   ├── pages/
│   │   └── index.vue               # Main application page
│   ├── utils/
│   │   ├── dataParser.ts           # Multi-format data parsing
│   │   └── schemaGenerator.ts      # Data schema generation
│   └── app.vue                     # Root component
├── public/
│   └── code-worker.js              # Web Worker for sandboxed execution
├── package.json
├── nuxt.config.ts
└── README.md

🔧 Technology Stack

• Framework: Nuxt 4.1.3 with Vue 3 Composition API
• UI Library: Nuxt UI 4.0.1
• Code Editor: CodeMirror 6
• Data Parsing:
  • JSON: Native JavaScript
  • YAML: js-yaml
  • CSV: PapaParse
  • TOML: @iarna/toml
  • XML: fast-xml-parser
• AI: Google Gemini 1.5 Flash

🔒 Security & Privacy

Sandboxed Execution

All user code is executed in a Web Worker, providing isolation from the main thread and preventing access to:

• DOM manipulation
• Local storage
• Cookies
• Network requests

Privacy Controls

• Default Mode: Only data schema is sent to AI (no actual values)
• Opt-in Data Sharing: Users can explicitly enable sending actual data samples
• Local Processing: All data parsing and transformation happens in the browser
• No Server Storage: No data is stored on any server

Timeout Protection

Code execution is limited to 5 seconds to prevent infinite loops and resource exhaustion.

🛠️ Development

Available Scripts

# Development
npm run dev          # Start dev server

# Production
npm run build        # Build for production
npm run preview      # Preview production build
npm run generate     # Generate static site

# Testing
npm test             # Run tests
npm run test:ui      # Run tests with UI
npm run test:coverage # Generate coverage report

# Utilities
npm run postinstall  # Prepare Nuxt types (runs automatically)

Testing

Morpheus has comprehensive test coverage using Vitest:

• 68 tests - All passing ✅
• 63% overall coverage
• 98% coverage on utilities
• 93% coverage on composables

Run Tests

# Run all tests
npm test

# Watch mode
npm test -- --watch

# With UI
npm run test:ui

# Generate coverage report
npm run test:coverage

See TESTING.md for detailed testing documentation.

Environment Variables

Variable	Description	Required
NUXT_PUBLIC_GEMINI_API_KEY	Google Gemini API key for AI code generation	No (AI features won't work without it)

🤝 Contributing

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

📝 License

MIT License - feel free to use this project for personal or commercial purposes.

🙏 Acknowledgments

• Built with Nuxt
• UI components by Nuxt UI
• Code editor by CodeMirror
• AI powered by Google Gemini

💡 Future Enhancements

• Support for more data formats (Protobuf, MessagePack)
• Save/load transformation templates
• Share transformations via URL
• TypeScript support in code editor
• Multiple transformation steps/pipeline
• Export results in different formats
• Dark/light theme toggle
• Keyboard shortcuts

---

Built with ❤️ by developers, for developers