Flux UI MCP Server

Instructions

Implementation Reference

• src/index.ts:101-109 (registration)

  Registration of the list_flux_components tool, including its description and empty input schema (no parameters required).

  {
    name: "list_flux_components",
    description: "Get a list of all available Flux UI components",
    inputSchema: {
      type: "object",
      properties: {},
      required: [],
    },
  },

• src/index.ts:157-158 (registration)

  Dispatch case in CallToolRequestSchema handler that routes to the tool's implementation method.

  case "list_flux_components":
    return await this.handleListComponents();

• src/index.ts:177-225 (handler)

  Core implementation of the list_flux_components tool. Fetches the Flux UI components page, scrapes anchor links starting with /components/, extracts component names from URLs, caches the list, and returns an array of {name, url} objects.

  private async handleListComponents() {
    try {
      if (!this.componentsListCache) {
        // Fetch the main components page or sidebar structure
        // This needs inspection of fluxui.dev to find the component list reliably
        // Let's assume we fetch the base URL and look for links starting with /components/
        const response = await this.axiosInstance.get(`${this.FLUX_DOCS_URL}/components`);
        const $ = cheerio.load(response.data);
  
        const components: ComponentInfo[] = [];
        const componentUrls = new Set<string>(); // Avoid duplicates
  
        // Look for links within the navigation or main content area
        // Adjust selector based on actual site structure
        $('a[href^="/components/"]').each((_, element) => {
          const link = $(element);
          const url = link.attr("href");
  
          if (url && url !== "/components" && !componentUrls.has(url)) {
             // Basic check to avoid the parent page
             // Extract name from URL
            const parts = url.split("/").filter(part => part); // filter removes empty strings
            const name = parts[parts.length - 1];
  
            if (name && !name.includes('#')) { // Basic check for valid component name
              componentUrls.add(url);
              components.push({
                name,
                description: "", // Will be populated when fetching details
                url: `${this.FLUX_DOCS_URL}${url}`,
              });
            }
          }
        });
  
        // Sort components alphabetically by name
        components.sort((a, b) => a.name.localeCompare(b.name));
  
        this.componentsListCache = components;
      }
  
      return this.createSuccessResponse(
          this.componentsListCache.map(c => ({ name: c.name, url: c.url })) // Return only name and URL for list
        );
  
    } catch (error) {
       this.handleAxiosError(error, "Failed to fetch Flux UI components list");
    }
  }