verso-mcp 0.1.7 → 0.2.0

package/index.js

@@ -15,7 +15,6 @@ const log = (...args) => process.stderr.write(`[verso-mcp] ${args.join(' ')}\n`)
 const args = process.argv.slice(2)
 let API_TOKEN = ''
 let SERVER_URL = 'https://useverso.app' // default production
-
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--token' && args[i + 1]) { API_TOKEN = args[++i]; continue }
   if (args[i].startsWith('--token=')) { API_TOKEN = args[i].split('=')[1]; continue }
@@ -192,6 +191,18 @@ async function handleMessage(message) {
         }
       }
 
+      if (toolName === 'generate_image') {
+        try {
+          const result = await apiRequest('POST', '/api/generate-image', { prompt: toolArgs.prompt, size: toolArgs.size })
+          if (result.url) {
+            return { jsonrpc: '2.0', id, result: { content: [{ type: 'text', text: result.url }] } }
+          }
+          return { jsonrpc: '2.0', id, result: { content: [{ type: 'text', text: `Error: ${result.error || 'No image returned'}` }], isError: true } }
+        } catch (err) {
+          return { jsonrpc: '2.0', id, result: { content: [{ type: 'text', text: `Error generating image: ${err.message}` }], isError: true } }
+        }
+      }
+
       if (toolName === 'open_project') {
         activeProjectId = toolArgs.projectId
         registerProject()
@@ -344,10 +355,10 @@ IMPORTANT: The renderer is an iframe sized to the phone frame (393x852). Use w-f
 </div>
 
 === IMAGES ===
-NEVER use emoji as image placeholders. Use real photos:
+NEVER use emoji as image placeholders. Use real images:
 - Avatars: https://i.pravatar.cc/SIZE?u=UNIQUE_NAME
-- Products/Content: https://picsum.photos/W/H?random=N
-- Specific: https://images.unsplash.com/photo-PHOTO_ID?w=W&h=H&fit=crop
+- Contextual images (hero, illustrations, products, food, backgrounds): use the generate_image tool to create AI images that match the app's theme. Call generate_image BEFORE write_html, then use the returned URL in your <img> tags.
+- Fallback only: https://picsum.photos/W/H?random=N (if generate_image is unavailable)
 All images: object-cover, proper border-radius, aspect ratios.
 
 === QUALITY RULES ===
@@ -530,6 +541,33 @@ Example input:
         required: ['links'],
       },
     },
+    {
+      name: 'generate_image',
+      description: `Generate a custom AI image using Flux Schnell. Returns a URL you can use in <img src="...">.
+Use this instead of picsum.photos/unsplash for contextual images like:
+- App illustrations, hero images, onboarding graphics
+- Food photos, product images, lifestyle shots
+- Backgrounds, patterns, mascots, characters
+- Any image that should match the app's specific theme/context
+
+Do NOT use for: maps, screenshots, icons, UI elements, text-heavy graphics.
+Write detailed prompts: "flat illustration of a cozy coffee shop interior, warm tones, minimal style" not "coffee shop".`,
+      inputSchema: {
+        type: 'object',
+        properties: {
+          prompt: {
+            type: 'string',
+            description: 'Detailed image description. Include style (flat illustration, photo, 3D render), subject, mood, colors.',
+          },
+          size: {
+            type: 'string',
+            enum: ['square', 'landscape', 'portrait'],
+            description: 'Image aspect ratio. square=512x512, landscape=768x512, portrait=512x768. Default: square.',
+          },
+        },
+        required: ['prompt'],
+      },
+    },
     {
       name: 'list_projects',
       description: 'List all your Verso projects. Returns project id, name, screen count, and last updated time.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verso-mcp",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "MCP server for Verso — AI-powered mobile app design tool",
   "bin": {
     "verso-mcp": "./index.js"