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)

npx @mohityadav0903/branintelle-mcp

Global Install

npm install -g @mohityadav0903/branintelle-mcp
branintelle-mcp

🔌 Setup with Claude Desktop

Config file: ~/Library/Application Support/Claude/claude_desktop_config.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

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

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

2. get_component_docs

Get comprehensive docs for specific components

{
  "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

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

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

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

5. get_usage_pattern

Get recommended patterns and best practices

{ "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
• 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+