Muses Component Generation MCP Server

An MCP server that generates responsive Muses Components based on Figma designs. It uses Figma MCP to convert designs to code, then structures the code into an acceptable Muses component based on src/instructions.md.

This MCP server uses figma-to-code-remote MCP get_code tool for Figma to code capabilities.

Usage guide

1. On cursor, enter cmd + L to bring up the chat window

2. Click @ and select the project folder to add the project to context

3. Enter create muses component, name it XXX, followed by three Figma links representing mobile tablet and desktop designs.

   

4. After it runs, review the changes made by AI

5. If the results are not satisfactory, run check muses component and it will check and fix itself according to the guidelines.

MCP Integration

1. Install Orba Cursor extension https://web.devfdg.net/docs/learn/ai/ and setup Git token.
2. Open Cursor Settings > MCP & Integrations > MCP Tools
3. Click New MCP Server
4. Add the following configurations:

{
  "mcpServers": {
    ...,
    // If using Figma's Figma to code MCP
    "Figma": {
      "url": "https://mcp.figma.com/mcp",
      "headers": {}
    },
    // Or use internal Figma to code MCP
    "figma-to-code-remote": {
      "url": "https://f2c.qa1fdg.net/mcp"
    },
    "muses-comp-gen-mcp": {
      "command": "npx",
      "args": ["@binance/muses-comp-gen-mcp"]
    }
  }
}

Development

• npm run dev - Start with hot reload
• npm run build - Build for production
• npm start - Alias for dev command
• npm run debug - Debug with inspector

MCP configurations on local

See the Quickstart tutorial for more information.

// Local built file
{
  "muses-comp-gen-mcp": {
    "command": "node",
    "args": ["<path-to>/muses-comp-gen-mcp/build/src/index.js"]
  }
}

// Local development with hot reload
// Turn on/off the tool to reload cursor MCP on code change
{
  "muses-comp-gen-mcp": {
    "command": "npx",
    "args": ["tsx", "<path-to>/muses-comp-gen-mcp/src/index.ts"]
  }
}

Deployment

• Flow
• npm

Documentatiion

-User guide