search_components

Find Modus Web Components by name or keyword to access documentation and usage details for your IDE projects.

Instructions

Search for Modus Web Components by name or keyword. Returns a list of matching components with brief descriptions.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`query`	Yes	Search query (component name, keyword, or feature)

Implementation Reference

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

The main handler function implementing the search_components tool. It searches loaded component documentation for matches against the query in component names or content, extracts brief descriptions, and returns formatted markdown results or a no-match 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)

Input schema for the search_components tool, defining the required 'query' string parameter.

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

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

Tool registration in the ListToolsRequestSchema handler, defining the search_components tool with name, description, and schema.

{
  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)
Dispatch registration in the CallToolRequestSchema switch statement, routing calls to the searchComponents handler.
```
case "search_components":
  return await this.searchComponents((args?.query as string) || "");
```

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

Helper method that loads component documentation files into memory (this.docs), which is used by the searchComponents handler.

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`);
}

MCP Modus