search_components

Find shadcn/ui components by keyword to access documentation and usage examples for building user 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:581-595 (handler)

Main handler function for the search_components tool. Validates the search query, ensures the components list is loaded, calls the search helper, and returns formatted 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:145-154 (schema)

Input schema definition for the search_components tool, specifying a required 'query' string parameter.

inputSchema: {
  type: "object",
  properties: {
    query: {
      type: "string",
      description: "Search query to find relevant components",
    },
  },
  required: ["query"],
},

src/index.ts:142-155 (registration)

Tool registration in the ListTools response, including 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:167-168 (registration)
Dispatch case in the CallToolRequest handler that routes search_components calls to the handler function.
```
case "search_components":
  return await this.handleSearchComponents(request.params.arguments);
```

src/index.ts:619-630 (helper)

Helper function that performs the actual search by filtering the cached components list based on the query matching name or description.

private searchComponentsByQuery(query: string): ComponentInfo[] {
  if (!this.componentsListCache) {
    return [];
  }
  
  return this.componentsListCache.filter(component => {
    return (
      component.name.includes(query) ||
      component.description.toLowerCase().includes(query)
    );
  });
}

shadcn-ui MCP Server