Skip to main content
Glama

search_flux_components

Find Flux UI components by keyword to access documentation and examples from the design system.

Instructions

Search for Flux UI components by keyword

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query to find relevant components

Implementation Reference

  • 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"], }, },
  • 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"], },
  • 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 }
  • 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(); }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/iannuttall/flux-ui-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server