Flux UI MCP Server

Instructions

Implementation Reference

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

  Main handler function for the get_flux_component_details tool. Validates input, checks cache, fetches component details from Flux UI docs if needed, caches the result, and returns formatted 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 definition for the get_flux_component_details 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:110-123 (registration)

  Tool registration in the list of available tools returned by ListToolsRequestSchema.

  {
    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:159-160 (registration)

  Handler dispatch/registration in the CallToolRequestSchema switch statement.

  case "get_flux_component_details":
    return await this.handleGetComponentDetails(request.params.arguments);

• src/index.ts:339-363 (helper)

  Core helper function that fetches and parses the component details page using axios and cheerio, extracting 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
    };
  }