Advanced Product Customizer (3D, AI Design Tools)

Paid pluginsize Mplanned, not built

Indicative price, not an offer: $25-49/mo

Generated from docs/plan/paid/advanced-product-customizer/PLAN.md in the AstroBaaS repository. Nothing described below is implemented — it is the written plan for it.

Merchants selling custom products (apparel, gifts) need 3D previews and AI design tools so customers can visualize their creation before checkout. This feature provides 3D model viewer and AI image generation integration.

The problem

I sell personalized products but customers can’t see how their design will look in 3D. AI design tools would let customers generate their own artwork instead of hiring designers.

What it does

• Product option type: ‘customizer’ with config {3d_model_url, ai_design_enabled, allowed_ai_styles}
• 3D viewer: embed GLTFs model, allow customer to rotate/zoom, overlay customer text/image on model
• AI design generation: customer enters prompt (‘dark blue logo with a wolf’), AI generates image, customer picks from results
• Design storage: save customer’s design (text, uploaded image, AI-generated image) as JSON in the order line item
• Design preview on checkout: show customer a mockup of their design on the product before they pay
• Admin upload of 3D models: drag-drop .gltf/.glb files, associate with product, test viewer
• API endpoints: GET product customizer config, POST design preview (returns image), POST order with saved design

What it deliberately does NOT do

Each boundary carries its reason. A boundary without a reason gets crossed by the next person who reads this.

• 3D model generation from photos — we do not run photogrammetry; merchants upload pre-made models
• Real-time collaboration (multiple users designing simultaneously) — single-user design session only
• Design marketplace or asset library — customers cannot browse/import designs from a gallery
• Print file generation (PDF/EPS for manufacturing) — design is stored as JSON; production system handles file conversion

Data model

New field on Product entity: customizer_config (JSON nullable). Example: {type: ‘customizer’, model_url: ‘/3d/shirt-blue.gltf’, ai_design_enabled: true, ai_styles: [‘realistic’, ‘cartoon’]}. New field on OrderLineItem: design_data (JSON nullable). Example: {text: ‘My Text’, uploaded_image_url: ’…’, ai_image_url: ’…’, ai_prompt: ‘dark blue logo’}.

API

• GET /api/products/:id/customizer — fetch customizer config (public)
• POST /api/customizer/preview — generate preview image from design JSON (returns image URL)
• POST /api/customizer/ai-generate — call AI image generation (customer prompt) (returns image URLs)
• POST /api/orders — create order with design_data in line items

Every route added here must also appear in src/pages/openapi.json.ts — a test fails the build if it does not.

Admin

Product editor, customizer tab: toggle ‘Enable 3D customizer’, upload 3D model file (.gltf/.glb), enable AI design generation, select AI styles allowed. Preview: embed 3D viewer, test rotate/zoom. Test customizer: enter design JSON, see preview.

The seam — why this is paid

Core owns the product customizer option schema, design storage, and REST API. Paid layer owns 3D viewer engine (Three.js, Babylon.js integration), AI image generation API (OpenAI DALL-E, Stability AI, etc.), file hosting for 3D models and generated images, and support for design-to-print workflows.

Paid module owns 3D viewer engine, AI image generation API call orchestration, and design file hosting; core provides option schema only

Dependencies

• 3D viewer library (Three.js, Babylon.js, or similar) must be available
• AI image generation API client (OpenAI API, Stability AI API, etc.) — merchant provides API key
• File storage (already shipping in core) for 3D models and generated images
• Design preview rendering (some way to composite text + images onto product mockup; may use AI image generation as a fallback)

Acceptance checks

Each of these must be able to fail. Before claiming this is done, break the code deliberately and watch each one go red.

• A product can have customizer_config set with 3d_model_url and ai_design_enabled=true
• A customer can upload a 3D-enabled product page, see a 3D model in the viewer, and rotate it
• A customer can enter text ‘My Name’ on the 3D model and see a preview of the text on the product
• A customer can enter AI prompt ‘sunset landscape’ and receive 3 AI-generated images to choose from
• A customer can select one generated image and see it composited onto the 3D model preview
• When customer adds to cart, their design (text + image choice) is stored in order line item
• At checkout, preview shows the final design on the product before payment

Risks

3D model files can be large; hosting + delivery must be fast (CDN). AI image generation is slow (30+ seconds per image); UI must handle async waiting gracefully. AI-generated images may violate copyright if trained on copyrighted art; merchant assumes legal risk. 3D viewer can crash or perform poorly on older browsers; graceful degradation (fallback to 2D image) is needed. Design storage is essential for production; if design_data is lost, the order cannot be manufactured — this field must be immutable after order is placed.

Commercial context

The anchor is what the nearest equivalent charges on Shopify or Magento today. It is context for a pricing decision, not the decision.

---

Generated from the commerce plan. See docs/COMMERCE-PLAN.md for the full catalogue and ../../AI-GUIDE.md for how to work on this repository.