Turn a styling idea into an editable bag charm. Describe your bag, explore a live 3D design, keep the details you love, and review an itemized quote before confirming a test order.
Try LOOP · Try the MCP demo · Reviewer guide · 简体中文
- Start with a conversation. Describe your bag, colors, occasion, and budget. AI selects compatible parts from the real catalog.
- See the result. Rotate, zoom, and preview your charm on three illustrative bag models.
- Keep what works. Lock a part, revise the rest through conversation, or choose a replacement from visual options.
- Return to your work. Save and reopen designs in the same guest workspace.
- Understand the price. The server validates each configuration and calculates the USD line items.
- Confirm deliberately. Review a quote before creating a test order. The website also offers a separate Amazon Pay US Sandbox checkout.
LOOP includes three design structures, 14 parts, five cord colors, gold/silver hardware, an English/Chinese website, and interactive MCP Apps cards. Product geometry and most preview assets are authored for this project.
LOOP implements a self-hosted MCP server with protocol 2025-11-25 over Streamable HTTP. It exposes 10 design tools and one renderer asset tool, backed by the same business rules as the website. ChatGPT can act as a conversational host and display an interactive design card.
The web MCP demo is also a real SDK client: initialization, tool discovery, design requests, quotes, saves, and test checkout travel through MCP. Its expandable call trace makes that integration inspectable.
This is an Alexa+ hackathon prototype demonstrated through compatible clients, with no connection to a real Alexa+ device or partner-only runtime. The competition accepts this demonstration route; see the official FAQ and integration guide.
| Entry | Use |
|---|---|
| Website | Discover designs, use the AI stylist, or open the 3D studio |
| MCP web client | Connect, try a catalog example or AI brief, and inspect MCP calls |
| Health check | Check backend and storage availability |
| Privacy notice | Understand browser drafts, saved records, and connected services |
MCP Server URL: https://loop-charm-studio.vercel.app/mcp
For a ChatGPT account/workspace with custom MCP access, add this URL with OAuth, leave static client credentials blank, install the resulting connection, and authorize your own guest workspace. Follow the ChatGPT guide. Opening /mcp directly without credentials returns 401, as expected.
The website and MCP web demo work without a ChatGPT account. Hosted use requires no GitHub login, local installation, or project API key from the visitor.
Use Node.js 24 (minimum 22.13) and pnpm 11.25.0. Models, textures, lighting, and thumbnails are included; Blender and a separate database installation are unnecessary.
git clone https://github.com/Evan0571/charm-studio.git
cd charm-studio
npm install --global pnpm@11.25.0
pnpm install --frozen-lockfile
node -e "const fs=require('node:fs'); if(!fs.existsSync('.env')) fs.copyFileSync('.env.example','.env');"
pnpm setup:check
pnpm devOpen http://localhost:3000. With no keys configured, local SQLite supports manual design, saving, pricing, test orders, and deterministic MCP catalog examples.
To enable the website's AI stylist, set OPENAI_API_KEY in your private .env and restart. The project default is OPENAI_MODEL=gpt-4.1-mini. The ChatGPT catalog-to-preview workflow uses the host model and does not require a project OpenAI key. See setup and configuration.
pnpm test
pnpm mcp:smoke
pnpm build
pnpm startTests use isolated data and mocked AI. Building produces the website, MCP UI, and server bundle. Validation records distinguish these checks from live provider and client tests.
ChatGPT + MCP Apps card / web MCP client
| Streamable HTTP
v
MCP tools + OAuth/PKCE
|
Website REST API + shared studio service
|
Catalog validation + server pricing
|
SQLite locally / Supabase on Vercel
The website AI stylist calls OpenAI Responses with structured output. ChatGPT's normal design flow reads the catalog and calls preview tools using its own model. Original procedural geometry, bundled GLB models, and Three.js render the same configuration that the server quotes.
Hosted OAuth uses shared persistence, and large UI/model resources use streamed MCP responses. A separate local stdio entry supports compatible desktop hosts. Deployment · MCP reference · Local stdio
All checkout paths are demonstrations: no real charge, stock reservation, manufacturing, or shipping. MCP test checkout and website Amazon Pay Sandbox are separate flows. Guest cookies identify a browser workspace; there is no verified customer login or automatic cross-device recovery. Budgets are interpreted by the model, while configuration validity and final prices are enforced by the server. Previews illustrate appearance and proportion rather than manufacturing fit.
| Read next | Purpose |
|---|---|
| Reviewer testing guide | A complete hosted walkthrough and local fallback |
| Setup / Environment | Install, configure, and run |
| ChatGPT / MCP | Connect a host and inspect the protocol |
| Current status / Validation | Current scope, evidence, and limitations |
| Product brief / Assets | User need, product scope, and asset provenance |
| Devpost checklist / 提交清单 | Numbered requirements and remaining submission work |
| Demo script / 口播与操作稿 | Timed English narration and Chinese recording instructions |
| Submission copy / Product feedback | Draft text for the team to review and submit |
| Documentation index | Guides and historical design notes |
LOOP's original code and project-authored assets are available under the MIT License. Poly Haven material maps and HDRI lighting retain their CC0 provenance. Third-party packages retain their own licenses. See third-party notices and the asset register.
Built for the Build, Ship, Shape: Amazon Developer Hackathon, Alexa+ track. Amazon, Alexa+, ChatGPT, and other product names belong to their respective owners.