search_flux_components
Locate Flux UI design system components by entering a keyword query. Access component documentation and examples directly from the Flux UI MCP Server to streamline UI development.
Instructions
Search for Flux UI components by keyword
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query to find relevant components |
Input Schema (JSON Schema)
{
"properties": {
"query": {
"description": "Search query to find relevant components",
"type": "string"
}
},
"required": [
"query"
],
"type": "object"
}
Implementation Reference
- src/index.ts:595-640 (handler)The handleSearchComponents method implements the core logic for the search_flux_components tool. It validates the input query, ensures the components list is cached, performs the search using searchComponentsByQuery, fetches detailed information for matching components if not already cached, constructs results with name, description, and URL, and returns them in a standardized response format.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:141-150 (schema)Input schema for the search_flux_components tool, defining a required 'query' parameter of type string with description.inputSchema: { type: "object", properties: { query: { type: "string", description: "Search query to find relevant components", }, }, required: ["query"], },
- src/index.ts:138-151 (registration)Registration of the search_flux_components tool in the ListToolsRequestSchema response, 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:163-164 (registration)Case statement in the CallToolRequestSchema handler that dispatches to the search_flux_components implementation.case "search_flux_components": return await this.handleSearchComponents(request.params.arguments);
- src/index.ts:244-252 (helper)Helper function validateSearchQuery used by the handler to validate and normalize the search query input.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(); }