search_components
Find shadcn/ui components by keyword to access documentation and examples for building interfaces.
Instructions
Search for shadcn/ui components by keyword
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query to find relevant components |
Implementation Reference
- src/index.ts:623-637 (handler)The main handler function for the search_components tool. It validates the query, ensures the components list is loaded, performs the search using a helper method, and returns the results.
private async handleSearchComponents(args: any) { const query = this.validateSearchQuery(args); try { // Ensure components list is loaded await this.ensureComponentsListLoaded(); // Filter components matching the search query const results = this.searchComponentsByQuery(query); return this.createSuccessResponse(results); } catch (error) { this.handleAxiosError(error, 'Search failed'); } } - src/index.ts:148-161 (registration)Registration of the search_components tool in the ListTools handler, defining name, description, and input schema.
{ name: 'search_components', description: 'Search for shadcn/ui components by keyword', inputSchema: { type: 'object', properties: { query: { type: 'string', description: 'Search query to find relevant components', }, }, required: ['query'], }, }, - src/index.ts:151-160 (schema)JSON schema defining the input parameters for the search_components tool (query string required).
inputSchema: { type: 'object', properties: { query: { type: 'string', description: 'Search query to find relevant components', }, }, required: ['query'], }, - src/index.ts:661-672 (helper)Helper function implementing the core search logic by filtering cached components where name or description matches the query.
private searchComponentsByQuery(query: string): ComponentInfo[] { if (!this.componentsListCache) { return []; } return this.componentsListCache.filter((component) => { return ( component.name.includes(query) || component.description.toLowerCase().includes(query) ); }); } - src/index.ts:260-268 (helper)Helper function for input validation specific to the search_components tool query parameter.
private validateSearchQuery(args: any): string { if (!args?.query || typeof args.query !== 'string') { throw new McpError( ErrorCode.InvalidParams, 'Search query is required and must be a string' ); } return args.query.toLowerCase(); }