Blend MCP Server Documentation

A comprehensive guide to the Blend MCP (Model Context Protocol) Server - your AI assistant's gateway to the Blend design system.

Overview

What is the Blend MCP Server?

The Blend MCP Server bridges AI assistants and the Blend design system, enabling:

• Component Generation: Create properly typed React components with correct props
• UI Pattern Scaffolding: Build common dashboard and FinTech interface patterns
• Real-time Documentation: Access component prop information and usage examples
• Development Automation: Speed up UI development with AI assistance

Why Use It?

For Developers:

• Generate components instantly instead of manual coding
• Ensure consistent design system usage
• Learn component capabilities through AI exploration

For Teams:

• Standardize component usage across members
• Accelerate onboarding for new developers
• Maintain up-to-date documentation automatically

For AI Assistants:

• Understand Blend component capabilities and constraints
• Generate type-safe React code
• Access comprehensive component metadata

Quick Start

1. Install and Run

# Test immediately with npx
npx blend-mcp-server

2. Configure AI Assistant

Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

{
    "mcpServers": {
        "blend": {
            "command": "npx",
            "args": ["blend-mcp-server"],
            "env": {
                "BLEND_LIBRARY_PACKAGE_NAME": "blend-v1"
            }
        }
    }
}

3. Generate Your First Component

Ask your AI assistant:

"Generate a primary button with the text 'Get Started'"

Expected output:

import { Button } from 'blend-v1'
;<Button text="Get Started" variant="primary" size="medium" />

4. Explore Components

"List all available Blend components"
"What props does the Button component accept?"
"Create a FinTech dashboard with KPI cards"

Installation & Configuration

Installation Methods

NPX (Recommended):

npx blend-mcp-server

Local Development:

git clone https://github.com/juspay/blend-design-system.git
cd blend-design-system/packages/mcp
npm install && node index.js

Environment Variables

# Customize paths and package names
export BLEND_LIBRARY_PATH="/path/to/blend/lib/components"
export BLEND_LIBRARY_PACKAGE_NAME="@your-org/design-system"
export META_PATH="/path/to/meta/files"
export DEBUG=true

Client Configurations

VS Code with Cline/Continue:

{
    "mcpServers": {
        "blend": {
            "command": "npx",
            "args": ["blend-mcp-server"],
            "env": { "BLEND_LIBRARY_PACKAGE_NAME": "blend-v1" }
        }
    }
}

Available Tools

1. list_blend_components

Lists all available Blend components.

Usage: "List all available Blend components"

2. get_blend_component_props

Retrieves detailed prop information for a component.

Usage: "What props does the Button component accept?"

Output:

{
    "componentDescription": "A button component for user interactions",
    "props": [
        {
            "name": "variant",
            "type": "'primary' | 'secondary' | 'danger' | 'success'",
            "required": false,
            "description": "Visual style variant",
            "defaultValue": "primary"
        }
    ]
}

3. generate_blend_component

Generates React code for components with specified props.

Simple Component:

"Create a danger button with text 'Delete'"

Component with Children:

"Generate a modal with title 'Confirmation' and a warning message inside"

Nested Components:

"Create an alert with a dismiss button inside"

4. scaffold_dashboard_section

Generates common UI patterns for dashboards.

Available Patterns:

• fintech_kpi_summary_with_chart: KPI cards with charts
• transaction_list_with_controls: Data tables with filters

Usage:

"Create a financial dashboard with revenue and user metrics"
"Generate a transaction list with search and status filters"

5. generate_component_documentation

Creates markdown documentation for components.

Usage: "Generate documentation for the Button component"

Usage Guide

Component Generation Patterns

Semantic Variants:

<Button variant="primary" />    // Main actions
<Button variant="danger" />     // Destructive actions
<Alert variant="warning" />     // Warning messages

Consistent Sizing:

<Button size="small" />   // Compact interfaces
<Button size="medium" />  // Default size
<Button size="large" />   // Prominent actions

Interactive States:

<Button loading={true} disabled={!isValid} />
<TextInput error="Invalid input" />

Dashboard Scaffolding

FinTech KPI Dashboard:

"Create a financial overview with revenue $1.2M (15% increase),
profit $300K (8% increase), and a line chart showing monthly trends"

Transaction Management:

"Generate a transaction list with ID, amount, status columns,
search filter, and export button"

Best Practices

1. Use Semantic Variants: Choose meaningful variants over custom styling
2. Maintain Consistency: Use consistent sizes and patterns across components
3. Include Accessibility: Add proper labels and ARIA attributes
4. Handle States: Include loading, error, and disabled states

Common Workflows

Building a Dashboard:

1. List available components
2. Generate KPI section with charts
3. Add data table with controls
4. Create modals for actions
5. Generate documentation

Learning the Design System:

1. Explore component props
2. Generate different variants
3. Practice component composition
4. Document learnings

Troubleshooting

Common Issues

Server Won't Start:

# Check Blend installation
npm list blend-v1

# Set explicit path
export BLEND_LIBRARY_PATH="/path/to/blend/lib/components"
npx blend-mcp-server

Component Not Found:

# List available components first
# Use exact component names: "Button" not "button"

Configuration Issues:

// Verify JSON syntax in config files
// Restart AI assistant after config changes

Performance Issues:

# Use local installation for better performance
npm install -g @design-juspay/blend-mcp-server

# Enable caching
export ENABLE_CACHE=true

Debugging

# Enable debug logging
export DEBUG=true
npx blend-mcp-server

# Use MCP Inspector for interactive testing
npm run inspector

FAQ

export BLEND_LIBRARY_PACKAGE_NAME="@your-company/design-system"
export BLEND_LIBRARY_PATH="/path/to/your/components"
export META_PATH="/path/to/your/meta/files"

# For npx usage (automatic latest)
npx @design-juspay/blend-mcp-server@latest

# For global installation
npm update -g @design-juspay/blend-mcp-server

# For local development
cd packages/mcp && git pull && npm install

# Use local installation instead of npx
npm install -g @design-juspay/blend-mcp-server

# Enable caching
export ENABLE_CACHE=true

# Limit memory usage
node --max-old-space-size=4096 index.js

# Check for memory leaks
top -p $(pgrep node)

# Enable detailed logging
export DEBUG=true
npx blend-mcp-server

# Use MCP Inspector for interactive testing
npm run inspector

# Check component metadata
cat apps/docs/meta/componentname.context.ts

# Validate component exists
ls packages/blend/lib/components/ComponentName

Conclusion

The Blend MCP Server accelerates UI development by providing AI assistants with deep understanding of the Blend design system. It enables faster development, better consistency, and improved learning through AI-assisted component generation.

Key Benefits

• Speed: Generate components instantly with proper typing
• Consistency: Ensure design system compliance automatically
• Learning: Discover capabilities through AI exploration
• Quality: Reduce errors with validated prop usage

Next Steps

1. Follow the Quick Start guide
2. Explore different components and patterns
3. Integrate into your development workflow
4. Contribute improvements to the community