FlyonUI MCP Server

FlyonUI MCP Server is a Model Context Protocol server that lets developers create, inspire, and refactor Tailwind CSS UI blocks and components built on the FlyonUI design system, all from natural-language prompts inside their IDE. It runs as an MCP server that connects to IDEs such as VS Code, Cursor, and Windsurf, and it supports popular front-end frameworks including React, Next.js, Nuxt, Vue, and Svelte. The project is maintained by ThemeSelection and is offered free of charge.

What is FlyonUI MCP Server?

FlyonUI MCP Server is a free Tailwind AI builder that generates production-ready UI blocks, components, and landing page sections using the FlyonUI block library. It takes natural-language commands as input and returns code for the requested UI element, which can be inserted directly into your project. The server integrates into your IDE through the Model Context Protocol, so you never leave your editor. It is part of the FlyonUI ecosystem, which also includes Tailwind blocks, components, templates, and a Figma design system.

Key Features

• Three command modes — /cui creates UI from existing FlyonUI blocks, /iui generates new creative UI blocks, and /rui refines or edits an existing block.
• IDE integration — Connects via MCP to VS Code, Cursor, Windsurf, and other MCP-compatible editors, with a step-by-step installation guide and video.
• Multi-framework support — Outputs code that works with React, Next.js, Nuxt, Vue, Svelte, and more frameworks that rely on Tailwind CSS.
• Natural-language prompts — Commands are written as plain sentences, such as "Create a hero section for an eLearning Academy site" or "Change the Hero section layout from horizontal to vertical".
• Built on FlyonUI — Uses the FlyonUI block library, a Tailwind CSS component system with many pre-designed blocks and components.
• Free to use — The MCP server is offered at no cost, with no mention of paid tiers in the documentation.
• Handy examples — The docs include ready-made examples for each command, covering hero sections, feature sections, theme changes, and button replacements.

Who is it for?

• Front-end developers building Tailwind-based projects who want to speed up UI development by generating blocks directly in their IDE without switching context.
• React/Next.js teams creating landing pages and marketing sites, since the generated blocks integrate with these frameworks.
• Product designers and prototypers who need quick variations of UI sections—such as changing a theme to Shadcn or swapping buttons—to explore design options.

What can you do with it?

• Generate hero sections — Prompt /cui Create a hero section for an eLearning Academy site and receive a customized hero block based on existing FlyonUI components.
• Inspire new UI — Use /iui with prompts like "Create a hero section for my AI SaaS - AI Video Generator" to get fresh, creative block ideas.
• Refine existing blocks — Ask /rui to update the theme, replace a "Get Started" button with Login and Register buttons, or change a hero layout from horizontal to vertical.

How does it work?

Start by following the Installation Guide to select your IDE (VS Code, Cursor, Windsurf, etc.) and set up the MCP server. Once connected, you type one of the three slash commands followed by a natural-language prompt in your editor. The server processes the prompt and returns the UI block code, which you can then insert and further customize in your project.

Pricing

FlyonUI MCP Server is free to use. You can try it today without any cost, and no pricing tiers are listed in the documentation.

FAQ

Is FlyonUI MCP Server free?

Yes, FlyonUI MCP Server is completely free. The documentation states you can start using it for free, and there is no mention of paid plans or usage limits.

Which IDEs are supported?

The installation guide supports VS Code, Cursor, and Windsurf, and mentions other MCP-compatible IDEs. You select your IDE during onboarding to get specific setup instructions.

What frameworks does it work with?

The server supports React, Next.js, Nuxt, Vue, Svelte, and more. Because it generates Tailwind CSS-based blocks, it works wherever Tailwind is used.

What do the commands /cui, /iui, and /rui do?

/cui creates UI from existing FlyonUI blocks, /iui inspires new UI generation, and /rui refines or edits an existing block. Each command takes a natural-language description of what you want.

Where can I get help or contribute?

You can join the FlyonUI community on GitHub Discussions, Discord, or Twitter. The project also accepts pull requests and has contributing guidelines in the GitHub repository.