Magic Patterns MCP Server

⚠️ Please use the official Magic Patterns MCP here: Magic Patterns MCP ⚠️

This is original inspiration behind the official MCP. We would recommend everyone to use the official MCP which does not require an API key.

A Model Context Protocol (MCP) server that provides tools for creating UI designs and components using the Magic Patterns API. This server enables AI assistants to generate React components, HTML/CSS layouts, and complete web interfaces through natural language prompts.

Features

• Create Design Tool: Generate UI components and layouts from text descriptions

• Multiple Frameworks: Support for React, HTML/Tailwind, ShadCN, Chakra UI, and Mantine

• Quality Modes: Choose between 'fast' for quick iterations or 'best' for high-quality results

• Flexible Input: Accept design descriptions, existing code to modify, or any design request

• Complete Output: Get source files, compiled assets, preview URLs, and editor links

Installation & Usage

With Bun (Recommended)

# Run directly from source
bun run src/main.ts

# Build and run binary
bun run build
./dist/magic-patterns-mcp

With Docker

# Build the image
docker build -t magic-patterns-mcp .

# Run the server
docker run --rm -i magic-patterns-mcp

With NPM (when published)

npx magic-patterns-mcp

Claude Desktop Integration

Add this MCP server to your Claude Desktop configuration:

{
  "mcpServers": {
    "magic-patterns-mcp": {
      "command": "bun",
      "args": ["run", "/path/to/magic-patterns-mcp/src/main.ts"],
      "env": {
        "MAGIC_PATTERNS_API_KEY": "your-api-key-here"
      }
    }
  }
}

Or if using the binary:

{
  "mcpServers": {
    "magic-patterns-mcp": {
      "command": "/path/to/magic-patterns-mcp/dist/magic-patterns-mcp",
      "env": {
        "MAGIC_PATTERNS_API_KEY": "your-api-key-here"
      }
    }
  }
}

Environment Variables

• MAGIC_PATTERNS_API_KEY: Your Magic Patterns API key (required)

Available Tools

create_design

Creates a new design pattern using the Magic Patterns API.

Parameters:

• prompt (required): The design request - can be a description, existing React code to modify, or any design request

• mode (optional):

  • "best" (default): Higher quality results, recommended for most use cases

  • "fast": Quick generation for simple fixes or time-sensitive requests

• presetId (optional): Framework/styling preset (default: "html-tailwind")

  • "html-tailwind": HTML with Tailwind CSS

  • "shadcn-tailwind": ShadCN components with Tailwind

  • "chakraUi-inline": Chakra UI components

  • "mantine-inline": Mantine components

Returns:

• Design ID and URLs (editor, preview)

• Source files (React/HTML/CSS)

• Compiled assets

• Chat conversation history

Development

Prerequisites

• Bun runtime

• Magic Patterns API key

Setup

# Clone the repository
git clone <repository-url>
cd magic-patterns-mcp

# Install dependencies
bun install

# Set your API key
export MAGIC_PATTERNS_API_KEY="your-api-key"

# Run in development mode
bun run dev

Building

# Create binary executable
bun run build

# The binary will be created at ./dist/magic-patterns-mcp

Docker Development

# Build development image
docker build -f Dockerfile.alternative -t magic-patterns-mcp:dev .

# Run with API key
docker run --rm -i -e MAGIC_PATTERNS_API_KEY="your-key" magic-patterns-mcp:dev

Project Structure

magic-patterns-mcp/
├── src/
│   ├── main.ts           # MCP server entry point
│   └── MagicPatterns.ts  # Magic Patterns API integration
├── scripts/
│   └── copy-package-json.ts  # Build helper
├── dist/                 # Compiled binary output
├── Dockerfile           # Production container
├── Dockerfile.alternative  # Development container
└── package.json

Contributing

1. Fork the repository

2. Create your feature branch (git checkout -b feature/amazing-feature)

3. Commit your changes (git commit -m 'Add some amazing feature')

4. Push to the branch (git push origin feature/amazing-feature)

5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Related

• Magic Patterns - UI component generation platform

• Model Context Protocol - Protocol specification

• Claude Desktop - AI assistant with MCP support