ecommerce-3d-mcp

Disclaimer: Generated code, HTML embeds, and assets are provided "as is" without warranty. Review all generated content before deploying to production stores. This is not a substitute for professional web development review. See TERMS.md and PRIVACY.md.

MCP server for e-commerce 3D product visualization. Generate model-viewer embeds, AR try-on experiences, interactive product configurators, Shopify integrations, and SEO metadata — all from an AI assistant.

Quick Start

npx ecommerce-3d-mcp

Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "ecommerce-3d": {
      "command": "npx",
      "args": ["-y", "ecommerce-3d-mcp"]
    }
  }
}

Related MCP server: Agentic Product Protocol MCP Server

Tools

Usage Examples

3D Product Viewer

"Create a 3D viewer for my Oak Dining Table product. The model is at https://cdn.mystore.com/models/table.glb"

Returns ready-to-paste HTML with <model-viewer>, AR button, camera controls, and responsive sizing.

Shopify Integration

"Generate a Shopify snippet to add 3D viewing to my product pages"

Returns a Liquid template (snippets/product-3d-viewer.liquid) with:

• Metafield-driven model loading

• AR Quick Look (iOS) + Scene Viewer (Android)

• Dawn theme integration instructions

• Fallback to standard product image

AR Try-On

"Create an AR try-on experience for my velvet armchair"

Returns an embed with:

• WebXR, Scene Viewer, and Quick Look AR modes

• Category-aware placement (floor for furniture, body for clothing)

• Styled CTA button

• iOS and Android deep links

Product Configurator

"Build a configurator for my sneaker with color and size options"

Returns a self-contained HTML widget with:

• 3D model viewer

• Color swatches and dropdown selectors

• Dynamic price updates

• Styled options panel

SEO Metadata

"Generate structured data for my Bluetooth speaker at $49.99"

Returns <script type="application/ld+json"> with Product, 3DModel, and Offer schemas.

Pricing

Pass your API key via the apiKey parameter on any tool call.

Shopify Integration Guide

Step 1: Upload 3D Models

Upload .glb and .usdz files to Shopify Admin > Settings > Files, or host on a CDN.

Step 2: Add Metafields

In Shopify Admin > Settings > Metafields > Products, create:

Step 3: Generate Snippet

Use the shopify_snippet tool to get a Liquid template, then save it as snippets/product-3d-viewer.liquid in your theme.

Step 4: Include in Product Template

Add to your product template (e.g., sections/main-product.liquid):

{% render 'product-3d-viewer', product: product %}

Step 5: Add Model URLs to Products

Edit each product and fill in the model_3d_url metafield with the CDN URL of your .glb file.

3D Model Sources

• Shopify: Upload directly via Admin > Files

• Sketchfab: Download or embed models

• CGTrader / TurboSquid: Purchase production-ready models

• Polycam / Luma AI: Scan real products with your phone

• Blender: Create and export as .glb

Development

git clone https://github.com/sceneview-tools/ecommerce-3d-mcp
cd ecommerce-3d-mcp
npm install
npm run build
npm test

Legal

• LICENSE — MIT License

• TERMS.md — Terms of Service

• PRIVACY.md — Privacy Policy (no data collected)

License

MIT — see LICENSE.