• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
damixnr

damixnr

OpenCloset

Remix of laurynas/ChatAppSDKStarter
Public
Like
OpenCloset
Home
Code
10
backend
5
frontend
2
shared
4
.vtignore
OPENCLOSET.md
README.md
TESTING.md
TROUBLESHOOTING.md
WIDGET_REGISTRATION.md
deno.json
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
OPENCLOSET.md
Code
/
OPENCLOSET.md
Search
…
OPENCLOSET.md

OpenCloset Implementation

This document describes the OpenCloset functionality that has been added to the Val Town ChatGPT App SDK Starter.

Overview

OpenCloset is a digital wardrobe management system that allows users to:

  1. Upload photos of their clothing items
  2. Automatically categorize them as tops or bottoms
  3. Get outfit suggestions from their saved items
  4. Browse their digital closet

Architecture

Frontend Components

  • ItemCard - Displays individual clothing items
  • MultiItemCard - Shows multiple items in a grid layout
  • OutfitCard - Displays complete outfits with top and bottom pieces

Backend Services

  • Cloudinary Integration - Handles image upload and storage
  • In-Memory Store - Stores clothing items (MVP implementation)
  • MCP Tools - Provides ChatGPT integration

Environment Setup

Required Environment Variables

Add these to your Val Town environment:

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
CLOUDINARY_UPLOAD_PRESET=your_preset (optional)

Cloudinary Setup

  1. Create a free Cloudinary account at https://cloudinary.com
  2. Get your cloud name, API key, and API secret from the dashboard
  3. (Optional) Create an unsigned upload preset for easier integration

API Reference

MCP Tools

opencloset.capture_items

Uploads and categorizes clothing photos.

Input:

{ photoUrls: string[], // Array of image URLs from ChatGPT attachments category: "top" | "bottom" // Clothing category }

Output:

  • Single item: Displays ItemCard widget
  • Multiple items: Displays MultiItemCard widget

opencloset.suggest_outfit

Suggests an outfit from saved items.

Input: None

Output:

  • Displays OutfitCard widget with randomly selected top and bottom
  • Error message if insufficient items in closet

opencloset.list_items

Lists all items in the closet.

Input:

{ category?: "top" | "bottom" // Optional category filter }

Output:

  • Displays MultiItemCard widget with filtered items
  • Empty state message if no items found

Data Models

Item Schema

{ id: string, // UUID imageUrl: string, // Cloudinary URL category: "top" | "bottom", createdAt: number // Unix timestamp }

Widget Output Schemas

  • CaptureItemsOutput - Single item or array of items
  • SuggestOutfitOutput - Top and bottom item pair

Usage Examples

Adding Items to Closet

  1. Upload photos in ChatGPT
  2. Say: "Add these to my closet as tops"
  3. System uploads to Cloudinary and saves items
  4. Displays ItemCard or MultiItemCard widget

Getting Outfit Suggestions

  1. Say: "Suggest an outfit from my closet"
  2. System randomly selects one top and one bottom
  3. Displays OutfitCard widget with the combination

Browsing Closet

  1. Say: "Show me all my closet items"
  2. System displays all saved items in MultiItemCard widget
  3. Can filter by category: "Show me all my tops"

Technical Implementation

Image Upload Flow

  1. ChatGPT provides image URLs from user attachments
  2. uploadToCloudinary() function handles the upload
  3. Supports both signed and unsigned upload methods
  4. Returns secure Cloudinary URL for storage

Widget Integration

  • Each tool specifies openai/outputTemplate in metadata
  • Widgets automatically render based on structured content
  • Consistent styling across all clothing-related widgets

Error Handling

  • Cloudinary upload failures are caught and reported
  • Empty closet states are handled gracefully
  • Missing environment variables cause clear error messages

Storage

Current Implementation (MVP)

  • In-memory storage using CLOSET array
  • Data persists only during server runtime
  • Fast and simple for testing and development

Future Enhancements

  • Database persistence using existing SQLite setup
  • User-specific closets with authentication
  • Advanced categorization (colors, seasons, brands)
  • Outfit history and favorites

Testing

Manual Testing Steps

  1. Set up Cloudinary environment variables
  2. Upload clothing photos in ChatGPT
  3. Test each MCP tool with various inputs
  4. Verify widget rendering and data flow

Test Prompts

  • "Add these photos to my closet as tops"
  • "Add this to my closet as a bottom"
  • "Suggest an outfit"
  • "Show me my closet"
  • "Show me all my tops"

Troubleshooting

Common Issues

  1. Cloudinary upload fails: Check environment variables
  2. No outfit suggestions: Ensure both tops and bottoms are in closet
  3. Widget not displaying: Verify openai/outputTemplate metadata

Debug Tips

  • Check server logs for Cloudinary errors
  • Verify image URLs are accessible
  • Test Cloudinary credentials separately

Future Roadmap

Phase 2 Features

  • Database persistence
  • User authentication and multi-user support
  • Advanced item metadata (color, brand, season)
  • Smart outfit suggestions based on weather/occasion

Phase 3 Features

  • AI-powered style recommendations
  • Integration with shopping platforms
  • Social sharing of outfits
  • Wardrobe analytics and insights
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
Β© 2025 Val Town, Inc.