Design System MCP Server

Instructions

Implementation Reference

• src/index.ts:400-471 (handler)

  Implementation of the "search-design-system" MCP tool handler. It searches through designSystemData for components matching the keyword, filters by source and internal visibility, and returns a formatted string of results.

  server.tool(
    "search-design-system",
    "Search for components, layouts, or patterns by keyword with source filtering",
    {
      keyword: z.string().describe("Keyword to search for in titles and descriptions"),
      includeInternal: z.boolean().optional().describe("Include internal documentation in search (default: false)"),
      sourceOnly: z.enum(["public", "internal", "all"]).optional().describe("Filter results by specific source"),
    },
    async ({ keyword, includeInternal = false, sourceOnly }) => {
      const normalizedKeyword = keyword.toLowerCase();
      const results = [];
      
      // Search through all categories and components
      for (const [categoryName, category] of Object.entries(designSystemData)) {
        for (const [componentName, component] of Object.entries(category)) {
          if (
            component.title.toLowerCase().includes(normalizedKeyword) || 
            component.body.toLowerCase().includes(normalizedKeyword)
          ) {
            // Get source information for this component
            const sourcedContent = await sourceManager.getContent(component.filePath);
            
            // Apply source filtering
            if (sourceOnly && sourceOnly !== 'all' && sourcedContent?.source !== sourceOnly) {
              continue;
            }
            
            // Check internal access
            if (sourcedContent?.source === 'internal' && !includeInternal) {
              continue;
            }
            
            results.push({
              category: categoryName,
              name: componentName,
              title: component.title,
              description: component.body,
              source: sourcedContent?.source || 'unknown',
              overrides: sourcedContent?.overrides
            });
          }
        }
      }
      
      if (results.length === 0) {
        return {
          content: [
            {
              type: "text",
              text: `No results found for keyword "${keyword}" with the specified filters.`,
            },
          ],
        };
      }
      
      const formattedResults = results.map(result => {
        let resultText = `**Category:** ${result.category}\n**Component:** ${result.name}\n**Title:** ${result.title}\n**Description:** ${result.description}\n**Source:** ${result.source.toUpperCase()}`;
        if (result.overrides) {
          resultText += ` (overrides ${result.overrides})`;
        }
        return resultText;
      });
      
      return {
        content: [
          {
            type: "text",
            text: `Found ${results.length} results for "${keyword}":\n\n${formattedResults.join("\n\n")}`,
          },
        ],
      };
    },