@mohityadav0903/branintelle-mcp 1.0.0

package/README.md

@@ -0,0 +1,154 @@
+# Branintelle UI Library - MCP Server
+
+## 🚀 Quick Start
+
+Your component library now includes an MCP (Model Context Protocol) server that LLMs can query for documentation!
+
+### ✅ What's Working:
+
+```bash
+# Test it locally
+cd branintelle-ui-lib
+node test-mcp.js
+```
+
+## 📦 Available Tools
+
+### 1. **list_components**
+Lists all 36 components, grouped by category
+
+```json
+{
+  "name": "list_components",
+  "arguments": {
+    "category": "Buttons"  // optional filter
+  }
+}
+```
+
+**Response:** All components with names, categories, descriptions
+
+### 2. **get_component_docs**
+Get docs for specific components
+
+```json
+{
+  "name": "get_component_docs",
+  "arguments": {
+    "components": ["CustomButton", "StatusPill"]
+  }
+}
+```
+
+**Response:** Import statements, usage examples, descriptions
+
+### 3. **get_design_tokens**
+Get design system tokens
+
+```json
+{
+  "name": "get_design_tokens",
+  "arguments": {
+    "category": "colors"  // "colors", "typography", or "all"
+  }
+}
+```
+
+**Response:** Color palette, typography scales, usage info
+
+---
+
+## 🔧 How to Use with Claude Desktop
+
+### Step 1: Publish Package (or use npx)
+```bash
+npm run build:lib
+cd dist/lib
+npm pack
+# Publish to npm
+```
+
+### Step 2: Add to Claude Desktop Config
+
+**File:** `~/Library/Application Support/Claude/claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "branintelle": {
+      "command": "npx",
+      "args": ["-y", "@mohityadav0903/branintelle-ui-lib", "branintelle-mcp"]
+    }
+  }
+}
+```
+
+Or if installed globally:
+```json
+{
+  "mcpServers": {
+    "branintelle": {
+      "command": "branintelle-mcp"
+    }
+  }
+}
+```
+
+### Step 3: Restart Claude Desktop
+
+The MCP server will appear in the 🔌 menu!
+
+---
+
+## 🧪 Test Results
+
+```
+✅ Initialize - Server responds with capabilities
+✅ List Tools - 3 tools available
+✅ List Components - 36 components, 12 categories
+✅ Get Component Docs - Import + usage examples
+✅ Get Design Tokens - Full color & typography tokens
+```
+
+---
+
+## 💡 Example LLM Queries
+
+Once connected, LLMs can ask:
+
+- "What button components are available in Branintelle?"
+- "Show me how to use the ScrollableDataTable"
+- "What are the primary brand colors?"
+- "List all table components"
+- "Get design tokens for typography"
+
+---
+
+## 📁 Files Created
+
+- `mcp-server.js` - Main MCP server implementation
+- `bin/branintelle-mcp` - Executable entry point
+- `test-mcp.js` - Test script
+- `package.json` - Updated with `bin` and `type: "module"`
+
+---
+
+## 🔄 Next Steps
+
+1. ✅ **Test locally** - Run `node test-mcp.js`
+2. ⬜ **Add more component details** - Props, examples, patterns
+3. ⬜ **Publish to npm** - Make it available via `npx`
+4. ⬜ **Test in Claude Desktop** - Add to config and verify
+5. ⬜ **Add resources** - Component examples, migration guides
+
+---
+
+## 📝 Notes
+
+- Server runs on **stdio** (standard input/output)
+- Responses are **JSON-RPC 2.0** format
+- Component data is currently **static** (can be auto-generated later)
+- Design tokens are **simplified** (subset of full tokens.css)
+
+**Status:** ✅ MVP Working! Ready to test with Claude Desktop after publishing.
+

package/mcp-server.js

@@ -0,0 +1,275 @@
+#!/usr/bin/env node
+
+/**
+ * Branintelle UI Library - MCP Server
+ * Provides component documentation and design tokens via Model Context Protocol
+ */
+
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from '@modelcontextprotocol/sdk/types.js';
+
+// 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 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',
+    },
+  },
+};
+
+// Create server instance
+const server = new Server(
+  {
+    name: 'branintelle-ui-lib',
+    version: '1.0.0',
+  },
+  {
+    capabilities: {
+      tools: {},
+    },
+  }
+);
+
+// List available tools
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+  return {
+    tools: [
+      {
+        name: 'list_components',
+        description: 'List all available UI components in the Branintelle library',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            category: {
+              type: 'string',
+              description: 'Filter by category (Buttons, Tables, Dropdowns, etc.)',
+            },
+          },
+        },
+      },
+      {
+        name: 'get_component_docs',
+        description: 'Get detailed documentation for specific components',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            components: {
+              type: 'array',
+              items: { type: 'string' },
+              description: 'List of component names to fetch docs for',
+            },
+          },
+          required: ['components'],
+        },
+      },
+      {
+        name: 'get_design_tokens',
+        description: 'Get design system tokens (colors, typography, spacing)',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            category: {
+              type: 'string',
+              description: 'Token category (colors, typography, all)',
+              enum: ['colors', 'typography', 'all'],
+            },
+          },
+        },
+      },
+    ],
+  };
+});
+
+// Handle tool execution
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+
+  try {
+    if (name === 'list_components') {
+      const category = args?.category;
+      let filtered = COMPONENTS;
+      
+      if (category) {
+        filtered = COMPONENTS.filter(c => 
+          c.category.toLowerCase() === category.toLowerCase()
+        );
+      }
+
+      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),
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    if (name === 'get_component_docs') {
+      const componentNames = args?.components || [];
+      const docs = componentNames.map(name => {
+        const comp = COMPONENTS.find(c => c.name === name);
+        if (!comp) return { name, error: 'Component not found' };
+
+        return {
+          name: comp.name,
+          category: comp.category,
+          description: comp.description,
+          import: `import { ${comp.name} } from '@mohityadav0903/branintelle-ui-lib';`,
+          usage: `<bi-${comp.name.replace(/([A-Z])/g, '-$1').toLowerCase().slice(1)} />`,
+          package: '@mohityadav0903/branintelle-ui-lib',
+        };
+      });
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({ components: docs }, null, 2),
+          },
+        ],
+      };
+    }
+
+    if (name === 'get_design_tokens') {
+      const category = args?.category || 'all';
+      let tokens = DESIGN_TOKENS;
+
+      if (category !== 'all') {
+        tokens = { [category]: DESIGN_TOKENS[category] };
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              tokens,
+              usage: 'Use CSS variables: var(--violet-500), var(--body-medium-size), etc.',
+              location: 'src/styles/tokens.css in demo app',
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({ error: 'Unknown tool' }),
+        },
+      ],
+    };
+  } catch (error) {
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({ error: error.message }),
+        },
+      ],
+    };
+  }
+});
+
+// Start server
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error('Branintelle UI Library MCP Server running on stdio');
+}
+
+main().catch((error) => {
+  console.error('Server error:', error);
+  process.exit(1);
+});
+

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@mohityadav0903/branintelle-mcp",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "MCP server for Branintelle UI Library - provides component documentation via Model Context Protocol",
+  "main": "mcp-server.js",
+  "bin": {
+    "branintelle-mcp": "./mcp-server.js"
+  },
+  "scripts": {
+    "test": "node test-mcp.js"
+  },
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "branintelle",
+    "angular",
+    "components",
+    "documentation",
+    "ai",
+    "llm"
+  ],
+  "author": "Branintelle",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/branintelle/branintelle-mcp.git"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.4"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/test-mcp.js

@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+
+/**
+ * MCP Server Test Script
+ * Tests the Branintelle UI Library MCP server
+ */
+
+import { spawn } from 'child_process';
+
+// Start MCP server
+const server = spawn('node', ['mcp-server.js'], {
+  cwd: process.cwd(),
+  stdio: ['pipe', 'pipe', 'inherit'],
+});
+
+let messageId = 1;
+
+// Helper to send JSON-RPC request
+function sendRequest(method, params = {}) {
+  const request = {
+    jsonrpc: '2.0',
+    id: messageId++,
+    method,
+    params,
+  };
+  
+  const message = JSON.stringify(request) + '\n';
+  server.stdin.write(message);
+  console.log('📤 Sent:', method, params);
+}
+
+// Collect responses
+let buffer = '';
+server.stdout.on('data', (data) => {
+  buffer += data.toString();
+  const lines = buffer.split('\n');
+  buffer = lines.pop() || '';
+  
+  lines.forEach(line => {
+    if (line.trim()) {
+      try {
+        const response = JSON.parse(line);
+        console.log('\n📥 Response:', JSON.stringify(response, null, 2));
+      } catch (e) {
+        // Ignore non-JSON lines
+      }
+    }
+  });
+});
+
+server.on('close', (code) => {
+  console.log(`\n✅ Server exited with code ${code}`);
+  process.exit(code);
+});
+
+// Run tests
+console.log('🧪 Testing Branintelle MCP Server\n');
+
+setTimeout(() => {
+  console.log('\n📋 Test 1: Initialize');
+  sendRequest('initialize', {
+    protocolVersion: '2024-11-05',
+    capabilities: {},
+    clientInfo: {
+      name: 'test-client',
+      version: '1.0.0',
+    },
+  });
+}, 100);
+
+setTimeout(() => {
+  console.log('\n📋 Test 2: List Tools');
+  sendRequest('tools/list');
+}, 500);
+
+setTimeout(() => {
+  console.log('\n📋 Test 3: List Components');
+  sendRequest('tools/call', {
+    name: 'list_components',
+    arguments: {},
+  });
+}, 1000);
+
+setTimeout(() => {
+  console.log('\n📋 Test 4: Get Component Docs');
+  sendRequest('tools/call', {
+    name: 'get_component_docs',
+    arguments: {
+      components: ['CustomButton', 'StatusPill', 'ScrollableDataTable'],
+    },
+  });
+}, 1500);
+
+setTimeout(() => {
+  console.log('\n📋 Test 5: Get Design Tokens');
+  sendRequest('tools/call', {
+    name: 'get_design_tokens',
+    arguments: {
+      category: 'all',
+    },
+  });
+}, 2000);
+
+setTimeout(() => {
+  console.log('\n✨ Tests complete! Closing server...');
+  server.stdin.end();
+}, 2500);
+