search-components
Find components in Visa's Design System by name, description, or other search criteria to access specifications and usage guidelines.
Instructions
Search components by name, description, or other criteria
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query for components |
Implementation Reference
- src/mcp-server.ts:515-539 (handler)The primary handler function for the 'search-components' MCP tool. Validates the query argument, delegates the search to ComponentService, and returns a JSON-formatted response with search results.
private async handleSearchComponents(args: Record<string, any>): Promise<CallToolResult> { const { query } = args; if (!query || typeof query !== 'string') { throw new McpError( ErrorCode.InvalidParams, 'Query parameter is required and must be a string' ); } const components = await this.componentService.searchComponents(query); return { content: [ { type: 'text', text: JSON.stringify({ components, count: components.length, query }, null, 2) } ] }; } - src/mcp-server.ts:217-229 (schema)The input schema and metadata definition for the 'search-components' tool, registered in the listTools response.
name: 'search-components', description: 'Search components by name, description, or other criteria', inputSchema: { type: 'object', properties: { query: { type: 'string', description: 'Search query for components' } }, required: ['query'] } }, - src/mcp-server.ts:306-307 (registration)Registration of the tool handler in the main tool call switch statement within handleToolCall method.
case 'search-components': return await this.handleSearchComponents(args); - The core helper method implementing the component search logic by filtering cached components based on matches in name, description, category, guidelines, and props.
async searchComponents(query: string): Promise<Component[]> { if (!query || typeof query !== 'string') { throw this.createError('INVALID_QUERY', 'Search query must be a non-empty string'); } const cachedData = this.dataManager.getCachedData(); if (!cachedData) { throw this.createError('NO_DATA', 'No component data available'); } const searchTerm = query.toLowerCase(); return cachedData.components.filter(component => { // Search in name if (component.name.toLowerCase().includes(searchTerm)) { return true; } // Search in description if (component.description.toLowerCase().includes(searchTerm)) { return true; } // Search in category if (component.category.toLowerCase().includes(searchTerm)) { return true; } // Search in guidelines if (component.guidelines.some(guideline => guideline.toLowerCase().includes(searchTerm) )) { return true; } // Search in prop names and descriptions if (component.props.some(prop => prop.name.toLowerCase().includes(searchTerm) || prop.description.toLowerCase().includes(searchTerm) )) { return true; } return false; }); }