Flux Ui MCP

🚀 Flux UI MCP Server

This is an MCP server for Flux UI component references, which provides reference information for Flux UI components.

🚀 Quick Start

This is a TypeScript-based MCP server that provides reference information for Flux UI components. It implements a Model Context Protocol (MCP) server that helps AI assistants access Flux UI component documentation and examples.

✨ Features

Tools

• list_flux_components - Get a list of all available Flux UI components
• get_flux_component_details - Get detailed information about a specific component
• get_flux_component_examples - Get usage examples for a specific component
• search_flux_components - Search for components by keyword

Functionality

This server scrapes and caches information from:

• The official Flux UI documentation site (https://fluxui.dev)

It provides structured data including:

• Component descriptions
• Usage examples
• Props
• Code samples

📦 Installation

Claude Desktop Configuration

To use with Claude Desktop, add the server config:

On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json On Windows: %APPDATA%/Claude/claude_desktop_config.json

Option 1: Using local build

{
  "mcpServers": {
    "fluxui-server": {
      "command": "/path/to/fluxui-mcp-server/build/index.js"
    }
  }
}

Option 2: Using npx command

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

Windsurf Configuration

Add this to your ./codeium/windsurf/model_config.json:

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

Cursor Configuration

Add this to your .cursor/mcp.json:

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

💻 Usage Examples

Basic Usage

The following commands show how to install dependencies, build the server, and enable auto - rebuild for development:

Install dependencies:

npm install

Build the server:

npm run build

For development with auto - rebuild:

npm run watch

Advanced Usage

Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector, which is available as a package script:

npm run inspector

The Inspector will provide a URL to access debugging tools in your browser.