FlyonUI MCP is an AI building tool for Tailwind CSS developers. It integrates directly into the IDE in the form of MCP (Model Context Protocol), helping users quickly generate beautiful, production-ready UI components, blocks, and complete pages through prompts. Its core capability is leveraging the component, block, page, theme, and documentation knowledge of FlyonUI PRO to let AI generate Tailwind CSS code within the editor that matches the project's code style and structure.
Main capabilities
- Generate Tailwind CSS components, blocks, and pages within the IDE through prompts.
- Generated content is inspired by FlyonUI PRO components, blocks, and themes, with an emphasis on production usability.
- Supports generating multiple page types, such as SaaS MVP landing pages, portfolio landing pages, e-commerce dashboard landing pages, health tracking apps, AI customer service chatbots, online learning platforms, and more.
- Compatible with React, Next.js, Vue, pure HTML, and all other frameworks that use Tailwind CSS.
- Only writes or modifies files related to the generated components, follows the project's code style and structure, and does not affect other parts of the application.
- Automatically integrates newly added FlyonUI components, blocks, pages, themes, and documentation updates, with no manual action required from users.
How to use
- Integrate FlyonUI MCP into the IDE. Officially supported IDEs include VS Code, Cursor, Windsurf, and VS Code + Cline.
- In an existing Tailwind CSS project, install the FlyonUI Tailwind plugin and set up FlyonUI MCP.
- Generate components, blocks, or pages in the IDE through prompts.
- The official recommendation is to use LLM Cloud Sonnet 3.7 or later for the best results; other LLMs may lead to poor results or degraded performance.
- When setting up the FlyonUI Pro MCP server, there is no need to reinstall the server. Simply enter the License Key provided by Lemon Squeezy into the API_KEY field in the IDE's MCP configuration file. After logging into your FlyonUI account, you can also view the updated configuration in the installation guide.
Applicable scenarios
- Quickly build SaaS landing pages, portfolios, e-Business dashboards and other front-end pages.
- Generate Tailwind CSS UI components and blocks in React, Next.js, Vue, plain HTML, and other projects.
- Teams or individuals who need AI-assisted development based on the FlyonUI PRO component library and themes.
- Development workflows that want to integrate AI-generated UI directly into existing codebases while keeping code style consistent.
Restrictions and Licensing
- Generated content belongs to the user, with no license restrictions, and can be freely used, modified, and integrated into any project.
- No charge is based on the number of component generations or token usage; FlyonUI MCP serves only as a bridge between the editor and FlyonUI PRO components, blocks, pages, and documentation, and the generation process uses the editor's LLM.
- One license can be used for unlimited projects, including public websites and SaaS applications with paid user access.
- FlyonUI must not be used to create website builders or tools that allow others to build websites using FlyonUI parts.
- Derivative products must not be created, such as themes, UI kits, page builders, or other redistributable products that repackage components or templates for others to use.
- A website may be customized for a single client, but the same website or template must not be resold to multiple clients.
- Open-source projects may use FlyonUI Pro if they are actual websites rather than derivative component libraries, theme builders, etc.
- Only a team or enterprise license allows inviting team members.
- Supports multiple payment methods through Lemon Squeezy, including major credit cards, PayPal, Apple Pay, Google Pay, Alipay, WeChat Pay, etc.
- Digital products generally do not offer refunds, but if a technical issue is caused by the code, a refund request may be submitted with proof, and an exception may be made after verification.
- Each purchase includes one year of free premium support, which can be renewed afterward. Support covers usage questions for components, blocks, and templates; customization or development help requires contacting the professional team through the Hire Us page.
- Students and nonprofit organizations may apply for a special discount and must contact us using the corresponding institutional email.
- For account, billing, or licensing questions, contact us through the chat feature in the lower right corner of the website.
Other Information
- Official framework-specific guides are provided explaining how to integrate FlyonUI as a Tailwind CSS plugin with different frameworks and build tools.
- Users can sign up for the newsletter to be the first to receive information about new components, features, blocks, or version releases.
- After purchase, the Designer or Developer+Designer package will receive an email containing the invoice and download link; you can also log in to your account to view, update, and download invoices on the Billing & Upgrade page.
- You can upgrade to a higher license at any time by logging in to your account and selecting the target plan on the Billing & Upgrade page in the user dropdown menu.
- Team invitations require logging in to your account and managing them on the Team Invitations page in the user dropdown menu.
