Components Build MCP

Instructions

Implementation Reference

• src/tools/index.ts:645-683 (handler)

  The handler function that executes the search_specification tool. It extracts the query parameter, calls the searchSpecification helper, formats the results into markdown, and returns a ToolResult.

  function handleSearchSpecification(args: Record<string, unknown>): ToolResult {
    const query = args.query as string;
  
    if (!query) {
      return {
        content: [{ type: 'text', text: 'Please provide a search query.' }],
        isError: true,
      };
    }
  
    const results = searchSpecification(query);
  
    if (results.length === 0) {
      return {
        content: [
          {
            type: 'text',
            text: `No results found for "${query}". Try a different search term.`,
          },
        ],
      };
    }
  
    let text = `# Search Results for "${query}"\n\n`;
    text += `Found matches in ${results.length} section(s):\n\n`;
  
    for (const result of results) {
      text += `## ${result.section}\n\n`;
      for (const match of result.matches) {
        text += `> ${match}\n\n`;
      }
    }
  
    text += `\n---\n\nUse \`get_specification\` with the section name to get the full content.`;
  
    return {
      content: [{ type: 'text', text }],
    };
  }

• src/tools/index.ts:203-216 (schema)

  The tool definition including name, description, and input schema for validation.

  {
    name: 'search_specification',
    description: 'Search the components.build specification for a specific term or concept. Returns matching sections and context.',
    inputSchema: {
      type: 'object',
      properties: {
        query: {
          type: 'string',
          description: 'The term or concept to search for (e.g., "aria", "keyboard", "CVA", "asChild")',
        },
      },
      required: ['query'],
    },
  },

• src/tools/index.ts:255-256 (registration)

  Registration of the tool handler in the executeTool switch statement.

  case 'search_specification':
    return handleSearchSpecification(args);

• src/docs/full-specification.ts:2157-2177 (helper)

  The core helper function that performs the actual search across all specification sections, returning matching lines grouped by section.

  export function searchSpecification(term: string): Array<{ section: string; matches: string[] }> {
    const results: Array<{ section: string; matches: string[] }> = [];
    const lowerTerm = term.toLowerCase();
  
    for (const [sectionName, content] of Object.entries(SPECIFICATION.sections)) {
      const lines = content.split('\n');
      const matches: string[] = [];
  
      for (const line of lines) {
        if (line.toLowerCase().includes(lowerTerm)) {
          matches.push(line.trim());
        }
      }
  
      if (matches.length > 0) {
        results.push({ section: sectionName, matches: matches.slice(0, 5) }); // Limit to 5 matches per section
      }
    }
  
    return results;
  }