find_by_attribute
Locate components based on specific attributes like disabled, color, or size to identify elements with particular properties in your codebase.
Instructions
Find components that have a specific attribute or property.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| attribute | Yes | The attribute name to search for (e.g., "disabled", "color", "size") |
Implementation Reference
- src/index.ts:483-549 (handler)The handler function that executes the 'find_by_attribute' tool. It searches through loaded component documentation files for lines matching the given attribute name in attribute definition format (e.g., - **`disabled`**), extracts context, and returns matching components with their attribute details.private async findByAttribute(attribute: string): Promise<any> { const normalizedAttribute = attribute.toLowerCase(); const results: Array<{ component: string; context: string }> = []; for (const doc of this.docs) { const lines = doc.content.split("\n"); for (let i = 0; i < lines.length; i++) { const line = lines[i]; const lowerLine = line.toLowerCase(); // Look for attribute definitions like: - **`disabled`** if ( lowerLine.includes(`\`${normalizedAttribute}\``) && (line.startsWith("-") || line.startsWith("•")) ) { // Get context - the attribute definition and its properties const contextStart = i; let contextEnd = i + 1; // Include lines until we hit another attribute or empty line while ( contextEnd < lines.length && !lines[contextEnd].match(/^-\s+\*\*`/) && contextEnd < i + 10 ) { if (lines[contextEnd].trim() === "") { break; } contextEnd++; } const context = lines.slice(contextStart, contextEnd).join("\n"); results.push({ component: doc.component, context: context.trim(), }); break; } } } if (results.length === 0) { return { content: [ { type: "text", text: `No components found with attribute "${attribute}".`, }, ], }; } const resultText = results .map((r) => `**${r.component}**\n\`\`\`\n${r.context}\n\`\`\`\n`) .join("\n"); return { content: [ { type: "text", text: `Found ${results.length} component(s) with attribute "${attribute}":\n\n${resultText}`, }, ], }; }
- src/index.ts:207-221 (registration)Tool registration in the listTools handler, defining the name, description, and input schema for 'find_by_attribute'.name: "find_by_attribute", description: "Find components that have a specific attribute or property.", inputSchema: { type: "object", properties: { attribute: { type: "string", description: 'The attribute name to search for (e.g., "disabled", "color", "size")', }, }, required: ["attribute"], }, },
- src/index.ts:315-318 (handler)Switch case in the callTool request handler that dispatches calls to the findByAttribute method.case "find_by_attribute": return await this.findByAttribute( (args?.attribute as string) || "" );
- src/index.ts:210-220 (schema)Input schema definition for the 'find_by_attribute' tool, specifying the required 'attribute' parameter.inputSchema: { type: "object", properties: { attribute: { type: "string", description: 'The attribute name to search for (e.g., "disabled", "color", "size")', }, }, required: ["attribute"], },