MCP 服务器

FlyonUI MCP Server

An AI-powered Tailwind builder that helps developers create, inspire, and refactor UI components directly within their IDE, supporting popular frameworks like React, Next.js, Vue, and Svelte.

Tools

get-create-instructions

Get instructions for creating FlyonUI blocks using existing blocks. This tool provides instructions for creating new FlyonUI blocks using existing blocks. Use this tool when the user requests to generate a new component. mentions /create-flyonui or /cui. Strictly follow the steps one by one to ensure successful code generation.Retrieves Instructions for IDE agent to follow for creating/generating/updating FlyonUI blocks.

get-inspire-instructions

Get instructions for working with FlyonUI blocks. This tool provides instructions for creating new FlyonUI blocks by taking the inspiration from existing FlyonUI blocks. Use this tool when the user requests to generate a new component by inspirations. mentions /inspire-flyonui or /iui.

get-refine-instructions

Get instructions for refining FlyonUI blocks. This tool provides instructions for refining existing FlyonUI blocks. Use this tool when the user requests to refine an existing component. mentions /refine-flyonui or /rui.

get-blocks-metadata

Fetch the metadata of a block from a given URL. Use this tool to retrieve the block metadata. This will provide the metadata of all the FlyonUI blocks available for use.

get-block-meta-content

Fetch the content of the block metadata from the FlyonUI MCP server. Use this tool to retrieve the block metadata content.

get-block-content

Fetch the content of a block from a given URL. Use this tool to retrieve the code block content from the authenticated URL.

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!

Access the Installation Guide and select your IDE (VS Code, Cursor, Windsurf, etc.).
Follow the step-by-step instructions to set up MCP Server in your IDE.
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:

Command	Description	Use Case
`/cui`	Create UI	Customize from existing FlyonUI blocks
`/iui`	Inspire UI	Generate new, creative UI blocks
`/rui`	Refine UI	Refine 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.