@mohityadav0903/branintelle-mcp 1.0.0 → 2.0.0

package/mcp-server.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 /**
- * Branintelle UI Library - MCP Server
- * Provides component documentation and design tokens via Model Context Protocol
+ * Branintelle UI Library - MCP Server v2.0
+ * Enhanced with full component metadata, design tokens, and usage patterns
  */
 
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
@@ -11,95 +11,26 @@ import {
   CallToolRequestSchema,
   ListToolsRequestSchema,
 } from '@modelcontextprotocol/sdk/types.js';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
 
-// Component metadata
-const COMPONENTS = [
-  { name: 'CustomButton', category: 'Buttons', description: 'Primary action button with loading states' },
-  { name: 'ApproveButton', category: 'Buttons', description: 'Approve action button with icon' },
-  { name: 'CancelButton', category: 'Buttons', description: 'Cancel/dismiss button' },
-  { name: 'BackButton', category: 'Buttons', description: 'Navigation back button' },
-  { name: 'ButtonImage', category: 'Buttons', description: 'Button with image icon' },
-  
-  { name: 'StatusPill', category: 'Status', description: 'Status indicator with color and icon' },
-  { name: 'PillBadge', category: 'Status', description: 'Small badge for counts' },
-  { name: 'PillBox', category: 'Status', description: 'Tag-style pill component' },
-  
-  { name: 'ProgressBar', category: 'Progress', description: 'Linear progress indicator' },
-  { name: 'SegmentedProgressBar', category: 'Progress', description: 'Multi-segment progress bar' },
-  
-  { name: 'VerticalStepper', category: 'Navigation', description: 'Vertical step indicator' },
-  { name: 'CustomBreadcrumb', category: 'Navigation', description: 'Breadcrumb navigation' },
-  { name: 'HeaderTabs', category: 'Navigation', description: 'Tab navigation with status counts' },
-  
-  { name: 'TitleHeaderSubtext', category: 'Text', description: 'Title with subtitle component' },
-  { name: 'HelpText', category: 'Text', description: 'Helper text with icon' },
-  
-  { name: 'SearchBar', category: 'Forms', description: 'Search input with icon' },
-  { name: 'Checklist', category: 'Forms', description: 'Checklist with items' },
-  
-  { name: 'HorizontalCard', category: 'Cards', description: 'Horizontal layout card' },
-  { name: 'InfoActionCard', category: 'Cards', description: 'Card with action buttons' },
-  { name: 'ProgressDisplayCard', category: 'Cards', description: 'Card showing progress' },
-  { name: 'ProfileImageList', category: 'Cards', description: 'Avatar stack component' },
-  
-  { name: 'SingleSelectDropdown', category: 'Dropdowns', description: 'Single selection dropdown' },
-  { name: 'MultiSelectDropdown', category: 'Dropdowns', description: 'Multi-selection dropdown' },
-  { name: 'DropdownWithStatus', category: 'Dropdowns', description: 'Dropdown with status indicators' },
-  { name: 'MultilineOptionDropdown', category: 'Dropdowns', description: 'Dropdown with multiline options' },
-  { name: 'ExpandableMenuDropdown', category: 'Dropdowns', description: 'Nested menu dropdown' },
-  
-  { name: 'CustomTooltip', category: 'Overlays', description: 'Tooltip component' },
-  { name: 'ConfirmWarning', category: 'Overlays', description: 'Confirmation dialog' },
-  
-  { name: 'VerticalStages', category: 'Workflows', description: 'Vertical stage indicator' },
-  { name: 'UserSelection', category: 'Workflows', description: 'User selection component' },
-  { name: 'Accordion', category: 'Workflows', description: 'Collapsible accordion' },
-  
-  { name: 'GeoTagFilter', category: 'Filters', description: 'Geographic tag filter' },
-  { name: 'TableActionMenu', category: 'Filters', description: 'Table action menu' },
-  
-  { name: 'ScrollableDataTable', category: 'Tables', description: 'Scrollable data table with sorting' },
-  { name: 'CollapsableTable', category: 'Tables', description: 'Budget table with collapsible rows' },
-  { name: 'CollapsableTableSmall', category: 'Tables', description: 'Compact collapsible table' },
-];
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
-const DESIGN_TOKENS = {
-  colors: {
-    primary: {
-      'violet-500': '#544d7c',
-      'violet-600': '#4c4671',
-      'violet-700': '#3c3758',
-    },
-    text: {
-      'text-500': '#262728',
-      'text-400': '#515253',
-      'text-300': '#6e6e6f',
-      'text-200': '#9b9c9c',
-    },
-    feedback: {
-      'positive-high': '#2c9148',
-      'negative-high': '#ce2d4f',
-      'notification-high': '#ffac4e',
-    },
-  },
-  typography: {
-    fontFamily: 'Lato',
-    sizes: {
-      'heading-large': '24px',
-      'heading-medium': '20px',
-      'heading-small': '18px',
-      'body-large': '16px',
-      'body-medium': '14px',
-      'body-small': '12px',
-    },
-  },
-};
+// 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';
 
 // Create server instance
 const server = new Server(
   {
     name: 'branintelle-ui-lib',
-    version: '1.0.0',
+    version: '2.0.0',
   },
   {
     capabilities: {
@@ -114,7 +45,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
     tools: [
       {
         name: 'list_components',
-        description: 'List all available UI components in the Branintelle library',
+        description: 'List all available UI components with detailed metadata (inputs, outputs, examples)',
         inputSchema: {
           type: 'object',
           properties: {
@@ -122,12 +53,17 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
               type: 'string',
               description: 'Filter by category (Buttons, Tables, Dropdowns, etc.)',
             },
+            detailed: {
+              type: 'boolean',
+              description: 'Include full component details (inputs, outputs, examples)',
+              default: false
+            }
           },
         },
       },
       {
         name: 'get_component_docs',
-        description: 'Get detailed documentation for specific components',
+        description: 'Get comprehensive documentation for specific components including props, types, and code examples',
         inputSchema: {
           type: 'object',
           properties: {
@@ -142,14 +78,51 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
       },
       {
         name: 'get_design_tokens',
-        description: 'Get design system tokens (colors, typography, spacing)',
+        description: 'Get design system tokens with context and usage examples from Figma',
         inputSchema: {
           type: 'object',
           properties: {
             category: {
               type: 'string',
               description: 'Token category (colors, typography, all)',
-              enum: ['colors', 'typography', 'all'],
+              enum: ['colors', 'typography', 'spacing', 'all'],
+            },
+            includeContexts: {
+              type: 'boolean',
+              description: 'Include usage contexts from Figma',
+              default: true
+            }
+          },
+        },
+      },
+      {
+        name: 'search_components',
+        description: 'Search components by keyword, use case, or pattern',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            query: {
+              type: 'string',
+              description: 'Search query (e.g., "button", "dropdown", "table")',
+            },
+            useCase: {
+              type: 'string',
+              description: 'Filter by use case (e.g., "forms", "status", "navigation")',
+            },
+          },
+          required: ['query'],
+        },
+      },
+      {
+        name: 'get_usage_pattern',
+        description: 'Get recommended usage patterns and best practices for common UI scenarios',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            pattern: {
+              type: 'string',
+              description: 'Pattern name (primary-actions, status-indicators, multi-step-forms, data-display, form-inputs)',
+              enum: Object.keys(USAGE_PATTERNS)
             },
           },
         },
@@ -163,49 +136,71 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
   const { name, arguments: args } = request.params;
 
   try {
+    // LIST COMPONENTS
     if (name === 'list_components') {
       const category = args?.category;
-      let filtered = COMPONENTS;
+      const detailed = args?.detailed || false;
+      
+      let componentsList = [];
       
       if (category) {
-        filtered = COMPONENTS.filter(c => 
-          c.category.toLowerCase() === category.toLowerCase()
-        );
+        const categoryComps = COMPONENT_CATEGORIES[category] || [];
+        componentsList = categoryComps.map(name => ({
+          name,
+          ...COMPONENTS_DATA[name]
+        }));
+      } else {
+        // All components grouped by category
+        for (const [cat, comps] of Object.entries(COMPONENT_CATEGORIES)) {
+          componentsList.push({
+            category: cat,
+            components: comps.map(name => ({
+              name,
+              ...(detailed ? COMPONENTS_DATA[name] : {
+                category: COMPONENTS_DATA[name]?.category,
+                description: COMPONENTS_DATA[name]?.description,
+                selector: COMPONENTS_DATA[name]?.selector
+              })
+            }))
+          });
+        }
       }
 
-      const grouped = filtered.reduce((acc, comp) => {
-        if (!acc[comp.category]) acc[comp.category] = [];
-        acc[comp.category].push(comp);
-        return acc;
-      }, {});
-
       return {
         content: [
           {
             type: 'text',
             text: JSON.stringify({
-              total: filtered.length,
-              components: grouped,
-              categories: Object.keys(grouped),
+              total: Object.keys(COMPONENTS_DATA).length,
+              components: componentsList,
+              categories: Object.keys(COMPONENT_CATEGORIES),
             }, null, 2),
           },
         ],
       };
     }
 
+    // GET COMPONENT DOCS
     if (name === 'get_component_docs') {
       const componentNames = args?.components || [];
       const docs = componentNames.map(name => {
-        const comp = COMPONENTS.find(c => c.name === name);
+        const comp = COMPONENTS_DATA[name];
         if (!comp) return { name, error: 'Component not found' };
 
         return {
           name: comp.name,
           category: comp.category,
+          selector: comp.selector,
           description: comp.description,
-          import: `import { ${comp.name} } from '@mohityadav0903/branintelle-ui-lib';`,
-          usage: `<bi-${comp.name.replace(/([A-Z])/g, '-$1').toLowerCase().slice(1)} />`,
+          import: `import { ${comp.name}Component } from '@mohityadav0903/branintelle-ui-lib';`,
+          inputs: comp.inputs,
+          outputs: comp.outputs,
+          interfaces: comp.interfaces,
+          example: comp.example,
+          usagePattern: comp.usagePattern,
+          designTokens: comp.tokens,
           package: '@mohityadav0903/branintelle-ui-lib',
+          version: '1.7.0'
         };
       });
 
@@ -219,12 +214,40 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       };
     }
 
+    // GET DESIGN TOKENS
     if (name === 'get_design_tokens') {
       const category = args?.category || 'all';
-      let tokens = DESIGN_TOKENS;
+      const includeContexts = args?.includeContexts !== false;
+      
+      let tokens = {};
+      
+      if (category === 'all') {
+        tokens = designTokens;
+      } else if (category === 'colors') {
+        tokens = { colors: designTokens.colors };
+      } else if (category === 'typography') {
+        tokens = { typography: designTokens.typography };
+      }
 
-      if (category !== 'all') {
-        tokens = { [category]: DESIGN_TOKENS[category] };
+      // Optionally strip contexts to reduce size
+      if (!includeContexts && tokens.colors) {
+        tokens.colors = {
+          primary: tokens.colors.primary.map(t => ({
+            token: t.token,
+            hex: t.hex,
+            usage: t.usage
+          })),
+          text: tokens.colors.text.map(t => ({
+            token: t.token,
+            hex: t.hex,
+            usage: t.usage
+          })),
+          feedback: tokens.colors.feedback.map(t => ({
+            token: t.token,
+            hex: t.hex,
+            usage: t.usage
+          }))
+        };
       }
 
       return {
@@ -232,9 +255,106 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
           {
             type: 'text',
             text: JSON.stringify({
+              brand: designTokens.brand,
               tokens,
+              cssVariables: 'Available in demo app at src/styles/tokens.css',
               usage: 'Use CSS variables: var(--violet-500), var(--body-medium-size), etc.',
-              location: 'src/styles/tokens.css in demo app',
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    // SEARCH COMPONENTS
+    if (name === 'search_components') {
+      const query = args?.query?.toLowerCase() || '';
+      const useCase = args?.useCase?.toLowerCase();
+      
+      const results = [];
+      
+      for (const [name, comp] of Object.entries(COMPONENTS_DATA)) {
+        const matchesQuery = 
+          comp.name.toLowerCase().includes(query) ||
+          comp.description.toLowerCase().includes(query) ||
+          comp.category.toLowerCase().includes(query);
+        
+        const matchesUseCase = !useCase || 
+          comp.usagePattern?.includes(useCase) ||
+          comp.category.toLowerCase().includes(useCase);
+        
+        if (matchesQuery && matchesUseCase) {
+          results.push({
+            name: comp.name,
+            category: comp.category,
+            description: comp.description,
+            selector: comp.selector,
+            usagePattern: comp.usagePattern
+          });
+        }
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              query,
+              useCase,
+              results,
+              count: results.length
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    // GET USAGE PATTERN
+    if (name === 'get_usage_pattern') {
+      const patternName = args?.pattern;
+      
+      if (!patternName) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                availablePatterns: Object.keys(USAGE_PATTERNS),
+                patterns: USAGE_PATTERNS
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      const pattern = USAGE_PATTERNS[patternName];
+      if (!pattern) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                error: 'Pattern not found',
+                availablePatterns: Object.keys(USAGE_PATTERNS)
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      // Get full component details for pattern
+      const componentDetails = pattern.components.map(name => ({
+        name,
+        ...COMPONENTS_DATA[name]
+      }));
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              pattern: patternName,
+              ...pattern,
+              componentDetails
             }, null, 2),
           },
         ],
@@ -265,11 +385,11 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
 async function main() {
   const transport = new StdioServerTransport();
   await server.connect(transport);
-  console.error('Branintelle UI Library MCP Server running on stdio');
+  console.error('Branintelle UI Library MCP Server v2.0 running on stdio');
+  console.error('Enhanced with full component metadata and design tokens');
 }
 
 main().catch((error) => {
   console.error('Server error:', error);
   process.exit(1);
 });
-

package/package.json

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