@mohityadav0903/branintelle-mcp 1.0.0 → 2.0.0

package/README.md

@@ -1,154 +1,230 @@
-# Branintelle UI Library - MCP Server
+# Branintelle MCP Server
 
-## 🚀 Quick Start
+**Version 2.0.0** - Enhanced Model Context Protocol server for Branintelle UI Library
 
-Your component library now includes an MCP (Model Context Protocol) server that LLMs can query for documentation!
+Provides comprehensive component documentation, design tokens, and usage patterns to LLMs via the Model Context Protocol.
 
-### ✅ What's Working:
+---
+
+## 🚀 Features
+
+- **36 Angular Components** - Full metadata with inputs, outputs, and examples
+- **Complete Design System** - 1300+ design tokens from Figma
+- **Usage Patterns** - Best practices for common UI scenarios
+- **Smart Search** - Find components by keyword or use case
+- **Type Definitions** - Full TypeScript interfaces included
+
+---
+
+## 📦 Installation
+
+### Via npx (Recommended)
+```bash
+npx @mohityadav0903/branintelle-mcp
+```
 
+### Global Install
 ```bash
-# Test it locally
-cd branintelle-ui-lib
-node test-mcp.js
+npm install -g @mohityadav0903/branintelle-mcp
+branintelle-mcp
 ```
 
-## 📦 Available Tools
+---
+
+## 🔌 Setup with Claude Desktop
 
-### 1. **list_components**
-Lists all 36 components, grouped by category
+**Config file:** `~/Library/Application Support/Claude/claude_desktop_config.json`
 
 ```json
 {
-  "name": "list_components",
-  "arguments": {
-    "category": "Buttons"  // optional filter
+  "mcpServers": {
+    "branintelle": {
+      "command": "npx",
+      "args": ["-y", "@mohityadav0903/branintelle-mcp"]
+    }
   }
 }
 ```
 
-**Response:** All components with names, categories, descriptions
+**Then restart Claude Desktop** and look for the 🔌 icon!
+
+---
 
-### 2. **get_component_docs**
-Get docs for specific components
+## 🛠️ Available Tools
 
-```json
-{
-  "name": "get_component_docs",
-  "arguments": {
-    "components": ["CustomButton", "StatusPill"]
-  }
-}
-```
+### 1. `list_components`
+Lists all 36 components with optional filtering and detail levels
 
-**Response:** Import statements, usage examples, descriptions
+```javascript
+// Basic list
+{ "category": "Buttons" }
 
-### 3. **get_design_tokens**
-Get design system tokens
+// Detailed with full metadata
+{ "category": "Tables", "detailed": true }
+```
 
-```json
+### 2. `get_component_docs`
+Get comprehensive docs for specific components
+
+```javascript
 {
-  "name": "get_design_tokens",
-  "arguments": {
-    "category": "colors"  // "colors", "typography", or "all"
-  }
+  "components": ["CustomButton", "StatusPill", "ScrollableDataTable"]
 }
 ```
 
-**Response:** Color palette, typography scales, usage info
+**Returns:**
+- Full TypeScript interfaces
+- Input/Output properties
+- Code examples
+- Design tokens used
+- Usage patterns
 
----
+### 3. `get_design_tokens`
+Access the complete Figma design system
 
-## 🔧 How to Use with Claude Desktop
+```javascript
+// All tokens with contexts
+{ "category": "all", "includeContexts": true }
 
-### Step 1: Publish Package (or use npx)
-```bash
-npm run build:lib
-cd dist/lib
-npm pack
-# Publish to npm
+// Just colors, no contexts
+{ "category": "colors", "includeContexts": false }
 ```
 
-### Step 2: Add to Claude Desktop Config
+**Returns:**
+- 10 violet shades
+- 9 text color variations
+- Feedback colors (success, error, warning)
+- Typography scales
+- Usage contexts from Figma
 
-**File:** `~/Library/Application Support/Claude/claude_desktop_config.json`
+### 4. `search_components`
+Search by keyword or use case
 
-```json
-{
-  "mcpServers": {
-    "branintelle": {
-      "command": "npx",
-      "args": ["-y", "@mohityadav0903/branintelle-ui-lib", "branintelle-mcp"]
-    }
-  }
-}
-```
+```javascript
+// Search by keyword
+{ "query": "dropdown" }
 
-Or if installed globally:
-```json
-{
-  "mcpServers": {
-    "branintelle": {
-      "command": "branintelle-mcp"
-    }
-  }
-}
+// Filter by use case
+{ "query": "select", "useCase": "forms" }
 ```
 
-### Step 3: Restart Claude Desktop
+### 5. `get_usage_pattern`
+Get recommended patterns and best practices
 
-The MCP server will appear in the 🔌 menu!
+```javascript
+{ "pattern": "primary-actions" }
+{ "pattern": "multi-step-forms" }
+{ "pattern": "data-display" }
+```
+
+**Available patterns:**
+- `primary-actions` - Main CTAs and buttons
+- `status-indicators` - Status pills and badges
+- `multi-step-forms` - Guided workflows
+- `data-display` - Tables and lists
+- `form-inputs` - Dropdowns and inputs
 
 ---
 
-## 🧪 Test Results
+## 💡 Example Queries for LLMs
 
-```
-✅ 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
-```
+Once connected to Claude Desktop:
+
+- *"What button components are available in Branintelle?"*
+- *"Show me how to use the ScrollableDataTable with sorting"*
+- *"What are the primary brand colors?"*
+- *"Find all dropdown components"*
+- *"Show me the multi-step-forms pattern"*
+- *"Get design tokens for typography"*
+
+---
+
+## 📊 Component Categories
+
+- **Buttons** (5) - CustomButton, ApproveButton, CancelButton, BackButton, ButtonImage
+- **Status** (3) - StatusPill, PillBadge, PillBox
+- **Progress** (2) - ProgressBar, SegmentedProgressBar
+- **Navigation** (3) - VerticalStepper, CustomBreadcrumb, HeaderTabs
+- **Text** (2) - TitleHeaderSubtext, HelpText
+- **Forms** (2) - SearchBar, Checklist
+- **Cards** (4) - HorizontalCard, InfoActionCard, ProgressDisplayCard, ProfileImageList
+- **Dropdowns** (5) - SingleSelect, MultiSelect, DropdownWithStatus, MultilineOption, ExpandableMenu
+- **Overlays** (2) - CustomTooltip, ConfirmWarning
+- **Workflows** (3) - VerticalStages, UserSelection, Accordion
+- **Filters** (2) - GeoTagFilter, TableActionMenu
+- **Tables** (3) - ScrollableDataTable, CollapsableTable, CollapsableTableSmall
 
 ---
 
-## 💡 Example LLM Queries
+## 🎨 Design System
 
-Once connected, LLMs can ask:
+### Colors
+- **10 Violet Shades** - Primary brand palette (#544d7c - #232034)
+- **9 Text Colors** - From white to max contrast
+- **Feedback Colors** - Success, error, warning, selected
+- **State Colors** - Hover, active, disabled
 
-- "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"
+### Typography
+- **Font Family:** Lato
+- **Scales:** Display, Heading (2XL-Small), Body (Large-XSmall), Caption, Code
+- **Weights:** 400, 500, 600, 700
+
+### All Design Tokens
+- 1300+ tokens with usage contexts
+- Extracted from Figma design files
+- CSS variables available in demo app
 
 ---
 
-## 📁 Files Created
+## 🔗 Related Packages
 
-- `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"`
+- **UI Library:** [@mohityadav0903/branintelle-ui-lib](https://www.npmjs.com/package/@mohityadav0903/branintelle-ui-lib)
+- **Demo App:** Included with design tokens pre-configured
 
 ---
 
-## 🔄 Next Steps
+## 📝 What's New in v2.0
+
+### Enhanced Component Metadata
+- Full TypeScript interfaces for all components
+- Input/Output property documentation
+- Real code examples with data
+- Design tokens mapping
+
+### Complete Design System
+- Full 1300+ Figma tokens included
+- Usage contexts for each token
+- Component-specific recommendations
+
+### New Tools
+- `search_components` - Smart component search
+- `get_usage_pattern` - Best practice patterns
+- Enhanced `get_design_tokens` with contexts
 
-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
+### Better Developer Experience
+- Detailed TypeScript types
+- Copy-paste ready examples
+- Pattern-based recommendations
 
 ---
 
-## 📝 Notes
+## 🤝 Contributing
+
+This MCP server is part of the Branintelle UI ecosystem. For issues or feature requests, please visit our GitHub repository.
+
+---
+
+## 📄 License
+
+MIT License - see LICENSE file for details
+
+---
 
-- 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)
+## 🌟 Made for AI-First Development
 
-**Status:** ✅ MVP Working! Ready to test with Claude Desktop after publishing.
+Built specifically to make Branintelle UI components discoverable and usable by Large Language Models through the Model Context Protocol.
 
+**Package:** `@mohityadav0903/branintelle-mcp`  
+**Version:** 2.0.0  
+**Protocol:** MCP (Model Context Protocol)  
+**Runtime:** Node.js 18+

package/components-data.js

@@ -0,0 +1,246 @@
+/**
+ * Branintelle UI Library - Component Metadata
+ * Auto-generated component documentation with props, examples, and patterns
+ */
+
+export const COMPONENTS_DATA = {
+  // ======================
+  // BUTTONS
+  // ======================
+  CustomButton: {
+    name: 'CustomButton',
+    category: 'Buttons',
+    selector: 'bi-custom-button',
+    description: 'Primary action button with loading states and customizable styling',
+    inputs: {
+      label: { type: 'string', required: true, description: 'Button text label' },
+      isActive: { type: 'boolean', default: true, description: 'Enable/disable button state' },
+      isLoading: { type: 'boolean', default: false, description: 'Show loading spinner' },
+      width: { type: 'string', default: 'auto', description: 'Button width (e.g., "200px", "100%")' },
+      height: { type: 'string', default: 'auto', description: 'Button height' },
+      fontSize: { type: 'string', default: '16px', description: 'Font size for label' },
+      padding: { type: 'string', default: '12px 24px', description: 'Button padding' }
+    },
+    outputs: {
+      onClick: { type: 'EventEmitter<void>', description: 'Emitted when button is clicked' }
+    },
+    example: `<bi-custom-button
+  [label]="'Submit'"
+  [isActive]="true"
+  [isLoading]="isSubmitting"
+  [width]="'200px'"
+  (onClick)="handleSubmit()">
+</bi-custom-button>`,
+    usagePattern: 'primary-actions',
+    tokens: ['--violet-500', '--white', '--body-large-size']
+  },
+
+  StatusPill: {
+    name: 'StatusPill',
+    category: 'Status',
+    selector: 'bi-status-pill',
+    description: 'Status indicator pill with icon and colored background',
+    inputs: {
+      statusText: { type: 'string', required: true, description: 'Status text to display' },
+      statusImage: { type: 'string', required: false, description: 'Path to status icon image' },
+      statusColor: { type: 'string', required: true, description: 'Background color (hex)' },
+      statusTextColor: { type: 'string', required: true, description: 'Text color (hex)' }
+    },
+    outputs: {},
+    example: `<bi-status-pill
+  [statusText]="'Approved'"
+  [statusImage]="'assets/images/icons/check_green.svg'"
+  [statusColor]="'#beddc6'"
+  [statusTextColor]="'#2c9148'">
+</bi-status-pill>`,
+    usagePattern: 'status-indicators',
+    tokens: ['--positive-high', '--positive-low', '--body-medium-size']
+  },
+
+  VerticalStepper: {
+    name: 'VerticalStepper',
+    category: 'Navigation',
+    selector: 'bi-vertical-stepper',
+    description: 'Vertical step indicator for multi-step workflows',
+    inputs: {
+      steps: { type: 'Step[]', required: true, description: 'Array of step objects with label, status, substeps' },
+      activeStep: { type: 'number', default: 0, description: 'Currently active step index' }
+    },
+    outputs: {
+      stepClick: { type: 'EventEmitter<number>', description: 'Emitted when step is clicked' }
+    },
+    interfaces: {
+      Step: `{
+  label: string;
+  status: 'completed' | 'active' | 'pending';
+  substeps?: { label: string; status: string }[];
+}`
+    },
+    example: `<bi-vertical-stepper
+  [steps]="workflowSteps"
+  [activeStep]="currentStep"
+  (stepClick)="onStepChange($event)">
+</bi-vertical-stepper>
+
+// Component
+workflowSteps: Step[] = [
+  { label: 'Brief Details', status: 'completed' },
+  { label: 'Requirements', status: 'active' },
+  { label: 'Review', status: 'pending' }
+];`,
+    usagePattern: 'multi-step-forms',
+    tokens: ['--violet-500', '--positive-high', '--text-300']
+  },
+
+  ScrollableDataTable: {
+    name: 'ScrollableDataTable',
+    category: 'Tables',
+    selector: 'bi-scrollable-data-table',
+    description: 'Feature-rich data table with sorting, filtering, and virtual scrolling',
+    inputs: {
+      columns: { type: 'TableColumn[]', required: true, description: 'Column definitions' },
+      data: { type: 'any[]', required: true, description: 'Table data rows' },
+      enableSort: { type: 'boolean', default: true, description: 'Enable column sorting' },
+      enableFilter: { type: 'boolean', default: true, description: 'Enable filtering' },
+      maxHeight: { type: 'string', default: '500px', description: 'Maximum table height' }
+    },
+    outputs: {
+      rowClick: { type: 'EventEmitter<any>', description: 'Emitted when row is clicked' },
+      sortChange: { type: 'EventEmitter<{column: string, direction: string}>', description: 'Sort change event' }
+    },
+    interfaces: {
+      TableColumn: `{
+  key: string;
+  label: string;
+  sortable?: boolean;
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+}`
+    },
+    example: `<bi-scrollable-data-table
+  [columns]="tableColumns"
+  [data]="tableData"
+  [enableSort]="true"
+  [maxHeight]="'600px'"
+  (rowClick)="handleRowClick($event)">
+</bi-scrollable-data-table>
+
+// Component
+tableColumns: TableColumn[] = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'status', label: 'Status', width: '120px' },
+  { key: 'amount', label: 'Amount', align: 'right' }
+];`,
+    usagePattern: 'data-display',
+    tokens: ['--stroke-1', '--hover', '--text-400', '--body-medium-size']
+  },
+
+  SingleSelectDropdown: {
+    name: 'SingleSelectDropdown',
+    category: 'Dropdowns',
+    selector: 'bi-single-select-dropdown',
+    description: 'Single selection dropdown with search',
+    inputs: {
+      options: { type: 'DropdownItem[]', required: true, description: 'List of dropdown options' },
+      selectedValue: { type: 'string', required: false, description: 'Currently selected value' },
+      placeholder: { type: 'string', default: 'Select...', description: 'Placeholder text' },
+      searchable: { type: 'boolean', default: true, description: 'Enable search functionality' }
+    },
+    outputs: {
+      selectionChange: { type: 'EventEmitter<string>', description: 'Emitted when selection changes' }
+    },
+    interfaces: {
+      DropdownItem: `{
+  label: string;
+  value: string;
+  disabled?: boolean;
+}`
+    },
+    example: `<bi-single-select-dropdown
+  [options]="categoryOptions"
+  [selectedValue]="selectedCategory"
+  [placeholder]="'Select category'"
+  (selectionChange)="onCategoryChange($event)">
+</bi-single-select-dropdown>`,
+    usagePattern: 'form-inputs',
+    tokens: ['--stroke-1', '--violet-500', '--hover']
+  }
+};
+
+// Add all other components...
+export const COMPONENT_CATEGORIES = {
+  'Buttons': ['CustomButton', 'ApproveButton', 'CancelButton', 'BackButton', 'ButtonImage'],
+  'Status': ['StatusPill', 'PillBadge', 'PillBox'],
+  'Progress': ['ProgressBar', 'SegmentedProgressBar'],
+  'Navigation': ['VerticalStepper', 'CustomBreadcrumb', 'HeaderTabs'],
+  'Text': ['TitleHeaderSubtext', 'HelpText'],
+  'Forms': ['SearchBar', 'Checklist'],
+  'Cards': ['HorizontalCard', 'InfoActionCard', 'ProgressDisplayCard', 'ProfileImageList'],
+  'Dropdowns': ['SingleSelectDropdown', 'MultiSelectDropdown', 'DropdownWithStatus', 'MultilineOptionDropdown', 'ExpandableMenuDropdown'],
+  'Overlays': ['CustomTooltip', 'ConfirmWarning'],
+  'Workflows': ['VerticalStages', 'UserSelection', 'Accordion'],
+  'Filters': ['GeoTagFilter', 'TableActionMenu'],
+  'Tables': ['ScrollableDataTable', 'CollapsableTable', 'CollapsableTableSmall']
+};
+
+export const USAGE_PATTERNS = {
+  'primary-actions': {
+    name: 'Primary Actions',
+    description: 'Main call-to-action buttons',
+    components: ['CustomButton', 'ApproveButton'],
+    example: `// Primary action button
+<bi-custom-button
+  [label]="'Submit Form'"
+  [isActive]="formValid"
+  [isLoading]="isSubmitting"
+  (onClick)="submitForm()">
+</bi-custom-button>`
+  },
+  'status-indicators': {
+    name: 'Status Indicators',
+    description: 'Show status with colored pills and badges',
+    components: ['StatusPill', 'PillBadge'],
+    example: `// Status pill with icon
+<bi-status-pill
+  [statusText]="item.status"
+  [statusImage]="getStatusIcon(item.status)"
+  [statusColor]="getStatusColor(item.status)"
+  [statusTextColor]="getStatusTextColor(item.status)">
+</bi-status-pill>`
+  },
+  'multi-step-forms': {
+    name: 'Multi-Step Forms',
+    description: 'Guided workflows with step indicators',
+    components: ['VerticalStepper', 'VerticalStages'],
+    example: `// Vertical stepper for workflow
+<bi-vertical-stepper
+  [steps]="formSteps"
+  [activeStep]="currentStepIndex"
+  (stepClick)="navigateToStep($event)">
+</bi-vertical-stepper>`
+  },
+  'data-display': {
+    name: 'Data Display',
+    description: 'Tables and lists for displaying data',
+    components: ['ScrollableDataTable', 'CollapsableTable'],
+    example: `// Data table with sorting
+<bi-scrollable-data-table
+  [columns]="columns"
+  [data]="rows"
+  [enableSort]="true"
+  (rowClick)="viewDetails($event)">
+</bi-scrollable-data-table>`
+  },
+  'form-inputs': {
+    name: 'Form Inputs',
+    description: 'Input controls for forms',
+    components: ['SingleSelectDropdown', 'MultiSelectDropdown', 'SearchBar'],
+    example: `// Dropdown with search
+<bi-single-select-dropdown
+  [options]="options"
+  [selectedValue]="value"
+  (selectionChange)="onValueChange($event)">
+</bi-single-select-dropdown>`
+  }
+};
+