FlyonUI MCP Server

Welcome to FlyonUI MCP Server! This guide will walk you through everything you need to know to install and start using FlyonUI’s MCP Server in your favorite IDE.

FlyonUI MCP Server helps you to build modern, production-ready UI blocks, components, and landing pages in just minutes. It seamlessly integrates with your favorite IDE, helping you develop projects faster than ever before. Compatible with popular frameworks like React, Next.js, Nuxt, Vue, and Svelte, etc.

We’ve made installation super easy!

You can find a complete Installation and setup guide specific to your IDE. Just head over to the Install FlyonUI MCP section from your FlyonUI Pro account and select your preferred IDE (e.g., VS Code, Cursor, Windsurf, etc.) to start installation.

Please login to your FlyonUI Pro account and access the FlyonUI MCP Installation guide here: Installation Guide

Follow the step-by-step instructions to get the MCP Server running in your favorite IDE.

FlyonUI MCP Server comes with mainly three commands:

• /iui – Inspire UI
• /cui – Create UI
• /rui – Refine UI

These commands allow you to generate, customize, and refine UI components based on the FlyonUI Pro Blocks and your project’s context. Let’s explore each command in detail:

Use this command when you want to create a unique and original UI block inspired by existing FlyonUI Pro blocks. The layout and design will be fresh and tailored to your needs.

Use case: You want something new, but inspired by best design patterns of FlyonUI Pro blocks.

Examples:

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

🧠 Tip: Think of this as “creative mode” – generate something fresh from inspiration.

Use this command when you want to reuse the structure and feel of an existing FlyonUI Pro block, but customized for your own content and use-case. You can either let the MCP Server pick the best match for your request, or you can specify the exact block ID.

Use case: You want to replicate the block layout with your own content.

Examples:

• /cui Create a hero section for an eLearning Academy site.

  This will use the best matching block from FlyonUI Pro and customize it as per your request.

• /cui Create a feature section for my landing page like Features 8.

  This will use the block Features 8 from FlyonUI Pro and customize it as per your request.

🧠 Tip: Use this when you want to use FlyonUI Pro block and want it customized to fit your project.

Use this command to update, tweak, or fine-tune any existing block—whether it was generated by the MCP or manually created. This is your go-to for edits like layout changes, update themes, text updates, or adding/removing elements.

Use case: You want to adjust a block to your specific needs.

Examples:

• /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.

🧠 Tip: Use this for refining, updating, or iterating on your design.

Lets Summarize the commands in a table for quick reference:

To get the most out of FlyonUI MCP Server, keep these tips in mind:

1. Use Clear and Specific Prompts

   The more specific and clear your prompts are, the better the output will be. Always be precise with your requests to get the best results.

2. Always Enable Agent Mode in your IDE

   Ensure that Agent Mode is turned on while working with the FlyonUI MCP Server to enhance performance and functionality.

3. Use Claude Sonet 3.7 or Higher Models

   For optimal results, always use Claude Sonet 3.7 or higher LLM models. This ensures more accurate and creative UI generation.

4. Generate One Block at a Time

   Focus on generating one block at a time to maintain clarity and precision in your design. Instead of generating multiple blocks in one request, break them down into individual commands to have better control over each section.

   Example:

   Instead of this:

   /cui Create the Pricing, Testimonials and Call to Action sections for my SaaS landing page.

   use three separate commands:

   /cui Create the Pricing section for my SaaS landing page.

   /cui Create the Testimonials section for my SaaS landing page.

   /cui Create the Call to Action section for my SaaS landing page.

   This will give you the flexibility to customize each block individually and ensure they fit perfectly into your overall design.

5. Start Fresh for Each Component

   For a smoother workflow, always create a new chat window for each new block or component. This helps avoid context confusion.

6. Iterate and Refine

   Don’t hesitate to iterate on your designs. Use the /rui command to refine and update existing blocks as needed.

7. Generate a complete Landing Page

   If you are planning to generate the complete landing page in one attempt, we recommend using the /cui command.

   You can also mention the specific blocks you want to include in your landing page, and the MCP Server will generate it for you.

   Example:

   /cui Create a landing page for my SaaS. Use hero section like Hero 2, Use feature section like Features 8, Use testimonial section like Testimonials 1, Use call to action section like Call to Action 3, Use Pricing section like Pricing 5, Use Teams section like Teams 1.

   /iui command is not recommended for this task as it takes so much time to generate a complete landing page and you may not get the desired results. If you want to use /iui command, we recommend you to use it for each section of the landing page separately as described in the point 4 above.