This document describes how to test the three new React widget components that have been created.

1. CounterWidget - Interactive counter with increment/decrement functionality
2. TodoWidget - Todo list with completion tracking and progress bar
3. WeatherWidget - Weather display with temperature and conditions
4. DemoWidget - Showcase page displaying all three widgets together
5. ItemCard - Individual wardrobe item display component
6. MultiItemCard - Grid display for multiple wardrobe items
7. OutfitCard - Complete outfit display with top and bottom pieces

Once you've added the MCP server to ChatGPT, you can test the widgets with these prompts:

• "Show me a counter widget"
• "Show me a counter starting at 10 with step size 2"
• "Increment the counter by 5" (after showing a counter)
• "Decrement the counter by 3" (after showing a counter)
• "Reset the counter to 0" (after showing a counter)

• "Show me a todo list"
• "Show me my todos"

• "Show me the weather"
• "Show me weather for London"
• "Show me weather for Tokyo"

• Navigate directly to /demo route to see all widgets together

• "Show me an item card"
• "Show me an item card for a dress"
• "Show me multiple wardrobe items"
• "Show me 4 wardrobe items"
• "Show me an outfit"
• "Create an outfit for me"

• Upload clothing photos and say: "Add these to my closet as tops"
• Upload clothing photos and say: "Add these to my closet as bottoms"
• "Suggest an outfit from my closet"
• "Show me all my closet items"
• "Show me all my tops"
• "Show me all my bottoms"
• "What's in my closet?"

• show_counter - Display counter widget with optional initial count and step
• increment_counter - Increment counter by step amount
• decrement_counter - Decrement counter by step amount
• reset_counter - Reset counter to zero

• show_todos - Display todo list widget with sample data

• show_weather - Display weather widget with sample data for specified location

• show_item_card - Display individual wardrobe item card
• show_multi_item_card - Display multiple wardrobe items in a grid
• show_outfit_card - Display complete outfit with top and bottom pieces

• opencloset.capture_items - Upload and categorize clothing photos
• opencloset.suggest_outfit - Get outfit suggestions from saved items
• opencloset.list_items - View all closet items with optional category filter

The following routes are available in the widget system:

• / - Loading widget (default)
• /list - Message list widget
• /detail/:messageId - Message detail widget
• /counter - Counter widget
• /todo - Todo widget
• /weather - Weather widget
• /demo - Demo page with all widgets
• Individual wardrobe components are rendered as standalone widgets (not routes)

1. ChatGPT calls MCP tool (e.g., show_counter)
2. Tool returns structured data with kind field
3. NavigationSync component reads the kind and navigates to appropriate route
4. Widget component renders based on the structured data

• All widgets use the useToolOutput hook to access structured data
• Theme support via useTheme hook (light/dark mode)
• Interactive actions send follow-up messages to ChatGPT via getOpenAI().sendFollowUpMessage()

• Uses TailwindCSS for styling
• Responsive design with mobile-first approach
• Dark/light theme support throughout
• Consistent design language across all widgets