@mohityadav0903/branintelle-mcp 3.0.0 → 3.1.0

package/MCP-V3-RELEASE-NOTES.md

@@ -1,4 +1,4 @@
-# 🎉 MCP v3.0 - Enhanced with Screen Patterns & Figma Screenshots
+# 🎉 MCP v3.1 - Enhanced with Base64 Image Support for LLM Vision
 
 ## ✅ What Was Completed
 
@@ -24,7 +24,7 @@ Comprehensive screen pattern database including:
 - Key interactions
 - **Screenshot URLs** 🎯
 
-### 3. **Enhanced MCP Server (v3.0.0)**
+### 3. **Enhanced MCP Server (v3.1.0)**
 
 #### 🆕 New Tools Added:
 
@@ -72,6 +72,21 @@ search_by_pattern({
 search_by_pattern({ workflow: "active_management" })
 ```
 
+**🆕 `get_screen_image` - NEW IN v3.1!**
+```typescript
+// Fetch screenshot as base64 data URL for LLM vision
+get_screen_image({ screen_id: "screen_001" })
+
+// Returns:
+{
+  screen_id: "screen_001",
+  screen_name: "Briefs Listing - Drafts Tab",
+  image_data_url: "data:image/png;base64,iVBORw0KGgoAAAANS...",
+  image_url: "https://...",
+  size_kb: 245
+}
+```
+
 ### 4. **All Existing Tools Still Work**
 ✅ `list_components`
 ✅ `get_component_docs`
@@ -85,37 +100,39 @@ search_by_pattern({ workflow: "active_management" })
 
 ### Example 1: "Show me how to build a listing page"
 ```typescript
-// LLM calls:
+// Step 1: Get pattern with screenshot URL
 get_screen_patterns({ screen_type: "listing_page" })
 
-// Gets back:
-{
-  screens: [{
-    name: "Briefs Listing",
-    screenshot_url: "https://...",  // ← LLM can SEE the screen!
-    components_used: ["stats-cards", "tabs", "scrollable-data-table"],
-    features: { has_bulk_selection: true, has_tabs: true }
-  }]
-}
+// Step 2: Fetch the actual image for vision analysis
+get_screen_image({ screen_id: "screen_001" })
+
+// LLM can now SEE the screen layout, colors, spacing, and UI patterns!
 
-// Then LLM can:
+// Step 3: Get component documentation
 get_component_docs({ components: ["StatsCards", "Tabs", "ScrollableDataTable"] })
 
-// And implement the exact pattern!
+// And implement the exact pattern with visual context!
 ```
 
-### Example 2: "Find screens with inline actions"
+### Example 2: "What does the RFP triage screen look like?"
 ```typescript
-search_by_pattern({ features: ["inline_actions"] })
-
-// Returns screen_002 (RFP Triage) with screenshot showing inline "Assign Buyer" buttons
+get_screen_image({ screen_id: "screen_002" })
+
+// Returns base64 image that LLM can analyze visually
+// LLM can identify:
+// - "Assign Buyer" inline action buttons
+// - Time urgency indicators
+// - Stats cards layout
+// - Bulk selection checkboxes
 ```
 
-### Example 3: "Show me wizard forms"
+### Example 3: "Show me wizard form examples"
 ```typescript
 get_screen_patterns({ screen_type: "form_wizard" })
+// Returns screen_004 and screen_005
 
-// Returns screen_004 and screen_005 with step-by-step wizard screenshots
+get_screen_image({ screen_id: "screen_004" })
+// LLM sees the step-by-step wizard with visual stepper
 ```
 
 ---
@@ -149,28 +166,46 @@ cd /Users/mohityadav/Downloads/branintelle-mcp
 npm publish
 ```
 
-Version: **3.0.0**
+Version: **3.1.0**
 
 ---
 
 ## 🎁 **Benefits**
 
-✅ **Visual Context** - LLMs can see actual screens
+✅ **Visual Context** - LLMs can SEE actual screens via base64 images
 ✅ **Pattern-Based** - Find by workflow, not just components
 ✅ **Feature-Driven** - Search by capabilities (bulk ops, filters, etc.)
-✅ **Screenshot URLs** - Direct visual reference
+✅ **Base64 Data URLs** - Direct image analysis for vision-enabled LLMs
 ✅ **Component Mapping** - Know exactly which components to use
 ✅ **Workflow Guidance** - Understand the user flow
+✅ **No External Dependencies** - Images fetched on-demand from S3
+
+---
+
+## 🆕 **What's New in v3.1?**
+
+### `get_screen_image` Tool
+- **Fetches screenshots from S3** and converts to base64
+- **Returns data URLs** in `data:image/png;base64,...` format
+- **LLM vision compatible** - Can be analyzed by Claude, GPT-4V, etc.
+- **245 KB average** - Optimized PNG images
+- **On-demand loading** - Only fetches when requested
+
+### Why Base64?
+- ✅ LLMs can "see" the image directly
+- ✅ No external image hosting required for LLM context
+- ✅ Works with any vision-enabled model
+- ✅ Self-contained responses
 
 ---
 
 ## 📝 **Next Steps**
 
-1. ✅ Publish MCP v3.0.0
-2. ✅ Test with Claude/LLMs
+1. ✅ Publish MCP v3.1.0
+2. ✅ Test with Claude/LLMs with vision
 3. ⏳ Add more screens as they're designed
-4. ⏳ Consider adding component-to-screen mapping
-5. ⏳ Add video/GIF support for interactions
+4. ⏳ Consider image caching for performance
+5. ⏳ Add thumbnail versions for faster previews
 
 ---
 
@@ -179,11 +214,18 @@ Version: **3.0.0**
 Try these in your MCP-enabled LLM:
 
 ```
-"Show me listing page patterns with screenshots"
-"Find screens that have bulk selection"
-"What components are used in the RFP triage screen?"
-"Show me wizard form examples"
+"Show me the briefs listing screen"
+→ get_screen_image({ screen_id: "screen_001" })
+
+"What UI patterns are used in the RFP triage screen?"
+→ get_screen_image({ screen_id: "screen_002" }) + pattern analysis
+
+"Find screens with bulk selection and show me one"
+→ search_by_pattern + get_screen_image
+
+"Show me all wizard form screens"
+→ get_screen_patterns({ screen_type: "form_wizard" }) + get_screen_image for each
 ```
 
-The LLM will now get back visual references + component documentation! 🎯
+The LLM will now get back **visual references as base64 images** + component documentation! 🎯👀
 

package/mcp-server.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 /**
- * Branintelle UI Library - MCP Server v3.0
- * Enhanced with screen patterns, Figma screenshots, and workflow-based search
+ * Branintelle UI Library - MCP Server v3.1
+ * Enhanced with screen patterns, Figma screenshots, and base64 image fetching
  */
 
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
@@ -14,6 +14,7 @@ import {
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
+import https from 'https';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -31,11 +32,33 @@ const screenPatterns = JSON.parse(
   readFileSync(join(__dirname, 'screen-patterns.json'), 'utf-8')
 );
 
+// Helper function to fetch image and convert to base64
+async function fetchImageAsBase64(url) {
+  return new Promise((resolve, reject) => {
+    https.get(url, (response) => {
+      if (response.statusCode !== 200) {
+        reject(new Error(`Failed to fetch image: ${response.statusCode}`));
+        return;
+      }
+
+      const chunks = [];
+      response.on('data', (chunk) => chunks.push(chunk));
+      response.on('end', () => {
+        const buffer = Buffer.concat(chunks);
+        const base64 = buffer.toString('base64');
+        const mimeType = response.headers['content-type'] || 'image/png';
+        resolve(`data:${mimeType};base64,${base64}`);
+      });
+      response.on('error', reject);
+    }).on('error', reject);
+  });
+}
+
 // Create server instance
 const server = new Server(
   {
     name: 'branintelle-ui-lib',
-    version: '3.0.0',
+    version: '3.1.0',
   },
   {
     capabilities: {
@@ -196,6 +219,20 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
           },
         },
       },
+      {
+        name: 'get_screen_image',
+        description: 'Fetch a screen screenshot as base64 data URL so LLMs can see the actual UI. Returns image in data:image/png;base64,... format.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            screen_id: {
+              type: 'string',
+              description: 'Screen ID (screen_001, screen_002, etc.)',
+            },
+          },
+          required: ['screen_id'],
+        },
+      },
     ],
   };
 });
@@ -552,6 +589,74 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       };
     }
 
+    // GET SCREEN IMAGE
+    if (name === 'get_screen_image') {
+      const screen_id = args?.screen_id;
+      
+      if (!screen_id) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                error: 'screen_id is required',
+                available_screens: Object.keys(screenPatterns.screens)
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      const screen = screenPatterns.screens[screen_id];
+      
+      if (!screen) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                error: 'Screen not found',
+                available_screens: Object.keys(screenPatterns.screens)
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      try {
+        const base64Image = await fetchImageAsBase64(screen.screenshot_url);
+        
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                screen_id: screen.id,
+                screen_name: screen.name,
+                image_data_url: base64Image,
+                image_url: screen.screenshot_url,
+                usage: 'Use the image_data_url in <img src="..." /> or display directly',
+                size_kb: Math.round(base64Image.length / 1024)
+              }, null, 2),
+            },
+          ],
+        };
+      } catch (error) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                error: 'Failed to fetch image',
+                message: error.message,
+                screenshot_url: screen.screenshot_url
+              }, null, 2),
+            },
+          ],
+        };
+      }
+    }
+
     return {
       content: [
         {
@@ -576,9 +681,9 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
 async function main() {
   const transport = new StdioServerTransport();
   await server.connect(transport);
-  console.error('Branintelle UI Library MCP Server v3.0 running on stdio');
+  console.error('Branintelle UI Library MCP Server v3.1 running on stdio');
   console.error('✨ Enhanced with screen patterns and Figma screenshots');
-  console.error('📸 6 screens available with visual references');
+  console.error('📸 6 screens with base64 image support for LLM vision');
 }
 
 main().catch((error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohityadav0903/branintelle-mcp",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "description": "MCP server for Branintelle UI Library - provides component documentation via Model Context Protocol",
   "main": "mcp-server.js",

package/test-image-tool.js

@@ -0,0 +1,88 @@
+import { spawn } from 'child_process';
+
+const mcpServer = spawn('node', ['mcp-server.js'], {
+  stdio: ['pipe', 'pipe', 'inherit']
+});
+
+const responses = [];
+let buffer = '';
+
+mcpServer.stdout.on('data', (data) => {
+  buffer += data.toString();
+  const lines = buffer.split('\n');
+  
+  for (let i = 0; i < lines.length - 1; i++) {
+    const line = lines[i].trim();
+    if (line && line.startsWith('{')) {
+      try {
+        const response = JSON.parse(line);
+        responses.push(response);
+      } catch (e) {
+        // Ignore non-JSON lines
+      }
+    }
+  }
+  
+  buffer = lines[lines.length - 1];
+});
+
+// Send initialize request
+const initRequest = {
+  jsonrpc: '2.0',
+  id: 1,
+  method: 'initialize',
+  params: {
+    protocolVersion: '2024-11-05',
+    capabilities: {},
+    clientInfo: {
+      name: 'test-client',
+      version: '1.0.0'
+    }
+  }
+};
+
+mcpServer.stdin.write(JSON.stringify(initRequest) + '\n');
+
+// Wait a bit then request screen image
+setTimeout(() => {
+  const imageRequest = {
+    jsonrpc: '2.0',
+    id: 2,
+    method: 'tools/call',
+    params: {
+      name: 'get_screen_image',
+      arguments: {
+        screen_id: 'screen_001'
+      }
+    }
+  };
+  
+  mcpServer.stdin.write(JSON.stringify(imageRequest) + '\n');
+  
+  // Wait for response then exit
+  setTimeout(() => {
+    console.log('\n🎯 Testing get_screen_image tool...\n');
+    
+    const imageResponse = responses.find(r => r.id === 2);
+    if (imageResponse && imageResponse.result) {
+      const content = JSON.parse(imageResponse.result.content[0].text);
+      console.log('✅ Screen ID:', content.screen_id);
+      console.log('✅ Screen Name:', content.screen_name);
+      console.log('✅ Image Size:', content.size_kb + ' KB');
+      console.log('✅ Image Data URL:', content.image_data_url.substring(0, 100) + '...');
+      console.log('\n🎉 Image tool working! Base64 data URL returned successfully.');
+    } else {
+      console.log('❌ Failed to get image response');
+      console.log(JSON.stringify(responses, null, 2));
+    }
+    
+    mcpServer.kill();
+    process.exit(0);
+  }, 3000);
+}, 1000);
+
+setTimeout(() => {
+  console.log('⏱️  Timeout - killing process');
+  mcpServer.kill();
+  process.exit(1);
+}, 10000);