MCP Modus

Instructions

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