Flux UI MCP Server
Allows Codeium (through Windsurf) to access Flux UI component documentation and examples through a series of tools for component discovery and reference.
Provides reference information for Flux UI components, including component documentation, usage examples, props, and code samples scraped from the official Flux UI documentation site.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Flux UI MCP Servershow me examples for the Button component"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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 componentsget_flux_component_details- Get detailed information about a specific componentget_flux_component_examples- Get usage examples for a specific componentsearch_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
Related MCP server: WordPress Design System MCP Server
Development
Install dependencies:
npm installBuild the server:
npm run buildFor development with auto-rebuild:
npm run watchInstallation
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 inspectorThe Inspector will provide a URL to access debugging tools in your browser.
Available Tools
4 toolsget_flux_component_detailsC
Get detailed information about a specific Flux UI component
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the Flux UI component (e.g., "accordion", "button") |
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the Flux UI component (e.g., "accordion", "button") |
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query to find relevant components |
TDQS
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.
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.
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.
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.
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.
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.
4 tool updates
- First observed
get_flux_component_details - First observed
get_flux_component_examples - First observed
list_flux_components - First observed
search_flux_components
TDQS
Scored across 4 tools
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.
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.
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.
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
Related MCP Connectors
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
- FlowstepOAuthai.flowstep
Generate, inspect, and manage Flowstep UI designs directly from your AI assistant.
Accessible React components, tokens, usage guidance, and install commands for product interfaces.
Related MCP Servers
- AlicenseAqualityCmaintenanceProvides AI coding assistants with on-demand access to component specs, test scenarios, accessibility requirements, and build guides from the Web UI Component Specification.10MIT
- FlicenseNot gradedqualityFmaintenanceProvides AI assistants with access to WordPress Design System component information and design guidance.9-
- FlicenseNot gradedqualityDmaintenanceEnables AI assistants to access documentation of Vue UI components, including props, events, and slots, for generating correct usage code.7-
- AlicenseAqualityDmaintenanceProvides access to Aceternity UI component library documentation, enabling AI assistants to browse, search, and retrieve detailed information about components.312 npmMIT