Flux UI MCP Server

Instructions

Implementation Reference

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

  The main handler function for the 'get_flux_component_examples' tool. It validates the component name, checks the cache for component info (including examples), fetches details if needed via fetchComponentDetails, and returns the examples as a success response.

  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:127-136 (schema)

  Input schema definition for the 'get_flux_component_examples' tool, specifying the required 'componentName' parameter.

  inputSchema: {
    type: "object",
    properties: {
      componentName: {
        type: "string",
        description: 'Name of the Flux UI component (e.g., "accordion", "button")',
      },
    },
    required: ["componentName"],
  },

• src/index.ts:124-137 (registration)

  Registration of the 'get_flux_component_examples' tool in the ListToolsRequestSchema handler, including name, description, and input schema.

  {
    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 switch statement that routes calls to the handleGetComponentExamples handler.

  case "get_flux_component_examples":
    return await this.handleGetComponentExamples(request.params.arguments);

• src/index.ts:377-427 (helper)

  Helper function used by fetchComponentDetails to parse HTML and extract code examples from 'pre' elements, associating them with titles from nearby headings.

  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;
  }