Magic MCP Local

A local-first MCP server for UI component generation. No API key required.

Features

• 30+ Pre-built Components - Production-ready React components with TypeScript
• Local-First - Works entirely offline, no external API calls
• Zero Configuration - No API keys, no authentication
• MCP Compatible - Works with Cursor, Windsurf, Cline, and other MCP clients

Installation

From npm (recommended)

npm install -g magic-mcp-local

Or use directly with npx

npx -y magic-mcp-local

Configuration

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "magic-mcp-local": {
      "command": "npx",
      "args": ["-y", "magic-mcp-local"]
    }
  }
}

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "magic-mcp-local": {
      "command": "npx",
      "args": ["-y", "magic-mcp-local"]
    }
  }
}

Cline

Add to ~/.cline/mcp_config.json:

{
  "mcpServers": {
    "magic-mcp-local": {
      "command": "npx",
      "args": ["-y", "magic-mcp-local"]
    }
  }
}

Claude Desktop

Add to ~/.claude/mcp_config.json:

{
  "mcpServers": {
    "magic-mcp-local": {
      "command": "npx",
      "args": ["-y", "magic-mcp-local"]
    }
  }
}

Available Tools

| Tool | Description | |------|-------------| | create_ui_component | Create a UI component by describing what you need | | search_components | Search components by keyword or category | | get_component | Get a specific component by ID | | list_categories | List all component categories | | list_components | List all available components |

Usage Examples

Create a Button

create_ui_component with description "primary action button with hover effects"

Search for Form Components

search_components with query "input field"

List Navigation Components

list_components with category "navigation"

Component Categories

• buttons - Button variants (primary, icon, etc.)
• forms - Input, textarea, select, checkbox, radio, switch
• layout - Card, navbar, hero, footer, sidebar
• navigation - Tabs, accordion, breadcrumb, pagination
• data-display - Badge, avatar, table, stat cards
• feedback - Alert, modal, progress, spinner, skeleton, tooltip
• overlays - Modal, dropdown, tooltip

Development

# Install dependencies
npm install

# Build
npm run build

# Run in development mode
npm run dev

License

MIT