Blazor Blueprint MCP Server

An MCP (Model Context Protocol) server that provides AI coding agents with structured access to Blazor Blueprint documentation - 73 styled components and 15 primitives.

Features

• Live Documentation: Fetches documentation from blazorblueprintui.com/llms/ with local disk caching
• Fuzzy Search: Find components by name, description, or keywords using Fuse.js
• Offline Support: Cached docs work without internet after first fetch
• Cross-Platform: Cache stored in system-appropriate locations

Installation

npm install @blazorblueprint/mcp

Or run directly:

npx @blazorblueprint/mcp

Claude Code Integration

Quick Install

macOS/Linux:

claude mcp add blazorblueprint --transport stdio -- npx -y @blazorblueprint/mcp

Windows:

claude mcp add blazorblueprint --transport stdio -- cmd /c npx -y @blazorblueprint/mcp

Installation Scopes

Claude Code supports three scopes for MCP server configuration:

| Scope | Flag | Storage Location | Use Case | |-------|------|------------------|----------| | Local | --scope local (default) | ~/.claude.json under project path | Personal config for one project | | Project | --scope project | .mcp.json in project root | Shared with team via git | | User | --scope user | ~/.claude.json | Available in all your projects |

Examples:

# Available in all your projects (recommended for personal use)
claude mcp add blazorblueprint --transport stdio --scope user -- npx -y @blazorblueprint/mcp

# Shared with team via .mcp.json (commit to repo)
claude mcp add blazorblueprint --transport stdio --scope project -- npx -y @blazorblueprint/mcp

Project Configuration (.mcp.json)

When using --scope project, a .mcp.json file is created in your project root. Commit this file to share the MCP server with your team.

macOS/Linux (.mcp.json):

{
  "mcpServers": {
    "blazorblueprint": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@blazorblueprint/mcp"]
    }
  }
}

Windows (.mcp.json):

{
  "mcpServers": {
    "blazorblueprint": {
      "type": "stdio",
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@blazorblueprint/mcp"]
    }
  }
}

Windows Note: Windows requires wrapping npx with cmd /c to execute properly.

Useful Commands

claude mcp list              # List all configured servers
claude mcp get blazorblueprint   # Get details about the server
claude mcp remove blazorblueprint # Remove the server

Within Claude Code, use /mcp to check server status.

Claude Desktop Integration

Add to your claude_desktop_config.json:

Location:

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "blazorblueprint": {
      "command": "npx",
      "args": ["-y", "@blazorblueprint/mcp"]
    }
  }
}

Available Tools

| Tool | Description | |------|-------------| | search_components | Fuzzy search for components by name, description, or keywords | | get_component | Get full documentation for a specific component | | list_components | List all components, optionally filtered by category | | get_setup | Get installation and setup instructions | | get_patterns | Get usage patterns and best practices | | get_icons | Get icon library documentation | | get_primitive | Get documentation for primitive (unstyled) components |

Tool Details

search_components

Search for components by query with optional filters.

{
  "query": "date picker",
  "category": "Inputs",
  "limit": 5
}

get_component

Get full documentation for a component by name.

{
  "name": "DataTable"
}

list_components

List components with optional filtering.

{
  "category": "Data Display"
}

get_setup

Get installation instructions with optional filters.

{
  "hosting_model": "server",
  "include_theming": true
}

get_patterns

Get usage patterns and examples.

{
  "pattern": "forms"
}

get_icons

Get icon documentation.

{
  "query": "arrow",
  "list_categories": false
}

get_primitive

Get documentation for a primitive component.

{
  "name": "dialog"
}

Configuration

Configure via environment variables:

| Variable | Description | Default | |----------|-------------|---------| | BLAZORBLUEPRINT_CACHE_TTL | Cache TTL in hours | 24 | | BLAZORBLUEPRINT_CACHE_DIR | Custom cache directory | Platform default | | BLAZORBLUEPRINT_OFFLINE | Force offline mode (use cache only) | false |

Cache Locations

• Windows: %LOCALAPPDATA%/blazorblueprint-mcp/cache/
• macOS: ~/Library/Caches/blazorblueprint-mcp/
• Linux: ~/.cache/blazorblueprint-mcp/

Development

# Install dependencies
npm install

# Build
npm run build

# Run tests
npm test

# Type check
npm run typecheck

# Development mode (watch)
npm run dev

Testing with MCP Inspector

npx @modelcontextprotocol/inspector dist/index.js

License

MIT