@mohityadav0903/branintelle-mcp 1.0.0 → 2.0.1

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+