FlyonUI IDE Extension

The FlyonUI IDE Extension brings powerful UI building capabilities directly into your favorite IDE. With features like visual UI editing, block integration, and AI agent support, you can build interfaces faster and more efficiently.

Follow the complete steps below to install and set up the FlyonUI IDE Extension.

Choose any one of the following installation method to install the FlyonUI IDE Extension in your IDE:

1. Open the Extensions Menu in your IDE.
2. Search for “FlyonUI IDE Extension” in the search bar.
3. Click the Install button to install the extension.

1. VS Code: vscode:extension/themeselection.flyonui-vscode-extension
2. Cursor: cursor:extension/themeselection.flyonui-vscode-extension
3. Windsurf: windsurf:extension/themeselection.flyonui-vscode-extension
4. Trae: trae:extension/themeselection.flyonui-vscode-extension

Click on the link as per your favourite IDE to install the extension instantly.

For VS Code:

1. Visit the VS Code Marketplace
2. Click Install

For Cursor / Windsurf / Trae:

1. Visit Open VSX
2. Click the Download button to download the .vsix file
3. Open your IDE and press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
4. Search for “Install Extension from VSIX”
5. Select the downloaded file to install the extension.

Before proceeding, ensure that FlyonUI is set up in your project. If not, follow the Quick Start Guide to setup FlyonUI in your project.

1. Open project in your IDE and start the dev server.
2. Open the terminal and run:

npx flyonui-extension-cli@latest

This will ask you for a port number where your dev server is running. Once done, you’ll see a toolbar with the FlyonUI logo in the bottom-right corner of the screen.

When you click the FlyonUI toolbar, a menu opens with two main options:

1. Settings Menu
2. Chat Panel

Let’s explore each in detail.

The Settings Panel allows you to configure the extension to suit your workflow.

• Already have FlyonUI Pro? Click Add License Key and enter your license key
• Want to upgrade? Click Upgrade to Pro to visit the FlyonUI website and purchase a Pro license
• Using the free version? You can continue using the free version without adding a license key

Select your project with the IDE Agent from the dropdown menu. This dropdown displays all available projects opened in your IDEs. If you don’t see your project, use the Refresh button.

Toggle the position of the FlyonUI toolbar to your preferred location.

Choose your preferred theme:

• Light
• Dark
• System (follows your system settings)

Use the keyboard shortcut to quickly toggle the Chat Panel.

Configure how prompts are handled:

• Send: Sends the prompt and details to your selected IDE Agent
• Copy: Copies the generated prompt to your clipboard (useful for CLI agents like Claude Code, Gemini CLI, Roo Code, or Cline)
• Both: Sends the prompt to the IDE agent and copies it to the clipboard

The Chat Panel is your command center for interacting with the extension and your IDE agent.

Click Open Selector to visually select UI elements on your page. Once selected, you can pass them with your custom prompt to your IDE Agent to make changes to your UI.

Send your prompt directly to your IDE Agent using this button.

Type @ in the chat to access additional context options. below are the all the options available:

Attach documentation for frameworks/libraries used in your project. This provides your IDE agent with reference material for better code generation.

Access and integrate FlyonUI Blocks directly from the Chat Panel:

1. Select FlyonUI Blocks from the @ menu
2. Search for the block you want to integrate
3. Preview the block before selection
4. Add a custom prompt to customize the block
5. Send it to your IDE agent for integration

You can also access FlyonUI Blocks directly from your IDE’s Extensions panel. Look for the FlyonUI logo and click to open the panel.

1. Have FlyonUI Pro? Add your license key to unlock Pro blocks
2. Want to upgrade? Click the link to purchase the Pro version
3. Using free version? Keep it blank to continue using free blocks

Once configured, you can toggle the license status section using the Settings icon in the top-right corner.

Use the search bar to find blocks quickly. For example, searching for “Hero” will display all available Hero sections.

Each block card has three action buttons in the bottom-right corner:

1. Preview (Eye icon): Opens a preview of the block for better visualization
2. Copy: Copies the HTML, CSS, and JS code to your clipboard for manual integration or modification
3. Send to IDE: Sends the component directly to your IDE agent with a default integration prompt