find_by_attribute

Instructions

Implementation Reference

• src/index.ts:483-549 (handler)

  The private async method `findByAttribute()` that executes the tool logic. It iterates over loaded component docs, searches for lines containing the attribute name in backtick notation (e.g., `disabled`), and returns context snippets of components that have that attribute.

  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)

  The tool registration within the `ListToolsRequestSchema` handler. Defines the tool name `find_by_attribute`, its description, and input schema requiring an `attribute` string parameter.

  {
    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)

  The switch case in `CallToolRequestSchema` handler that routes the `find_by_attribute` tool name to the `findByAttribute()` method.

  case "find_by_attribute":
    return await this.findByAttribute(
      (args?.attribute as string) || ""
    );