Flux UI MCP Server

Instructions

Implementation Reference

• src/index.ts:306-334 (handler)

  Primary handler for the 'get_flux_component_details' tool. Validates input, checks/uses cache, fetches and caches component details from Flux UI docs if needed, and returns JSON response.
  private async handleGetComponentDetails(args: any) { const componentName = this.validateComponentName(args); try { // Check cache first if (this.componentCache.has(componentName)) { const cachedData = this.componentCache.get(componentName); console.error(`Cache hit for ${componentName}`); return this.createSuccessResponse(cachedData); } console.error(`Cache miss for ${componentName}, fetching...`); // Fetch component details const componentInfo = await this.fetchComponentDetails(componentName); // Save to cache this.componentCache.set(componentName, componentInfo); console.error(`Cached details for ${componentName}`); return this.createSuccessResponse(componentInfo); } catch (error) { console.error(`Error fetching details for ${componentName}:`, error); // Ensure handleAxiosError is called correctly or rethrow McpError if (error instanceof McpError) { throw error; } this.handleAxiosError(error, `fetching details for component "${componentName}"`); } }
• src/index.ts:113-122 (schema)

  Input schema for the tool, requiring a 'componentName' string parameter.
  inputSchema: { type: "object", properties: { componentName: { type: "string", description: 'Name of the Flux UI component (e.g., "accordion", "button")', }, }, required: ["componentName"], },
• src/index.ts:110-123 (registration)

  Tool registration in the list_tools handler response, defining name, description, and input schema.
  { name: "get_flux_component_details", description: "Get detailed information about a specific Flux UI component", inputSchema: { type: "object", properties: { componentName: { type: "string", description: 'Name of the Flux UI component (e.g., "accordion", "button")', }, }, required: ["componentName"], }, },
• src/index.ts:155-171 (registration)

  Registration of the call_tool handler with switch dispatch to the specific tool handler.
  this.server.setRequestHandler(CallToolRequestSchema, async (request) => { switch (request.params.name) { case "list_flux_components": return await this.handleListComponents(); case "get_flux_component_details": return await this.handleGetComponentDetails(request.params.arguments); case "get_flux_component_examples": return await this.handleGetComponentExamples(request.params.arguments); case "search_flux_components": return await this.handleSearchComponents(request.params.arguments); default: throw new McpError( ErrorCode.MethodNotFound, `Unknown tool: ${request.params.name}` ); } });
• src/index.ts:339-363 (helper)

  Core helper function that fetches the component page, parses HTML with Cheerio to extract title, description, examples, import statement, and props.
  private async fetchComponentDetails(componentName: string): Promise<ComponentInfo> { const componentUrl = `${this.FLUX_DOCS_URL}/components/${componentName}`; console.error(`Fetching URL: ${componentUrl}`); const response = await this.axiosInstance.get(componentUrl); const $ = cheerio.load(response.data); console.error(`Successfully loaded HTML for ${componentName}`); // Extract component information const title = $("h1").first().text().trim(); const description = this.extractDescription($); const examples = this.extractExamples($); // Extract examples first to find import statement const importStatement = this.findImportStatement(examples); const props = this.extractProps($); console.error(`Extracted for ${componentName}: Title=${title}, Desc=${description.substring(0,50)}..., Import=${importStatement}, Props=${Object.keys(props).length}, Examples=${examples.length}`); return { name: title || componentName, // Use extracted title if available description, url: componentUrl, importStatement, props: Object.keys(props).length > 0 ? props : undefined, examples, // Include examples in details as well }; }