Flux UI MCP Server

Instructions

Implementation Reference

• src/index.ts:595-640 (handler)

  Primary execution handler for the search_flux_components tool. Validates input, loads component list if necessary, searches cached components, fetches details for matching results if not cached, and formats the response.

  private async handleSearchComponents(args: any) {
    const query = this.validateSearchQuery(args);
  
    try {
      // Ensure components list is loaded
      await this.ensureComponentsListLoaded();
  
      // Filter components matching the search query
       const results = this.searchComponentsByQuery(query);
        console.error(`Search for "${query}" found ${results.length} components.`);
  
      // Consider fetching full details for search results if needed,
      // but for now, just return name and URL like listComponents.
      // Or fetch descriptions if not already cached?
       const detailedResults = [];
        for (const component of results) {
             let details = this.componentCache.get(component.name);
             if (!details) {
                 try {
                     // Fetch details on demand for search results if not cached
                      console.error(`Search cache miss for ${component.name}, fetching...`);
                     details = await this.fetchComponentDetails(component.name);
                     this.componentCache.set(component.name, details); // Cache fetched details
                 } catch (fetchError) {
                      console.error(`Failed to fetch details for search result ${component.name}:`, fetchError);
                     // Use basic info if fetch fails
                     details = component; // Use the basic ComponentInfo from the list
                 }
             }
             detailedResults.push({
                 name: details.name,
                 description: details.description,
                 url: details.url,
             });
        }
  
  
      return this.createSuccessResponse(detailedResults);
    } catch (error) {
       console.error(`Error during search for "${query}":`, error);
       if (error instanceof McpError) {
           throw error;
       }
      this.handleAxiosError(error, `searching components with query "${query}"`);
    }
  }

• src/index.ts:138-151 (registration)

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

  {
    name: "search_flux_components",
    description: "Search for Flux UI components by keyword",
    inputSchema: {
      type: "object",
      properties: {
        query: {
          type: "string",
          description: "Search query to find relevant components",
        },
      },
      required: ["query"],
    },
  },

• src/index.ts:141-150 (schema)

  Input schema definition for the search_flux_components tool, specifying the required 'query' parameter.

  inputSchema: {
    type: "object",
    properties: {
      query: {
        type: "string",
        description: "Search query to find relevant components",
      },
    },
    required: ["query"],
  },

• src/index.ts:664-695 (helper)

  Core search logic helper that filters the cached list of components based on the query matching component names.

  private searchComponentsByQuery(query: string): ComponentInfo[] {
    if (!this.componentsListCache) {
      console.error("Attempted searchComponentsByQuery with unloaded cache.");
      return []; // Should have been loaded by ensureComponentsListLoaded
    }
  
    const lowerCaseQuery = query.toLowerCase();
  
    // Prioritize components where the name matches exactly or starts with the query
    const nameMatches = this.componentsListCache.filter(component =>
      component.name.toLowerCase() === lowerCaseQuery ||
      component.name.toLowerCase().startsWith(lowerCaseQuery)
    );
  
    // Then, add components where the description contains the query, avoiding duplicates
    const descriptionMatches = this.componentsListCache.filter(component => {
      // Fetch description if not available in list cache
      // This might require fetching details for all components upfront or on-demand during search
      // For now, we assume description might be pre-fetched or fetched on demand elsewhere
      // Let's refine search to only use name if description isn't readily available
      // Or modify handleListComponents to fetch descriptions initially (slower startup)
      // Sticking to name-only search for now based on list cache content.
      // Revisit if description search is crucial and descriptions are fetched.
      return false; // Temporarily disable description search based on current list cache structure
      // component.description?.toLowerCase().includes(lowerCaseQuery)
     }
    );
  
    // Combine and return
    // return [...nameMatches, ...descriptionMatches];
    return nameMatches; // Return only name matches for now
  }

• src/index.ts:244-252 (helper)

  Input validation helper for the search query parameter.

  private validateSearchQuery(args: any): string {
    if (!args?.query || typeof args.query !== "string") {
      throw new McpError(
        ErrorCode.InvalidParams,
        "Search query is required and must be a string"
      );
    }
    return args.query.toLowerCase();
  }