OpenCloset
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.
This document describes the OpenCloset functionality that has been added to the Val Town ChatGPT App SDK Starter.
OpenCloset is a digital wardrobe management system that allows users to:
- Upload photos of their clothing items
- Automatically categorize them as tops or bottoms
- Get outfit suggestions from their saved items
- Browse their digital closet
- ItemCard - Displays individual clothing items
- MultiItemCard - Shows multiple items in a grid layout
- OutfitCard - Displays complete outfits with top and bottom pieces
- Cloudinary Integration - Handles image upload and storage
- In-Memory Store - Stores clothing items (MVP implementation)
- MCP Tools - Provides ChatGPT integration
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)
- Create a free Cloudinary account at https://cloudinary.com
- Get your cloud name, API key, and API secret from the dashboard
- (Optional) Create an unsigned upload preset for easier integration
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
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
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
{
id: string, // UUID
imageUrl: string, // Cloudinary URL
category: "top" | "bottom",
createdAt: number // Unix timestamp
}
CaptureItemsOutput- Single item or array of itemsSuggestOutfitOutput- Top and bottom item pair
- Upload photos in ChatGPT
- Say: "Add these to my closet as tops"
- System uploads to Cloudinary and saves items
- Displays ItemCard or MultiItemCard widget
- Say: "Suggest an outfit from my closet"
- System randomly selects one top and one bottom
- Displays OutfitCard widget with the combination
- Say: "Show me all my closet items"
- System displays all saved items in MultiItemCard widget
- Can filter by category: "Show me all my tops"
- ChatGPT provides image URLs from user attachments
uploadToCloudinary()function handles the upload- Supports both signed and unsigned upload methods
- Returns secure Cloudinary URL for storage
- Each tool specifies
openai/outputTemplatein metadata - Widgets automatically render based on structured content
- Consistent styling across all clothing-related widgets
- Cloudinary upload failures are caught and reported
- Empty closet states are handled gracefully
- Missing environment variables cause clear error messages
- In-memory storage using
CLOSETarray - Data persists only during server runtime
- Fast and simple for testing and development
- Database persistence using existing SQLite setup
- User-specific closets with authentication
- Advanced categorization (colors, seasons, brands)
- Outfit history and favorites
- Set up Cloudinary environment variables
- Upload clothing photos in ChatGPT
- Test each MCP tool with various inputs
- Verify widget rendering and data flow
- "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"
- Cloudinary upload fails: Check environment variables
- No outfit suggestions: Ensure both tops and bottoms are in closet
- Widget not displaying: Verify
openai/outputTemplatemetadata
- Check server logs for Cloudinary errors
- Verify image URLs are accessible
- Test Cloudinary credentials separately
- Database persistence
- User authentication and multi-user support
- Advanced item metadata (color, brand, season)
- Smart outfit suggestions based on weather/occasion
- AI-powered style recommendations
- Integration with shopping platforms
- Social sharing of outfits
- Wardrobe analytics and insights