npm package: @mohityadav0903/branintelle-mcp
Description: MCP server for Branintelle UI Library - provides component documentation via Model Context Protocol
Author: Branintelle
Latest version: 3.1.2

# Branintelle MCP Server

**Version 2.0.0** - Enhanced Model Context Protocol server for Branintelle UI Library

Provides comprehensive component documentation, design tokens, and usage patterns to LLMs via the Model Context Protocol.

---

## 🚀 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
npm install -g @mohityadav0903/branintelle-mcp
branintelle-mcp
```

---

## 🔌 Setup with Claude Desktop

**Config file:** `~/Library/Application Support/Claude/claude_desktop_config.json`

```json
{
  "mcpServers": {
    "branintelle": {
      "command": "npx",
      "args": ["-y", "@mohityadav0903/branintelle-mcp"]
    }
  }
}
```

**Then restart Claude Desktop** and look for the 🔌 icon!

---

## 🛠️ Available Tools

### 1. `list_components`
Lists all 36 components with optional filtering and detail levels

```javascript
// Basic list
{ "category": "Buttons" }

// Detailed with full metadata
{ "category": "Tables", "detailed": true }
```

### 2. `get_component_docs`
Get comprehensive docs for specific components

```javascript
{
  "components": ["CustomButton", "StatusPill", "ScrollableDataTable"]
}
```

**Returns:**
- Full TypeScript interfaces
- Input/Output properties
- Code examples
- Design tokens used
- Usage patterns

### 3. `get_design_tokens`
Access the complete Figma design system

```javascript
// All tokens with contexts
{ "category": "all", "includeContexts": true }

// Just colors, no contexts
{ "category": "colors", "includeContexts": false }
```

**Returns:**
- 10 violet shades
- 9 text color variations
- Feedback colors (success, error, warning)
- Typography scales
- Usage contexts from Figma

### 4. `search_components`
Search by keyword or use case

```javascript
// Search by keyword
{ "query": "dropdown" }

// Filter by use case
{ "query": "select", "useCase": "forms" }
```

### 5. `get_usage_pattern`
Get recommended patterns and best practices

```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

---

## 💡 Example Queries for LLMs

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

---

## 🎨 Design System

### 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

### 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

---

## 🔗 Related Packages

- **UI Library:** [@mohityadav0903/branintelle-ui-lib](https://www.npmjs.com/package/@mohityadav0903/branintelle-ui-lib)
- **Demo App:** Included with design tokens pre-configured

---

## 📝 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

### Better Developer Experience
- Detailed TypeScript types
- Copy-paste ready examples
- Pattern-based recommendations

---

## 🤝 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

---

## 🌟 Made for AI-First Development

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+