mcpField
F
Flyonui Mcp

Flyonui Mcp

Local
github.com/themeselectionDeveloper Tools32Updated 50w ago
Repository

About Flyonui Mcp

FlyonUI MCP Server is a Tailwind-based AI builder that creates, inspires and refactors UI blocks, components and landing pages. It is aimed at front-end developers who want to build interfaces inside their IDE and supports frameworks such as React, Next.js and Vue.

Key features

  1. 01Generates UI content based on FlyonUI blocks
  2. 02Three commands: /cui, /iui and /rui
  3. 03Integrates with VS Code, Cursor and Windsurf
  4. 04Supports React, Next.js, Vue and Svelte

Use cases

  1. 01Customizing a hero section from existing FlyonUI blocks
  2. 02Generating a new feature section from a description
  3. 03Changing the theme or layout of an existing block

MCP support

This project is an MCP server that provides UI generation and editing through the /cui, /iui and /rui commands in MCP-enabled IDEs.

#mcp#ai-builder#flyonui#tailwind-ai

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "flyonui": {
      "command": "npx",
      "args": [
        "-y",
        "flyonui-mcp"
      ]
    }
  }
}
Run commandnpx -y flyonui-mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmflyonui-mcp

Tools

6

Saved tool list · updated 3w ago

This tool takes no parameters.

Details

From the project README

FlyonUI MCP Server

Build modern, production-ready UI blocks, components, and landing pages in minutes. Seamlessly integrates with your favorite IDE and supports the most popular frameworks like React, Next.js, Nuxt, Vue, Svelte, and more.

🚀 What is FlyonUI MCP Server?

FlyonUI MCP Server is an Tailwind AI builder that helps you create, inspire, and refactor stunning, production-ready blocks, UI components and full pages using FlyonUI blocks. It easily integrates directly into your favorite IDE for a fast & efficient workflow.

Try FlyonUI MCP Server for free today.

🛠️ Installation

We’ve made installation super easy!

  1. Access the Installation Guide and select your IDE (VS Code, Cursor, Windsurf, etc.).
  2. Follow the step-by-step instructions to set up MCP Server in your IDE.
  3. Start using FlyonUI MCP Server for free.

See the complete installation video FlyonUI MCP Installation.

📒 Documentation

FlyonUI MCP Server is designed to be intuitive and easy to use. The commands are simple and straightforward, allowing you to create, inspire, and refine UI blocks quickly.

For detailed documentation on how to use FlyonUI MCP Server, please refer to the FlyonUI MCP Documentation.

🔧 Usage

FlyonUI MCP Server provides three main commands:

CommandDescriptionUse Case
/cuiCreate UICustomize from existing FlyonUI blocks
/iuiInspire UIGenerate new, creative UI blocks
/ruiRefine UIRefine or edit an existing block

See the complete Documentation for using FlyonUI MCP Server here: FlyonUI MCP Documentation.

Watch video tutorial here: FlyonUI MCP Usage.

Examples

Create UI (/cui):

/cui Create a hero section for an eLearning Academy site.
/cui Create a feature section for my landing page like Features 8.

Inspire UI (/iui):

/iui Create a hero section for my AI SaaS - AI Video Generator.
/iui Create a feature section for my productivity app.

Refine UI (/rui):

/rui Update the theme to Shadcn.
/rui Replace the “Get Started” button with Login and Register buttons.
/rui Change the Hero section layout from horizontal to vertical.

📚 Documentation & Resources

Community 🤝

Join the FlyonUI community to discuss the library, ask questions, and share your experiences:

Contributing 📝

Fix a bug, or add a new feature. You can make a pull request and see your code in the next version of FlyonUI MCP.

Before adding a pull request, please see the contributing guidelines.

💬 Support

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.