Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Magic MCP Localcreate a responsive navbar with a logo and login button"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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)
Or use directly with npx
Configuration
Cursor
Add to ~/.cursor/mcp.json:
Windsurf
Add to ~/.codeium/windsurf/mcp_config.json:
Cline
Add to ~/.cline/mcp_config.json:
Claude Desktop
Add to ~/.claude/mcp_config.json:
Available Tools
Tool | Description |
| Create a UI component by describing what you need |
| Search components by keyword or category |
| Get a specific component by ID |
| List all component categories |
| List all available components |
Usage Examples
Create a Button
Search for Form Components
List Navigation Components
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
License
MIT