Skip to main content
Glama
iannuttall

Flux UI MCP Server

by iannuttall

Flux UI MCP Server

MCP server for Flux UI component references

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:

It provides structured data including:

  • Component descriptions

  • Usage examples

  • Props

  • Code samples

Related MCP server: WordPress Design System MCP Server

Development

Install dependencies:

npm install

Build the server:

npm run build

For development with auto-rebuild:

npm run watch

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"]
    }
  }
}

Debugging

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.

Available Tools

4 tools
get_flux_component_detailsC

Get detailed information about a specific Flux UI component

ParametersJSON Schema
NameRequiredDescriptionDefault
componentNameYesName of the Flux UI component (e.g., "accordion", "button")

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the action ('Get detailed information') but doesn't mention whether this is a read-only operation, what format the information is returned in, potential errors (e.g., for invalid component names), or any rate limits. This leaves significant gaps in understanding how the tool behaves.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded with the core action, though it could be slightly more structured by hinting at the output or usage context.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what 'detailed information' includes (e.g., properties, usage guidelines, dependencies), nor does it address potential behavioral aspects like error handling. For a tool with no structured data beyond the input schema, this leaves the agent with insufficient context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100%, with the parameter 'componentName' fully documented in the schema. The description adds no additional meaning beyond what the schema provides (e.g., it doesn't clarify what constitutes a valid component name beyond the examples). Given the high schema coverage, the baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('Get detailed information') and resource ('specific Flux UI component'), making the purpose unambiguous. However, it doesn't differentiate from sibling tools like 'get_flux_component_examples' which might also provide component details, leaving room for confusion about what distinguishes them.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives like 'list_flux_components' or 'search_flux_components'. It lacks any context about prerequisites, such as needing to know the exact component name, or exclusions, like not being suitable for browsing components.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_flux_component_examplesC

Get usage examples for a specific Flux UI component

ParametersJSON Schema
NameRequiredDescriptionDefault
componentNameYesName of the Flux UI component (e.g., "accordion", "button")

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the action ('Get usage examples') but doesn't describe what the tool returns (e.g., structured data, text, or error handling), whether it's idempotent or has side effects, or any limitations (e.g., rate limits or authentication needs). For a tool with no annotation coverage, this is a significant gap in transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It's front-loaded with the core action ('Get usage examples'), making it easy to parse. There's no redundancy or fluff, earning a high score for conciseness.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is incomplete for effective tool use. It doesn't explain what the return value looks like (e.g., a list of examples, markdown text, or error messages), behavioral traits like idempotency, or how it integrates with sibling tools. For a tool with no structured output information, the description should provide more context to compensate.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with the parameter 'componentName' clearly documented as the name of a Flux UI component (e.g., 'accordion', 'button'). The description adds no additional semantic context beyond this, such as valid component names or example formats. Since the schema does the heavy lifting, a baseline score of 3 is appropriate, but the description doesn't compensate for any gaps (though none exist here).

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('Get') and resource ('usage examples for a specific Flux UI component'), making the purpose immediately understandable. It distinguishes from sibling tools like 'get_flux_component_details' (which likely provides metadata) and 'list_flux_components' (which lists components rather than examples). However, it doesn't specify the format or scope of examples (e.g., code snippets, screenshots, or documentation excerpts), leaving some ambiguity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites (e.g., needing a valid component name), compare it to siblings like 'search_flux_components' for broader queries, or indicate scenarios where examples are useful (e.g., learning, troubleshooting). This lack of context makes it harder for an agent to decide when this tool is appropriate.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_flux_componentsB

Get a list of all available Flux UI components

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden. It states the tool retrieves a list but doesn't disclose behavioral traits such as whether it's read-only, if there are rate limits, what the return format looks like (e.g., pagination, structure), or any authentication requirements. This leaves significant gaps for a tool with no annotation coverage.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without any wasted words. It's front-loaded and appropriately sized for a simple tool, making it easy for an agent to parse quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations, no output schema, and a simple tool with 0 parameters, the description is incomplete. It lacks information on behavioral aspects (e.g., return format, safety) and usage context, which are necessary for the agent to effectively invoke it, especially with sibling tools available.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 0 parameters with 100% coverage, so no parameter documentation is needed. The description appropriately doesn't discuss parameters, and since there are none, it doesn't need to compensate for any gaps, earning a baseline score above 3 for this scenario.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('Get') and resource ('list of all available Flux UI components'), making the purpose understandable. However, it doesn't explicitly differentiate from sibling tools like 'search_flux_components' (which might filter components) or 'get_flux_component_details' (which provides detailed info on a specific component), missing full sibling distinction.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. The description doesn't mention contexts like needing a comprehensive list versus filtered results, or prerequisites for usage, leaving the agent to infer based on sibling tool names alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

search_flux_componentsC

Search for Flux UI components by keyword

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query to find relevant components

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool searches by keyword but doesn't cover critical aspects like whether it's read-only, how results are returned (e.g., pagination, format), error handling, or performance considerations. This leaves significant gaps for an agent to understand the tool's behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without any wasted words. It is appropriately sized and front-loaded, making it easy to parse quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is incomplete for a search tool. It doesn't explain what the search returns (e.g., list of components, metadata), how results are structured, or any limitations (e.g., search scope, ranking). For a tool with one parameter but no structured output info, more context is needed.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with the 'query' parameter fully documented in the schema itself. The description adds no additional meaning beyond implying keyword-based searching, which aligns with the schema but doesn't provide extra context like query syntax or examples. This meets the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Search for') and resource ('Flux UI components') with a specific method ('by keyword'), making the purpose immediately understandable. However, it doesn't differentiate from sibling tools like 'list_flux_components' or 'get_flux_component_details', which would require explicit comparison to achieve a perfect score.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives like 'list_flux_components' (which might retrieve all components without filtering) or 'get_flux_component_details' (for specific component info). The description implies usage for keyword-based searches but lacks explicit context or exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 4 tool updates
    • First observedget_flux_component_details
    • First observedget_flux_component_examples
    • First observedlist_flux_components
    • First observedsearch_flux_components

TDQS

A3.5/5.0

Scored across 4 tools

Disambiguation5/5

Each tool has a clearly distinct purpose: listing all components, searching by keyword, getting details, and getting examples. There is no overlap in functionality, making it easy for an agent to select the right tool.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern with 'flux_component' as the common noun, using snake_case uniformly. The verbs (list, search, get) are clear and predictable.

Tool Count5/5

With 4 tools, this server is well-scoped for its purpose of exploring Flux UI components. Each tool serves a specific, non-redundant function, making the count appropriate and efficient.

Completeness4/5

The toolset covers core exploration needs (list, search, details, examples) for a UI component library, but lacks CRUD operations like creating or updating components, which might be expected if the server also managed components. However, for a read-only documentation or reference server, it is largely complete.

Maintenance

ActivityInactive
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers