${componentName}

\n \n \n`;\n return html;\n}\n\nmcp.resource(\n WIDGET_URI,\n {\n name: \"Message Board Widget\",\n description: \"Interactive message board widget\",\n mimeType: \"text/html+skybridge\",\n },\n async (uri) => {\n const baseUrl = getBaseUrl();\n const html = await loadWidgetHtml(baseUrl);\n\n return {\n contents: [\n {\n uri: uri.href,\n type: \"text\",\n text: html,\n mimeType: \"text/html+skybridge\",\n _meta: {\n ...widgetMeta(),\n \"openai/widgetCSP\": {\n connect_domains: [baseUrl, \"https://esm.sh\", \"https://cdn.jsdelivr.net\"],\n resource_domains: [baseUrl, \"https://esm.sh\", \"https://cdn.jsdelivr.net\"],\n },\n },\n },\n ],\n };\n },\n);\n\n// Individual widget component resources\nmcp.resource(\n ITEM_CARD_URI,\n {\n name: \"Item Card Widget\",\n description: \"Individual item card component\",\n mimeType: \"text/html+skybridge\",\n },\n async (uri) => {\n const baseUrl = getBaseUrl();\n const html = await loadComponentWidgetHtml(baseUrl, \"ItemCard\");\n\n return {\n contents: [\n {\n uri: uri.href,\n type: \"text\",\n text: html,\n mimeType: \"text/html+skybridge\",\n _meta: {\n ...widgetMeta(),\n \"openai/widgetCSP\": {\n connect_domains: [baseUrl, \"https://esm.sh\", \"https://cdn.jsdelivr.net\"],\n resource_domains: [baseUrl, \"https://esm.sh\", \"https://cdn.jsdelivr.net\"],\n },\n },\n },\n ],\n };\n },\n);\n\nmcp.resource(\n MULTI_ITEM_CARD_URI,\n {\n name: \"Multi Item Card Widget\",\n description: \"Multiple items card component\",\n mimeType: \"text/html+skybridge\",\n },\n async (uri) => {\n const baseUrl = getBaseUrl();\n const html = await loadComponentWidgetHtml(baseUrl, \"MultiItemCard\");\n\n return {\n contents: [\n {\n uri: uri.href,\n type: \"text\",\n text: html,\n mimeType: \"text/html+skybridge\",\n _meta: {\n ...widgetMeta(),\n \"openai/widgetCSP\": {\n connect_domains: [baseUrl, \"https://esm.sh\", \"https://cdn.jsdelivr.net\"],\n resource_domains: [baseUrl, \"https://esm.sh\", \"https://cdn.jsdelivr.net\"],\n },\n },\n },\n ],\n };\n },\n);\n\nmcp.resource(\n OUTFIT_CARD_URI,\n {\n name: \"Outfit Card Widget\",\n description: \"Outfit combination card component\",\n mimeType: \"text/html+skybridge\",\n },\n async (uri) => {\n const baseUrl = getBaseUrl();\n const html = await loadComponentWidgetHtml(baseUrl, \"OutfitCard\");\n\n return {\n contents: [\n {\n uri: uri.href,\n type: \"text\",\n text: html,\n mimeType: \"text/html+skybridge\",\n _meta: {\n ...widgetMeta(),\n \"openai/widgetCSP\": {\n connect_domains: [baseUrl, \"https://esm.sh\", \"https://cdn.jsdelivr.net\"],\n resource_domains: [baseUrl, \"https://esm.sh\", \"https://cdn.jsdelivr.net\"],\n },\n },\n },\n ],\n };\n },\n);\n\nmcp.tool(\"list_messages\", {\n description: \"List all messages from the message board\",\n inputSchema: z.object({}),\n outputSchema: MessageListOutputSchema,\n _meta: widgetMeta(\"Loading messages...\", \"Messages loaded\"),\n handler: async (args, ctx) => {\n const subject = ctx.request.params._meta?.[\"openai/subject\"];\n if (!subject) {\n throw new Error(\"Missing openai/subject in request metadata\");\n }\n\n const messages = await getMessages(subject);\n\n return {\n structuredContent: {\n kind: \"message_list\",\n messages,\n },\n content: [\n {\n type: \"text\",\n text: `Found ${messages.length} message${messages.length === 1 ? \"\" : \"s\"}`,\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\nmcp.tool(\"get_message\", {\n description: \"Get a specific message by ID\",\n inputSchema: z.object({\n id: z.number().describe(\"Message ID\"),\n }),\n outputSchema: MessageDetailOutputSchema,\n _meta: widgetMeta(\"Loading message...\", \"Message loaded\"),\n handler: async ({ id }, ctx) => {\n const subject = ctx.request.params._meta?.[\"openai/subject\"];\n if (!subject) {\n throw new Error(\"Missing openai/subject in request metadata\");\n }\n\n const messages = await getMessages(subject);\n const message = messages.find((m) => m.id === id);\n\n if (!message) {\n throw new Error(`Message with ID ${id} not found`);\n }\n\n return {\n structuredContent: {\n kind: \"message_detail\",\n ...message,\n },\n content: [\n {\n type: \"text\",\n text: `Message #${id}: ${message.content}`,\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\nmcp.tool(\"add_message\", {\n description: \"Add a new message to the message board\",\n inputSchema: z.object({\n content: z.string().describe(\"The message content\"),\n }),\n outputSchema: MessageListOutputSchema,\n _meta: widgetMeta(\"Adding message...\", \"Message added\"),\n handler: async ({ content }, ctx) => {\n if (!content || content.trim() === \"\") {\n throw new Error(\"Message content cannot be empty\");\n }\n\n const subject = ctx.request.params._meta?.[\"openai/subject\"];\n if (!subject) {\n throw new Error(\"Missing openai/subject in request metadata\");\n }\n\n await insertMessage(subject, content);\n\n // Return updated message list\n const messages = await getMessages(subject);\n\n return {\n structuredContent: {\n kind: \"message_list\",\n messages,\n },\n content: [\n {\n type: \"text\",\n text: `Added message: \"${content}\"`,\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\n// Counter Widget Tools\nmcp.tool(\"show_counter\", {\n description: \"Show a counter widget with increment/decrement functionality\",\n inputSchema: z.object({\n initialCount: z.number().default(0).describe(\"Initial counter value\"),\n step: z.number().default(1).describe(\"Step size for increment/decrement\"),\n }),\n outputSchema: CounterOutputSchema,\n _meta: widgetMeta(\"Loading counter...\", \"Counter loaded\"),\n handler: async ({ initialCount, step }) => {\n return {\n structuredContent: {\n kind: \"counter\",\n count: initialCount,\n step,\n },\n content: [\n {\n type: \"text\",\n text: `Counter initialized at ${initialCount} with step size ${step}`,\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\nmcp.tool(\"increment_counter\", {\n description: \"Increment the counter by the step amount\",\n inputSchema: z.object({\n currentCount: z.number().describe(\"Current counter value\"),\n step: z.number().default(1).describe(\"Step size\"),\n }),\n outputSchema: CounterOutputSchema,\n _meta: widgetMeta(\"Incrementing...\", \"Counter incremented\"),\n handler: async ({ currentCount, step }) => {\n const newCount = currentCount + step;\n return {\n structuredContent: {\n kind: \"counter\",\n count: newCount,\n step,\n },\n content: [\n {\n type: \"text\",\n text: `Counter incremented from ${currentCount} to ${newCount}`,\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\nmcp.tool(\"decrement_counter\", {\n description: \"Decrement the counter by the step amount\",\n inputSchema: z.object({\n currentCount: z.number().describe(\"Current counter value\"),\n step: z.number().default(1).describe(\"Step size\"),\n }),\n outputSchema: CounterOutputSchema,\n _meta: widgetMeta(\"Decrementing...\", \"Counter decremented\"),\n handler: async ({ currentCount, step }) => {\n const newCount = currentCount - step;\n return {\n structuredContent: {\n kind: \"counter\",\n count: newCount,\n step,\n },\n content: [\n {\n type: \"text\",\n text: `Counter decremented from ${currentCount} to ${newCount}`,\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\nmcp.tool(\"reset_counter\", {\n description: \"Reset the counter to zero\",\n inputSchema: z.object({\n step: z.number().default(1).describe(\"Step size to maintain\"),\n }),\n outputSchema: CounterOutputSchema,\n _meta: widgetMeta(\"Resetting...\", \"Counter reset\"),\n handler: async ({ step }) => {\n return {\n structuredContent: {\n kind: \"counter\",\n count: 0,\n step,\n },\n content: [\n {\n type: \"text\",\n text: \"Counter reset to 0\",\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\n// Todo Widget Tools\nmcp.tool(\"show_todos\", {\n description: \"Show a todo list widget\",\n inputSchema: z.object({}),\n outputSchema: TodoListOutputSchema,\n _meta: widgetMeta(\"Loading todos...\", \"Todos loaded\"),\n handler: async () => {\n // Sample todos for demo\n const todos = [\n {\n id: 1,\n text: \"Learn React components\",\n completed: true,\n createdAt: new Date().toISOString(),\n },\n {\n id: 2,\n text: \"Build widget system\",\n completed: false,\n createdAt: new Date().toISOString(),\n },\n {\n id: 3,\n text: \"Test all functionality\",\n completed: false,\n createdAt: new Date().toISOString(),\n },\n ];\n\n const completedCount = todos.filter(t => t.completed).length;\n\n return {\n structuredContent: {\n kind: \"todo_list\",\n todos,\n totalCount: todos.length,\n completedCount,\n },\n content: [\n {\n type: \"text\",\n text: `Todo list with ${todos.length} items (${completedCount} completed)`,\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\n// Weather Widget Tools\nmcp.tool(\"show_weather\", {\n description: \"Show current weather information\",\n inputSchema: z.object({\n location: z.string().default(\"New York\").describe(\"Location to show weather for\"),\n }),\n outputSchema: WeatherOutputSchema,\n _meta: widgetMeta(\"Loading weather...\", \"Weather loaded\"),\n handler: async ({ location }) => {\n // Sample weather data for demo\n const weatherConditions = [\"sunny\", \"cloudy\", \"rainy\", \"partly cloudy\", \"clear\"];\n const randomCondition = weatherConditions[Math.floor(Math.random() * weatherConditions.length)];\n const temperature = Math.floor(Math.random() * 30) + 5; // 5-35°C\n const humidity = Math.floor(Math.random() * 40) + 40; // 40-80%\n const windSpeed = Math.floor(Math.random() * 20) + 5; // 5-25 km/h\n\n return {\n structuredContent: {\n kind: \"weather\",\n location,\n temperature,\n condition: randomCondition,\n humidity,\n windSpeed,\n },\n content: [\n {\n type: \"text\",\n text: `Weather in ${location}: ${temperature}°C, ${randomCondition}`,\n },\n ],\n _meta: widgetMeta(),\n };\n },\n});\n\n// Wardrobe Widget Tools\nmcp.tool(\"show_item_card\", {\n description: \"Show a single wardrobe item card\",\n inputSchema: z.object({\n category: z.string().default(\"shirt\").describe(\"Item category (shirt, pants, dress, etc.)\"),\n }),\n outputSchema: ItemCardOutputSchema,\n _meta: {\n ...widgetMeta(\"Loading item...\", \"Item loaded\"),\n \"openai/outputTemplate\": ITEM_CARD_URI,\n },\n handler: async ({ category }) => {\n // Sample item data\n const sampleImages = [\n \"https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1571945153237-4929e783af4a?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1503341504253-dff4815485f1?w=400&h=400&fit=crop\",\n ];\n \n const item = {\n id: Math.floor(Math.random() * 1000),\n imageUrl: sampleImages[Math.floor(Math.random() * sampleImages.length)],\n category: category.toLowerCase(),\n };\n\n return {\n structuredContent: {\n kind: \"item_card\",\n item,\n },\n content: [\n {\n type: \"text\",\n text: `Added ${category} to wardrobe`,\n },\n ],\n _meta: {\n ...widgetMeta(),\n \"openai/outputTemplate\": ITEM_CARD_URI,\n },\n };\n },\n});\n\nmcp.tool(\"show_multi_item_card\", {\n description: \"Show multiple wardrobe items in a grid\",\n inputSchema: z.object({\n count: z.number().min(1).max(9).default(6).describe(\"Number of items to show (1-9)\"),\n }),\n outputSchema: MultiItemCardOutputSchema,\n _meta: {\n ...widgetMeta(\"Loading items...\", \"Items loaded\"),\n \"openai/outputTemplate\": MULTI_ITEM_CARD_URI,\n },\n handler: async ({ count }) => {\n const categories = [\"shirt\", \"pants\", \"dress\", \"jacket\", \"shoes\", \"hat\", \"skirt\", \"sweater\", \"jeans\"];\n const sampleImages = [\n \"https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1571945153237-4929e783af4a?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1503341504253-dff4815485f1?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=400&fit=crop\",\n ];\n\n const items = Array.from({ length: count }, (_, i) => ({\n id: i + 1,\n imageUrl: sampleImages[i % sampleImages.length],\n category: categories[i % categories.length],\n }));\n\n return {\n structuredContent: {\n kind: \"multi_item_card\",\n items,\n },\n content: [\n {\n type: \"text\",\n text: `Showing ${count} wardrobe items`,\n },\n ],\n _meta: {\n ...widgetMeta(),\n \"openai/outputTemplate\": MULTI_ITEM_CARD_URI,\n },\n };\n },\n});\n\nmcp.tool(\"show_outfit_card\", {\n description: \"Show a complete outfit with top and bottom pieces\",\n inputSchema: z.object({}),\n outputSchema: OutfitCardOutputSchema,\n _meta: {\n ...widgetMeta(\"Creating outfit...\", \"Outfit ready\"),\n \"openai/outputTemplate\": OUTFIT_CARD_URI,\n },\n handler: async () => {\n const topImages = [\n \"https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1571945153237-4929e783af4a?w=400&h=400&fit=crop\",\n ];\n \n const bottomImages = [\n \"https://images.unsplash.com/photo-1503341504253-dff4815485f1?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=400&h=400&fit=crop\",\n \"https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=400&fit=crop\",\n ];\n\n const top = {\n id: 1,\n imageUrl: topImages[Math.floor(Math.random() * topImages.length)],\n category: \"shirt\",\n };\n\n const bottom = {\n id: 2,\n imageUrl: bottomImages[Math.floor(Math.random() * bottomImages.length)],\n category: \"pants\",\n };\n\n return {\n structuredContent: {\n kind: \"outfit_card\",\n top,\n bottom,\n },\n content: [\n {\n type: \"text\",\n text: \"Here's today's outfit recommendation\",\n },\n ],\n _meta: {\n ...widgetMeta(),\n \"openai/outputTemplate\": OUTFIT_CARD_URI,\n },\n };\n },\n});\n\n// Debug tool for Cloudinary setup\nmcp.tool(\"opencloset.test_cloudinary\", {\n description: \"Test Cloudinary configuration and upload a sample image\",\n inputSchema: z.object({}),\n outputSchema: z.object({\n success: z.boolean(),\n message: z.string(),\n config: z.object({\n cloudName: z.boolean(),\n apiKey: z.boolean(),\n apiSecret: z.boolean(),\n uploadPreset: z.boolean(),\n }),\n }),\n handler: async () => {\n const cloud = Deno.env.get(\"CLOUDINARY_CLOUD_NAME\");\n const apiKey = Deno.env.get(\"CLOUDINARY_API_KEY\");\n const apiSecret = Deno.env.get(\"CLOUDINARY_API_SECRET\");\n const preset = Deno.env.get(\"CLOUDINARY_UPLOAD_PRESET\");\n \n const config = {\n cloudName: !!cloud,\n apiKey: !!apiKey,\n apiSecret: !!apiSecret,\n uploadPreset: !!preset,\n };\n \n let message = \"Cloudinary Configuration:\\n\";\n message += `- Cloud Name: ${cloud ? \"✓ Set\" : \"✗ Missing\"}\\n`;\n message += `- API Key: ${apiKey ? \"✓ Set\" : \"✗ Missing\"}\\n`;\n message += `- API Secret: ${apiSecret ? \"✓ Set\" : \"✗ Missing\"}\\n`;\n message += `- Upload Preset: ${preset ? \"✓ Set\" : \"✗ Missing\"}\\n\\n`;\n \n if (!cloud) {\n message += \"❌ CLOUDINARY_CLOUD_NAME is required. Please set it in your Val Town environment variables.\";\n return {\n content: [{ type: \"text\", text: message }],\n structuredContent: { success: false, message, config },\n };\n }\n \n if (!preset && (!apiKey || !apiSecret)) {\n message += \"❌ Either set CLOUDINARY_UPLOAD_PRESET (easier) or both CLOUDINARY_API_KEY and CLOUDINARY_API_SECRET.\";\n return {\n content: [{ type: \"text\", text: message }],\n structuredContent: { success: false, message, config },\n };\n }\n \n // Test with a sample image\n try {\n const testImageUrl = \"https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&h=400&fit=crop\";\n const uploadedUrl = await uploadToCloudinary(testImageUrl);\n message += `✅ Test upload successful! Image uploaded to: ${uploadedUrl}`;\n \n return {\n content: [{ type: \"text\", text: message }],\n structuredContent: { success: true, message, config },\n };\n } catch (error) {\n message += `❌ Test upload failed: ${error.message}`;\n return {\n content: [{ type: \"text\", text: message }],\n structuredContent: { success: false, message, config },\n };\n }\n },\n});\n\n// OpenCloset Tools\nmcp.tool(\"opencloset.capture_items\", {\n description: \"Add clothing photos to the closet. Use when user uploads pics and says add/organize/scan.\",\n inputSchema: CaptureItemsInput,\n outputSchema: CaptureItemsOutput,\n _meta: {\n \"openai/toolInvocation/invoking\": \"Scanning & uploading…\",\n \"openai/toolInvocation/invoked\": \"Saved to your closet.\",\n \"openai/widgetAccessible\": true,\n \"openai/resultCanProduceWidget\": true,\n },\n handler: async (args) => {\n const added: Item[] = [];\n \n for (const url of args.photoUrls) {\n try {\n const imageUrl = await uploadToCloudinary(url);\n const item: Item = {\n id: crypto.randomUUID(),\n imageUrl,\n category: args.category,\n createdAt: Date.now()\n };\n CLOSET.push(item);\n added.push(item);\n } catch (error) {\n console.error(\"Failed to upload image:\", error);\n throw new Error(`Failed to upload image: ${error.message}`);\n }\n }\n\n const isMultiple = added.length > 1;\n \n return {\n content: [\n {\n type: \"text\",\n text: `Added ${added.length} ${args.category}${added.length === 1 ? \"\" : \"s\"} to your closet.`,\n },\n ],\n structuredContent: isMultiple ? { items: added } : { item: added[0] },\n _meta: {\n \"openai/outputTemplate\": isMultiple ? MULTI_ITEM_CARD_URI : ITEM_CARD_URI,\n \"openai/toolInvocation/invoking\": \"Scanning & uploading…\",\n \"openai/toolInvocation/invoked\": \"Saved to your closet.\",\n \"openai/widgetAccessible\": true,\n \"openai/resultCanProduceWidget\": true,\n },\n };\n },\n});\n\nmcp.tool(\"opencloset.suggest_outfit\", {\n description: \"Suggest a simple outfit (top + bottom) from your saved closet.\",\n inputSchema: z.object({}),\n outputSchema: SuggestOutfitOutput,\n _meta: {\n \"openai/outputTemplate\": OUTFIT_CARD_URI,\n \"openai/toolInvocation/invoking\": \"Picking pieces…\",\n \"openai/toolInvocation/invoked\": \"Outfit ready.\",\n \"openai/widgetAccessible\": true,\n \"openai/resultCanProduceWidget\": true,\n },\n handler: async () => {\n const tops = CLOSET.filter(i => i.category === \"top\");\n const bottoms = CLOSET.filter(i => i.category === \"bottom\");\n \n if (!tops.length || !bottoms.length) {\n return {\n content: [\n {\n type: \"text\",\n text: \"Add at least one top and one bottom to your closet first. Upload some clothing photos and I'll help organize them!\",\n },\n ],\n };\n }\n \n const top = tops[Math.floor(Math.random() * tops.length)];\n const bottom = bottoms[Math.floor(Math.random() * bottoms.length)];\n \n return {\n content: [\n {\n type: \"text\",\n text: \"Here's a combo from your closet:\",\n },\n ],\n structuredContent: { top, bottom },\n _meta: {\n \"openai/outputTemplate\": OUTFIT_CARD_URI,\n \"openai/toolInvocation/invoking\": \"Picking pieces…\",\n \"openai/toolInvocation/invoked\": \"Outfit ready.\",\n \"openai/widgetAccessible\": true,\n \"openai/resultCanProduceWidget\": true,\n },\n };\n },\n});\n\nmcp.tool(\"opencloset.list_items\", {\n description: \"Show all items currently in the closet\",\n inputSchema: z.object({\n category: z.enum([\"top\", \"bottom\"]).optional().describe(\"Filter by category\"),\n }),\n outputSchema: z.object({\n items: z.array(Item),\n }),\n _meta: {\n \"openai/outputTemplate\": MULTI_ITEM_CARD_URI,\n \"openai/toolInvocation/invoking\": \"Loading closet…\",\n \"openai/toolInvocation/invoked\": \"Closet loaded.\",\n \"openai/widgetAccessible\": true,\n \"openai/resultCanProduceWidget\": true,\n },\n handler: async ({ category }) => {\n const items = category ? CLOSET.filter(i => i.category === category) : CLOSET;\n \n if (items.length === 0) {\n return {\n content: [\n {\n type: \"text\",\n text: category \n ? `No ${category}s in your closet yet. Upload some photos to get started!`\n : \"Your closet is empty. Upload some clothing photos to get started!\",\n },\n ],\n structuredContent: { items: [] },\n };\n }\n \n return {\n content: [\n {\n type: \"text\",\n text: `Found ${items.length} item${items.length === 1 ? \"\" : \"s\"} in your closet${category ? ` (${category}s)` : \"\"}.`,\n },\n ],\n structuredContent: { items },\n _meta: {\n \"openai/outputTemplate\": MULTI_ITEM_CARD_URI,\n \"openai/toolInvocation/invoking\": \"Loading closet…\",\n \"openai/toolInvocation/invoked\": \"Closet loaded.\",\n \"openai/widgetAccessible\": true,\n \"openai/resultCanProduceWidget\": true,\n },\n };\n },\n});\n\nconst transport = new StreamableHttpTransport();\nexport const mcpHandler = transport.bind(mcp);\n","deleted","label",[172,173,153],"backend","mcp","permalink","https://www.val.town/x/damixnr/OpenCloset/code/backend/mcp/server.ts","extension","actionData","errors"]