shadcn-ui MCP Server

Instructions

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