Feuse Mcp

What is Feuse Mcp

feuse-mcp is a set of essential utilities designed for web developers to automate API integration and code generation, enhancing productivity and efficiency in frontend development.

Use cases

Use cases for feuse-mcp include automating repetitive API calls, generating boilerplate code for new projects, and simplifying the integration of third-party services into web applications.

How to use

To use feuse-mcp, developers can install the package via npm or yarn, and then utilize the provided tools and commands to streamline their API integration processes and generate necessary code snippets.

Key features

Key features of feuse-mcp include automated API integration, code generation tools, user-friendly command-line interface, and support for various frontend frameworks.

Where to use

feuse-mcp is primarily used in web development, particularly in projects that require frequent API interactions and code generation for frontend applications.

Frontend Useful MCP (Model Context Protocol) Tools - Essential utilities for web developers to automate API integration, Figma design-to-code conversion, and development workflow optimization.

English | 中文

📖 Documentation

feuse-mcp Official Documentation

✨ Features

• 🎨 Figma Integration: Built-in integration with Figma-Context-MCP for seamless Figma design-to-code conversion and automatic asset extraction
• 📝 API Automation: Generate TypeScript interface types, API URL constants, mock data, and request functions from API documentation
• 🖼️ Asset Management: Download SVG and PNG images from Figma files with organized file structure
• 🎯 Similarity Comparison: Compare generated code pages with original Figma prototypes for accuracy validation
• 🛠️ Project Standards: Generate global specification guidance files for Copilot & Cursor based on current project architecture
• 🔧 Color Variables: Extract and convert Figma color variables to CSS/design tokens in specified standards (UnoCSS, TailwindCSS, or custom structures)

🔧 Available Toolset (Continuously Updated)

🚀 Quick Start

Configuration

Add to your MCP client configuration:

Get your Figma API key from Figma Developer Settings.

{
  "feuse-mcp": {
    "command": "npx",
    "args": [
      "feuse-mcp@latest"
    ],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

🔧 For Code Contributors

Setup

# Clone the repository
git clone https://github.com/your-username/feuse-mcp.git
cd feuse-mcp

# Install dependencies
pnpm install

# Build
pnpm build

Add to your MCP client configuration:

Get your Figma API key from Figma Developer Settings.

📁 Project Structure

feuse-mcp/
├── src/
│   ├── main.ts              # Main entry point
│   ├── services/            # Core services
│   │   ├── figma/          # Figma integration
│   │   ├── similarity/     # Visual comparison
│   │   └── utility/        # Utility toolset
│   ├── types/              # TypeScript definitions
│   └── utils/              # Helper functions
├── docs/                   # Documentation
└── dist/                   # Built files

🤝 Contributing

Contributions are welcome! Feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Guidelines

1. Follow the existing code style
2. Update documentation as needed

📝 License

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

If you have more interesting, fun, and cool ideas, please submit them in issues immediately ! ! !

🙏 Acknowledgments

• Figma-Context-MCP for providing Figma design analysis capabilities
• fastmcp for providing MCP rapid development framework
• All contributors and users of this project