{"id":29416218,"url":"https://github.com/vibecad/gui-clean","last_synced_at":"2026-04-09T07:02:53.602Z","repository":{"id":303695255,"uuid":"1016369431","full_name":"VibeCAD/gui-clean","owner":"VibeCAD","description":"A powerful browser-based 3D creation application built with \"AI-First\" Principles. Built with React, TypeScript, and Babylon.js. Create and modify 3D objects using natural language commands via OpenAI integration. Clean Repo = Open Source with no auth or DB.","archived":false,"fork":false,"pushed_at":"2025-07-09T00:06:29.000Z","size":99,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-09T00:25:37.685Z","etag":null,"topics":["3d-graphics","3d-modelling","ai-integration","babylonjs","browser-based","cad","clean-architecture","client-side","no-backend","open-source","openai","react","typescript","vite","web-application","webgl","zustand"],"latest_commit_sha":null,"homepage":"https://gui-clean.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VibeCAD.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":"SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-08T23:06:44.000Z","updated_at":"2025-07-09T00:07:04.000Z","dependencies_parsed_at":"2025-07-09T00:25:40.490Z","dependency_job_id":"b1381f3a-b55b-4383-9926-d338257cfec3","html_url":"https://github.com/VibeCAD/gui-clean","commit_stats":null,"previous_names":["vibecad/gui-clean"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/VibeCAD/gui-clean","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VibeCAD%2Fgui-clean","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VibeCAD%2Fgui-clean/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VibeCAD%2Fgui-clean/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VibeCAD%2Fgui-clean/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VibeCAD","download_url":"https://codeload.github.com/VibeCAD/gui-clean/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VibeCAD%2Fgui-clean/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264878580,"owners_count":23677450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-graphics","3d-modelling","ai-integration","babylonjs","browser-based","cad","clean-architecture","client-side","no-backend","open-source","openai","react","typescript","vite","web-application","webgl","zustand"],"created_at":"2025-07-11T19:02:12.516Z","updated_at":"2025-12-30T22:11:01.135Z","avatar_url":"https://github.com/VibeCAD.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Moorph GUI Clean\n\nA powerful, browser-based 3D CAD application that enables users to create and manipulate 3D objects with AI assistance. Built with React, TypeScript, Babylon.js, and powered by OpenAI's API through an MCP (Model Context Protocol) server.\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js 18+ \n- npm or yarn\n- OpenAI API key (for AI features)\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/VibeCAD/gui-clean.git\n   cd gui-clean\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm run dev\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:5173`\n\n### Configuration\n\nWhen you first launch the application, you'll be prompted to enter your OpenAI API key. This enables the AI-powered scene manipulation features.\n\n\u003e **Note**: Your API key is stored locally in your browser and never sent to external servers.\n\n## ✨ Features\n\n**🎯 3D Creation**: Primitives (cube, sphere, cylinder, etc.) and housing elements with full transform controls  \n**🤖 AI Integration**: Natural language commands for scene manipulation via OpenAI API  \n**🛠️ Professional Tools**: Multi-select, snap-to-grid, camera controls, wireframe mode  \n**🎨 Modern UI**: Dropdown toolbar, real-time status, keyboard shortcuts, responsive design  \n\n## 🏗️ Architecture\n\n### Core Technologies\n- **Frontend**: React 18 + TypeScript + Vite\n- **3D Engine**: Babylon.js for WebGL rendering\n- **State Management**: Zustand for application state\n- **AI Integration**: OpenAI API with MCP Server\n- **Styling**: Custom CSS with modern design system\n\n### Key Components\n- **`useBabylonScene`**: Main hook managing 3D scene lifecycle\n- **`SceneStore`**: Centralized state management for 3D objects\n- **`AISidebar`**: AI-powered natural language interface\n- **`GizmoManager`**: Interactive 3D transform controls\n- **`ObjectFactory`**: 3D primitive and housing creation system\n\n## 🎮 Usage\n\n### Creating Objects\n1. Click **Create** in the toolbar\n2. Select from Primitives or Housing elements\n3. Object appears in the 3D scene at a random position\n4. Use transform tools to position and modify\n\n### AI Commands\n1. Open the AI sidebar (right panel)\n2. Enter natural language commands like:\n   - \"Create a red cube next to the sphere\"\n   - \"Make all objects blue\"\n   - \"Arrange objects in a circle\"\n   - \"Delete everything except the house\"\n\n### Transform Operations\n1. Select an object in the 3D scene\n2. Choose transform mode: Select, Move, Rotate, or Scale\n3. Use gizmo handles for precise manipulation\n4. Hold Ctrl for multi-select operations\n\n### Camera Navigation\n- **Mouse**: Left-click and drag to rotate\n- **Wheel**: Zoom in/out\n- **Toolbar**: Quick camera positions (Front, Top, etc.)\n\n## 🔧 Development\n\n### Project Structure\n```\nsrc/\n├── babylon/          # Babylon.js integration\n│   ├── hooks/       # React hooks for 3D scene\n│   ├── objectFactory.ts\n│   ├── sceneManager.ts\n│   └── gizmoManager.ts\n├── components/       # React components\n│   └── sidebar/     # AI and properties panels\n├── state/           # State management\n│   └── sceneStore.ts\n├── types/           # TypeScript definitions\n└── ai/              # AI service integration\n```\n\n### Key Scripts\n```bash\nnpm run dev          # Start development server\nnpm run build        # Build for production\nnpm run preview      # Preview production build\nnpm run lint         # Run ESLint\n```\n\n## 🌟 Why \"Clean\"?\n\nThis repository represents a **clean**, open-source version of the Moorph GUI platform:\n\n- ❌ **No Authentication**: No login/signup required\n- ❌ **No Database**: No server-side data persistence\n- ❌ **No Cloud Services**: Runs entirely in the browser\n- ✅ **Pure 3D Creation**: Focus on core 3D manipulation features\n- ✅ **AI Integration**: Full OpenAI API support\n- ✅ **Open Source**: MIT licensed for community development\n\nPerfect for developers who want to:\n- Learn 3D web development with Babylon.js\n- Integrate AI into 3D applications\n- Build upon a solid CAD foundation\n- Contribute to open-source 3D tools\n\n## 🤝 Contributing\n\nWe welcome contributions! This clean version is designed for community development:\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Submit a pull request\n\n## 📝 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n---\n\n**Built with ❤️ by Moorph Labs**\n\n\u003e Transform your 3D ideas into reality with the power of AI and modern web technologies.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvibecad%2Fgui-clean","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvibecad%2Fgui-clean","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvibecad%2Fgui-clean/lists"}