# 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)

```bash
npm install -g magic-mcp-local
```

### Or use directly with npx

```bash
npx -y magic-mcp-local
```

## Configuration

### Cursor

Add to `~/.cursor/mcp.json`:

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

### Windsurf

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

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

### Cline

Add to `~/.cline/mcp_config.json`:

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

### Claude Desktop

Add to `~/.claude/mcp_config.json`:

```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

```bash
# Install dependencies
npm install

# Build
npm run build

# Run in development mode
npm run dev
```

## License

MIT