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
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query to find relevant components |
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(); }