GitHub Stars
138
User Rating
Not Rated
Favorites
0
Views
7
Forks
19
Issues
5
Installation
Difficulty
IntermediateEstimated Time
10-20 minutes
Requirements
Node.js 18.0.0以上npm 8.0.0以上Installation
Installation
Prerequisites
Please specify required software and versions:Node.js: 18.0.0 or higher
npm: 8.0.0 or higher
Installation Steps
1. Install MCP
bash
npx @magicuidesign/cli@latest install
2. Manual Installation
Add to your IDE's MCP config:json
{
"mcpServers": {
"@magicuidesign/mcp": {
"command": "npx",
"args": ["-y", "@magicuidesign/mcp@latest"]
}
}
}
Troubleshooting
Common Issues
Issue: Server won't start Solution: Check Node.js version and reinstall dependencies.Configuration
Configuration
Basic Configuration
Claude Desktop Setup
Edit~/.config/claude-desktop/claude_desktop_config.json (macOS/Linux) or
%APPDATA%\Claude\claude_desktop_config.json (Windows):
json
{
"mcpServers": {
"@magicuidesign/mcp": {
"command": "npx",
"args": ["-y", "@magicuidesign/mcp@latest"]
}
}
}
Environment Variables
Set the following environment variables as needed:bash
export API_KEY="your-api-key"
export DEBUG="true"
Security Settings
Store API keys in environment variables or secure configuration files
Set appropriate file access permissions
Adjust logging levels
Examples
Examples
Basic Usage
Here are basic usage examples for the MCP server:Programmatic Usage
javascript
// JavaScript example (Node.js)
const { MCPClient } = require('@modelcontextprotocol/client');
const client = new MCPClient();
await client.connect();
// Execute tool
const result = await client.callTool('toolName', {
parameter1: 'value1',
parameter2: 'value2'
});
console.log(result);
Advanced Examples
API Integration
python
Python example
import requests
import json
def call_mcp_tool(tool_name, params):
response = requests.post(
'http://localhost:3000/mcp/call',
json={
'tool': tool_name,
'parameters': params
}
)
return response.json()
Usage example
result = call_mcp_tool('analyze', {
'input': 'sample data',
'options': {'format': 'json'}
})
Use Cases
Users can issue commands like 'Make a marquee of logos' to easily add animations.
By instructing 'Add a blur fade text animation', visually appealing effects can be achieved.
Commands like 'Add a grid background' allow for easy layout modifications.
Retrieve implementation details for specific components to assist in customization.