shadcn-ui MCP Server

Instructions

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)
      );
    });
  }