Flux UI MCP Server

Instructions

Implementation Reference

• src/index.ts:545-580 (handler)

  Main handler function for the get_flux_component_examples tool. Validates input, checks/ populates cache with component details (including examples), and returns the examples or empty array.
  private async handleGetComponentExamples(args: any) { const componentName = this.validateComponentName(args); try { // Use cached details if available, otherwise fetch let componentInfo: ComponentInfo | undefined = this.componentCache.get(componentName); if (!componentInfo) { console.error(`Cache miss for examples: ${componentName}, fetching details...`); componentInfo = await this.fetchComponentDetails(componentName); this.componentCache.set(componentName, componentInfo); // Cache the fetched details console.error(`Cached details while fetching examples for ${componentName}`); } else { console.error(`Cache hit for examples: ${componentName}`); } const examples = componentInfo?.examples || []; if (!examples || examples.length === 0) { console.error(`No examples found for ${componentName} even after fetch.`); // Optionally, you could try re-fetching just the examples part if details fetch failed previously // const freshExamples = await this.fetchComponentExamplesDirectly(componentName); // return this.createSuccessResponse(freshExamples); return this.createSuccessResponse([]); // Return empty array if none found } return this.createSuccessResponse(examples); } catch (error) { console.error(`Error fetching examples for ${componentName}:`, error); if (error instanceof McpError) { throw error; } // Pass specific context to error handler this.handleAxiosError(error, `fetching examples for component "${componentName}"`); } }
• src/index.ts:124-137 (registration)

  Tool registration in the ListToolsRequestSchema response, defining name, description, and input schema (object with required string 'componentName').
  { name: "get_flux_component_examples", description: "Get usage examples for 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:161-162 (registration)

  Dispatch case in the CallToolRequestSchema handler switch statement that routes calls to the handleGetComponentExamples method.
  case "get_flux_component_examples": return await this.handleGetComponentExamples(request.params.arguments);
• src/index.ts:377-427 (helper)

  Key helper function that extracts code examples from the component's HTML page using Cheerio, finding <pre> blocks and associating them with nearby headings for titles.
  private extractExamples($: cheerio.CheerioAPI): ComponentExample[] { const examples: ComponentExample[] = []; // Look for sections containing code examples. Flux UI seems to use blocks // with a 'Code' tab or similar structure. // This selector might need adjustment based on the actual structure. // Let's try finding 'pre' elements and their preceding headings. $("pre").each((_, element) => { const codeBlock = $(element); const code = codeBlock.text().trim(); if (code) { let title = "Code Example"; let description : string | undefined = undefined; // Try to find the nearest preceding heading (h2, h3) let potentialTitleElement = codeBlock.closest('div[class*="relative"]').prev('h2, h3'); // Adjust selector based on actual structure if (!potentialTitleElement.length) { potentialTitleElement = codeBlock.parent().prev('h2, h3'); // Try another common structure } if (!potentialTitleElement.length) { potentialTitleElement = codeBlock.prev('h2, h3'); // Simplest case } if (potentialTitleElement.length) { title = potentialTitleElement.text().trim(); description = `Example for ${title}`; } else { // Fallback: Try to find a title in the code block structure if tabs are used const tabButton = codeBlock.closest('[role="tabpanel"]')?.attr('aria-labelledby'); if (tabButton) { const titleElement = $(`#${tabButton}`); if(titleElement.length && titleElement.text().trim().toLowerCase() === 'code') { // Find the heading associated with this example block let heading = $(`#${tabButton}`).closest('div').prev('h2, h3'); // Adjust based on DOM if(heading.length) title = heading.text().trim(); } } } examples.push({ title, code, description }); } }); // Deduplicate examples based on code content if necessary (simple check) const uniqueExamples = Array.from(new Map(examples.map(e => [e.code, e])).values()); console.error(`Found ${uniqueExamples.length} examples.`); return uniqueExamples; }
• src/index.ts:127-136 (schema)

  Input schema definition for the tool: requires a 'componentName' string property.
  inputSchema: { type: "object", properties: { componentName: { type: "string", description: 'Name of the Flux UI component (e.g., "accordion", "button")', }, }, required: ["componentName"], },