Flux UI MCP Server

Instructions

Implementation Reference

• src/index.ts:177-225 (handler)

  The handler function that scrapes https://fluxui.dev/components to list all Flux UI components using Cheerio to parse links.
  private async handleListComponents() { try { if (!this.componentsListCache) { // Fetch the main components page or sidebar structure // This needs inspection of fluxui.dev to find the component list reliably // Let's assume we fetch the base URL and look for links starting with /components/ const response = await this.axiosInstance.get(`${this.FLUX_DOCS_URL}/components`); const $ = cheerio.load(response.data); const components: ComponentInfo[] = []; const componentUrls = new Set<string>(); // Avoid duplicates // Look for links within the navigation or main content area // Adjust selector based on actual site structure $('a[href^="/components/"]').each((_, element) => { const link = $(element); const url = link.attr("href"); if (url && url !== "/components" && !componentUrls.has(url)) { // Basic check to avoid the parent page // Extract name from URL const parts = url.split("/").filter(part => part); // filter removes empty strings const name = parts[parts.length - 1]; if (name && !name.includes('#')) { // Basic check for valid component name componentUrls.add(url); components.push({ name, description: "", // Will be populated when fetching details url: `${this.FLUX_DOCS_URL}${url}`, }); } } }); // Sort components alphabetically by name components.sort((a, b) => a.name.localeCompare(b.name)); this.componentsListCache = components; } return this.createSuccessResponse( this.componentsListCache.map(c => ({ name: c.name, url: c.url })) // Return only name and URL for list ); } catch (error) { this.handleAxiosError(error, "Failed to fetch Flux UI components list"); } }
• src/index.ts:155-171 (registration)

  Registers the tool handler in the CallToolRequestSchema switch statement.
  this.server.setRequestHandler(CallToolRequestSchema, async (request) => { switch (request.params.name) { case "list_flux_components": return await this.handleListComponents(); case "get_flux_component_details": return await this.handleGetComponentDetails(request.params.arguments); case "get_flux_component_examples": return await this.handleGetComponentExamples(request.params.arguments); case "search_flux_components": return await this.handleSearchComponents(request.params.arguments); default: throw new McpError( ErrorCode.MethodNotFound, `Unknown tool: ${request.params.name}` ); } });
• src/index.ts:102-109 (schema)

  Tool schema definition with empty input schema (no parameters required).
  name: "list_flux_components", description: "Get a list of all available Flux UI components", inputSchema: { type: "object", properties: {}, required: [], }, },
• src/index.ts:99-153 (registration)

  Tool is registered in the ListToolsRequestSchema response, making it discoverable.
  this.server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [ { name: "list_flux_components", description: "Get a list of all available Flux UI components", inputSchema: { type: "object", properties: {}, required: [], }, }, { 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"], }, }, { name: "get_flux_component_examples", description: "Get usage examples for 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"], }, }, { 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:283-300 (helper)

  Helper function used by the handler to format the success response as JSON text content.
  private createSuccessResponse(data: any) { return { content: [ { type: "text", // Attempt to stringify, handle potential circular references safely text: JSON.stringify(data, (key, value) => { if (typeof value === 'object' && value !== null) { // Basic circular reference check placeholder - might need a more robust solution // if complex objects are returned that Cheerio might create. // For simple data structures, this might be okay. } return value; }, 2) }, ], }; }