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

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