find_by_attribute

Locate web components by searching for specific attributes like 'disabled' or 'color' to identify elements with particular properties in your project.

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 occurrences of the specified attribute in attribute lists (marked as - **`attr`**), 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:206-221 (registration)

Registers the 'find_by_attribute' tool in the list returned by ListToolsRequestSchema, including its name, description, and input schema.

{
  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:210-220 (schema)

Defines the input schema for the 'find_by_attribute' tool, specifying the required 'attribute' string parameter.

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 (helper)
Dispatch case in the CallToolRequestSchema handler that routes calls to 'find_by_attribute' to the findByAttribute method.
```
case "find_by_attribute":
  return await this.findByAttribute(
    (args?.attribute as string) || ""
  );
```

MCP Modus