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
Clone the repository
Install dependencies
uv add "mcp[cli]" sentence-transformers qdrant-client python-dotenv
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
- The server loads and indexes all FlyonUI documentation from the
docs
directory - 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:
Start the MCP server as described above
Open Windsurf Editor
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
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
Save the configuration
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
- In the Windsurf editor, try using the create-ui tool by typing something like:
Example Output
When using the create-ui tool, you’ll receive documentation and example code for implementing UI components with FlyonUI.
FlyonUI Component Generator
Project Details
- PruthviPraj00/my-mcp
- Last Updated: 5/26/2025
Recomended MCP Servers
MCP servers that models can use to extend their capabilities for general-use tasks and formalized workflows. all servers...
Monorepo for my projects
Official PostHog MCP Server
MCP server for interacting with YNAB.
Model Control Protocol (MCP) server for YOURLS URL shortening integration with Claude Desktop
MCP server for querying BTC data via Blockchain.com APIs