Blazor Blueprint MCP Server

An MCP (Model Context Protocol) server that provides AI coding agents with structured access to Blazor Blueprint documentation - 85 styled components, 16 primitives, and 26 blueprints.

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
• Smart Cache Invalidation: Automatically detects upstream doc updates and refreshes the cache
• Version Pinning: Pin to an archived library version for projects not yet on the latest
• Changelog: Query recent changes and breaking changes to plan upgrades
• 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 or package | | get_primitive | Get documentation for a primitive (unstyled) component | | list_primitives | List all available primitive components | | get_setup | Get installation and setup instructions | | get_patterns | Get usage patterns and best practices | | list_icon_libraries | List available icon libraries with names and icon counts | | validate_icon | Check if an icon name exists in a specific library | | get_icon_library | Get icon documentation for a specific library, or the general overview | | list_blueprints | List available blueprints, optionally filtered by category | | get_blueprint | Get full Razor code for a specific blueprint | | get_full_docs | Get the complete documentation in a single call | | get_version | Check MCP server version, configured/latest library version, and cache status | | get_changelog | Get recent changes, with optional date and breaking-only filters |

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

list_icon_libraries

List available icon libraries with their names and icon counts. No parameters required.

{}

validate_icon

Check if an icon name is valid in a specific library. Use list_icon_libraries first to see available libraries.

{
  "library": "lucide",
  "icon": "arrow-down"
}

get_icon_library

Get icon documentation for a specific library (component usage and all icon names). Without a library name, returns the general icon overview.

{
  "library": "heroicons"
}

get_primitive

Get documentation for a primitive component.

{
  "name": "dialog"
}

list_primitives

List all available primitive components. No parameters required.

{}

list_blueprints

List available blueprints — ready-to-use component compositions you can copy into your project. Optionally filter by category.

{
  "category": "login"
}

get_blueprint

Get the full Razor code for a specific blueprint. Use list_blueprints first to browse available names.

{
  "name": "login-01"
}

get_full_docs

Get the complete Blazor Blueprint documentation in a single call. Useful when you need broad context across components, primitives, setup, and patterns.

{}

get_version

Check the MCP server version, which library version the MCP is using, the latest available version, and cache status (when the local cache was last built and when upstream docs were last updated).

{}

get_changelog

Get recent changes with optional filters. Useful for planning upgrades.

{
  "since": "2026-02-10",
  "breaking_only": true
}

Configuration

Configure via environment variables:

| Variable | Description | Default | |----------|-------------|---------| | BLAZORBLUEPRINT_VERSION | Pin to an archived library version (e.g., 2) | Latest | | 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 |

Version Pinning

By default the MCP serves the latest documentation. If your project uses an older version of BlazorBlueprint, set BLAZORBLUEPRINT_VERSION to fetch archived docs instead.

Claude Code:

# macOS/Linux
claude mcp add blazorblueprint --transport stdio -e BLAZORBLUEPRINT_VERSION=2 -- npx -y @blazorblueprint/mcp

# Windows
claude mcp add blazorblueprint --transport stdio -e BLAZORBLUEPRINT_VERSION=2 -- cmd /c npx -y @blazorblueprint/mcp

Claude Desktop / .mcp.json:

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

When set, the MCP fetches documentation from blazorblueprintui.com/llms/archive/v{version}/ instead of the latest.

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