search_components

Instructions

Implementation Reference

• src/index.ts:352-414 (handler)

  The actual implementation of the searchComponents method. It normalizes the query, iterates over loaded documentation files, searches component names and content for matches, extracts a brief description, and returns formatted results (or a 'not found' message).

  private async searchComponents(query: string): Promise<any> {
    const normalizedQuery = query.toLowerCase();
    const results: Array<{
      component: string;
      filename: string;
      relevance: string;
    }> = [];
  
    for (const doc of this.docs) {
      const content = doc.content.toLowerCase();
      const componentName = doc.component.toLowerCase();
  
      if (
        componentName.includes(normalizedQuery) ||
        content.includes(normalizedQuery)
      ) {
        // Extract the first paragraph or description
        const lines = doc.content.split("\n");
        let description = "";
  
        for (const line of lines) {
          if (
            line.trim() &&
            !line.startsWith("#") &&
            !line.startsWith("Tag:")
          ) {
            description = line.trim();
            break;
          }
        }
  
        results.push({
          component: doc.component,
          filename: doc.filename,
          relevance: description || "Modus Web Component",
        });
      }
    }
  
    if (results.length === 0) {
      return {
        content: [
          {
            type: "text",
            text: `No components found matching "${query}". Try searching for common UI elements like "button", "input", "modal", "card", etc.`,
          },
        ],
      };
    }
  
    const resultText = results
      .map((r) => `**${r.component}**\n${r.relevance}\n`)
      .join("\n");
  
    return {
      content: [
        {
          type: "text",
          text: `Found ${results.length} component(s) matching "${query}":\n\n${resultText}`,
        },
      ],
    };
  }

• src/index.ts:169-179 (schema)

  The inputSchema definition for the 'search_components' tool. It defines a 'query' string parameter that is required, with a description prompting the user to search by component name, keyword, or feature.

  inputSchema: {
    type: "object",
    properties: {
      query: {
        type: "string",
        description:
          "Search query (component name, keyword, or feature)",
      },
    },
    required: ["query"],
  },

• src/index.ts:165-180 (registration)

  The tool is registered in the ListToolsRequestSchema handler as part of the tools array with name 'search_components', description, and inputSchema.

  {
    name: "search_components",
    description:
      "Search for Modus Web Components by name or keyword. Returns a list of matching components with brief descriptions.",
    inputSchema: {
      type: "object",
      properties: {
        query: {
          type: "string",
          description:
            "Search query (component name, keyword, or feature)",
        },
      },
      required: ["query"],
    },
  },

• src/index.ts:304-305 (registration)

  The tool is dispatched in the CallToolRequestSchema handler via a switch statement: case 'search_components' calls this.searchComponents().

  case "search_components":
    return await this.searchComponents((args?.query as string) || "");

• src/index.ts:89-110 (helper)

  The loadDocs() helper that loads Markdown files from the docs directory and populates the `this.docs` array that searchComponents iterates over.

  private loadDocs(): void {
    if (!existsSync(this.docsPath)) {
      console.error(`Documentation directory not found at: ${this.docsPath}`);
      console.error("Please run: node download-docs.js");
      return;
    }
  
    const files = readdirSync(this.docsPath).filter((f) => f.endsWith(".md"));
  
    for (const file of files) {
      const content = readFileSync(join(this.docsPath, file), "utf-8");
      const component = file.replace("modus-wc-", "").replace(".md", "");
  
      this.docs.push({
        filename: file,
        component,
        content,
      });
    }
  
    console.error(`Loaded ${this.docs.length} component documentation files`);
  }