@mohityadav0903/branintelle-mcp 3.1.0 → 3.1.1

package/MCP-V3-RELEASE-NOTES.md

@@ -1,4 +1,4 @@
-# 🎉 MCP v3.1 - Enhanced with Base64 Image Support for LLM Vision
+# 🎉 MCP v3.0 - Enhanced with Screen Patterns & Figma Screenshots
 
 ## ✅ What Was Completed
 
@@ -24,7 +24,7 @@ Comprehensive screen pattern database including:
 - Key interactions
 - **Screenshot URLs** 🎯
 
-### 3. **Enhanced MCP Server (v3.1.0)**
+### 3. **Enhanced MCP Server (v3.0.0)**
 
 #### 🆕 New Tools Added:
 
@@ -72,21 +72,6 @@ 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`
@@ -100,39 +85,37 @@ get_screen_image({ screen_id: "screen_001" })
 
 ### Example 1: "Show me how to build a listing page"
 ```typescript
-// Step 1: Get pattern with screenshot URL
+// LLM calls:
 get_screen_patterns({ screen_type: "listing_page" })
 
-// 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!
+// 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 3: Get component documentation
+// Then LLM can:
 get_component_docs({ components: ["StatsCards", "Tabs", "ScrollableDataTable"] })
 
-// And implement the exact pattern with visual context!
+// And implement the exact pattern!
 ```
 
-### Example 2: "What does the RFP triage screen look like?"
+### Example 2: "Find screens with inline actions"
 ```typescript
-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
+search_by_pattern({ features: ["inline_actions"] })
+
+// Returns screen_002 (RFP Triage) with screenshot showing inline "Assign Buyer" buttons
 ```
 
-### Example 3: "Show me wizard form examples"
+### Example 3: "Show me wizard forms"
 ```typescript
 get_screen_patterns({ screen_type: "form_wizard" })
-// Returns screen_004 and screen_005
 
-get_screen_image({ screen_id: "screen_004" })
-// LLM sees the step-by-step wizard with visual stepper
+// Returns screen_004 and screen_005 with step-by-step wizard screenshots
 ```
 
 ---
@@ -166,46 +149,28 @@ cd /Users/mohityadav/Downloads/branintelle-mcp
 npm publish
 ```
 
-Version: **3.1.0**
+Version: **3.0.0**
 
 ---
 
 ## 🎁 **Benefits**
 
-✅ **Visual Context** - LLMs can SEE actual screens via base64 images
+✅ **Visual Context** - LLMs can see actual screens
 ✅ **Pattern-Based** - Find by workflow, not just components
 ✅ **Feature-Driven** - Search by capabilities (bulk ops, filters, etc.)
-✅ **Base64 Data URLs** - Direct image analysis for vision-enabled LLMs
+✅ **Screenshot URLs** - Direct visual reference
 ✅ **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.1.0
-2. ✅ Test with Claude/LLMs with vision
+1. ✅ Publish MCP v3.0.0
+2. ✅ Test with Claude/LLMs
 3. ⏳ Add more screens as they're designed
-4. ⏳ Consider image caching for performance
-5. ⏳ Add thumbnail versions for faster previews
+4. ⏳ Consider adding component-to-screen mapping
+5. ⏳ Add video/GIF support for interactions
 
 ---
 
@@ -214,18 +179,11 @@ Version: **3.1.0**
 Try these in your MCP-enabled LLM:
 
 ```
-"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
+"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"
 ```
 
-The LLM will now get back **visual references as base64 images** + component documentation! 🎯👀
+The LLM will now get back visual references + component documentation! 🎯
 

package/mcp-server.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 /**
- * Branintelle UI Library - MCP Server v3.1
- * Enhanced with screen patterns, Figma screenshots, and base64 image fetching
+ * Branintelle UI Library - MCP Server v3.0
+ * Enhanced with screen patterns, Figma screenshots, and workflow-based search
  */
 
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
@@ -19,20 +19,7 @@ import https from 'https';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-// Load design tokens
-const designTokens = JSON.parse(
-  readFileSync(join(__dirname, 'design-tokens.json'), 'utf-8')
-);
-
-// Load component data
-import { COMPONENTS_DATA, COMPONENT_CATEGORIES, USAGE_PATTERNS } from './components-data.js';
-
-// Load screen patterns
-const screenPatterns = JSON.parse(
-  readFileSync(join(__dirname, 'screen-patterns.json'), 'utf-8')
-);
-
-// Helper function to fetch image and convert to base64
+// Helper function to fetch image from URL and convert to base64
 async function fetchImageAsBase64(url) {
   return new Promise((resolve, reject) => {
     https.get(url, (response) => {
@@ -46,19 +33,30 @@ async function fetchImageAsBase64(url) {
       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}`);
+        resolve(base64);
       });
-      response.on('error', reject);
     }).on('error', reject);
   });
 }
 
+// Load design tokens
+const designTokens = JSON.parse(
+  readFileSync(join(__dirname, 'design-tokens.json'), 'utf-8')
+);
+
+// Load component data
+import { COMPONENTS_DATA, COMPONENT_CATEGORIES, USAGE_PATTERNS } from './components-data.js';
+
+// Load screen patterns
+const screenPatterns = JSON.parse(
+  readFileSync(join(__dirname, 'screen-patterns.json'), 'utf-8')
+);
+
 // Create server instance
 const server = new Server(
   {
     name: 'branintelle-ui-lib',
-    version: '3.1.0',
+    version: '3.0.0',
   },
   {
     capabilities: {
@@ -624,7 +622,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       }
 
       try {
-        const base64Image = await fetchImageAsBase64(screen.screenshot_url);
+        // Fetch image from S3 and convert to base64
+        const base64Data = await fetchImageAsBase64(screen.screenshot_url);
         
         return {
           content: [
@@ -633,12 +632,17 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
               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)
+                screen_type: screen.type,
+                module: screen.module,
+                url: screen.screenshot_url,
+                message: 'Image fetched successfully. See image below.'
               }, null, 2),
             },
+            {
+              type: 'image',
+              data: base64Data,
+              mimeType: 'image/png'
+            }
           ],
         };
       } catch (error) {
@@ -648,8 +652,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
               type: 'text',
               text: JSON.stringify({
                 error: 'Failed to fetch image',
-                message: error.message,
-                screenshot_url: screen.screenshot_url
+                details: error.message,
+                url: screen.screenshot_url
               }, null, 2),
             },
           ],
@@ -681,9 +685,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.1 running on stdio');
+  console.error('Branintelle UI Library MCP Server v3.0 running on stdio');
   console.error('✨ Enhanced with screen patterns and Figma screenshots');
-  console.error('📸 6 screens with base64 image support for LLM vision');
+  console.error('📸 6 screens available with visual references');
 }
 
 main().catch((error) => {

package/package.json

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