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