FlyonUI Component Generator – README | MCP Marketplace

✨ From vibe coding to vibe deployment. UBOS MCP turns ideas into infra with one message.

Learn more

FlyonUI MCP Server

A Model Context Protocol (MCP) server that helps generate UI components based on user prompts. This server leverages the FlyonUI documentation to provide relevant information for creating HTML code with Tailwind CSS classes and FlyonUI components.

Features

  • create-ui Tool: Provides documentation for UI component generation based on user prompts
  • Documentation Search: Automatically searches through FlyonUI documentation to find relevant component information
  • Vector Database: Uses Qdrant and HuggingFace embeddings to store and retrieve documentation efficiently

Prerequisites

  • Python 3.13+
  • Docker (for running Qdrant vector database)

Setup

  1. Clone the repository

  2. Install dependencies

    uv add "mcp[cli]" sentence-transformers qdrant-client python-dotenv
    
  3. Start the Qdrant vector database

    # First time setup
    docker run -d --name qdrant -p 6333:6333 qdrant/qdrant
    
    # For subsequent runs (if container is stopped)
    docker start qdrant
    

    You can check if Qdrant is running with:

    docker ps | grep qdrant
    

    Note: The vector database is stored inside the Docker container. As long as you don’t delete the container, your data will persist between restarts. If you need to completely reset the database, you can remove the container with docker rm qdrant and then run the setup command again.

Running the Server

Start the MCP server with:

source .venv/bin/activate && python main.py

The server uses stdio for communication with MCP clients.

Usage Example

Once the server is running, you can interact with it using an MCP client (like Cursor or Windsurf AI editor). Here’s an example of how to use the create-ui tool:

User: create me a Team page which has carousel, and with user data

MCP: [The MCP server will provide relevant documentation for a Team page with a carousel displaying user data]

How It Works

  1. The server loads and indexes all FlyonUI documentation from the docs directory
  2. When a user requests a UI component, the server:
    • Searches for relevant documentation
    • Returns the documentation to the client
    • The client (e.g., Cursor, Windsurf) uses its own LLM access to generate the UI component

About FlyonUI

FlyonUI is based on Tailwind CSS. The output generated by this MCP server will be:

  • HTML markup
  • Tailwind CSS classes
  • FlyonUI component classes and attributes

Users typically already have FlyonUI installed in their projects. If they don’t, the MCP server can provide installation instructions from the quick-start documentation.

Documentation

The docs directory contains documentation for various FlyonUI components in text format. These documents are used by the server to provide relevant information for implementing different UI components correctly.

Adding to Windsurf Editor

To add this MCP server to Windsurf locally:

  1. Start the MCP server as described above

  2. Open Windsurf Editor

  3. Access MCP settings:

    • Click on the settings icon in the bottom left corner
    • Select “Settings” from the menu
    • Navigate to “AI & MCP” or “Extensions” section
  4. Add a new MCP server:

    • Click “Add Server” or “Add MCP Server”
    • Enter a name for the server (e.g., “FlyonUI Component Generator”)
    • For the connection type, select “Local Process”
    • For the command, enter the full path to your Python executable and the main.py file
      /full/path/to/your/.venv/bin/python /full/path/to/your/my-mcp/main.py
      
    • Alternatively, if Windsurf supports stdio transport directly:
      • Select “stdio” as the transport type
      • Point to the running server process
  5. Save the configuration

  6. Test the connection:

    • In the Windsurf editor, try using the create-ui tool by typing something like:
      Create me a Team page which has carousel, and with user data
      
    • The MCP server should respond with relevant documentation and example code

Example Output

When using the create-ui tool, you’ll receive documentation and example code for implementing UI components with FlyonUI.

Featured Templates

View More
Verified Icon
AI Agents
AI Chatbot Starter Kit
1308 6081 5.0
AI Engineering
Python Bug Fixer
119 1080
AI Characters
Sarcastic AI Chat Bot
128 1440
Customer service
AI-Powered Product List Manager
147 625
AI Assistants
Image to text with Claude 3
150 1122

Start your free trial

Build your solution today. No credit card required.

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.