shadcn-ui MCP Server

Instructions

Implementation Reference

• src/index.ts:309-330 (handler)

  The primary handler function for the 'get_component_details' tool. It validates the input component name, checks the component cache, fetches details using fetchComponentDetails if not cached, caches the result, and returns a standardized JSON response.

  private async handleGetComponentDetails(args: any) {
    const componentName = this.validateComponentName(args);
  
    try {
      // Check cache first
      if (this.componentCache.has(componentName)) {
        return this.createSuccessResponse(
          this.componentCache.get(componentName)
        );
      }
  
      // Fetch component details
      const componentInfo = await this.fetchComponentDetails(componentName);
  
      // Save to cache
      this.componentCache.set(componentName, componentInfo);
  
      return this.createSuccessResponse(componentInfo);
    } catch (error) {
      this.handleAxiosError(error, `Component "${componentName}"`);
    }
  }

• src/index.ts:117-132 (registration)

  Registration of the 'get_component_details' tool in the ListToolsRequestSchema handler, including name, description, and input schema specifying the required 'componentName' parameter.

  {
    name: 'get_component_details',
    description:
      'Get detailed information about a specific shadcn/ui component',
    inputSchema: {
      type: 'object',
      properties: {
        componentName: {
          type: 'string',
          description:
            'Name of the shadcn/ui component (e.g., "accordion", "button")',
        },
      },
      required: ['componentName'],
    },
  },

• src/index.ts:169-170 (handler)

  Switch case in CallToolRequestSchema handler that routes calls to the 'get_component_details' tool to the handleGetComponentDetails method.

  case 'get_component_details':
    return await this.handleGetComponentDetails(request.params.arguments);

• src/index.ts:337-372 (helper)

  Key helper function called by the handler to fetch and parse detailed component information from the shadcn/ui documentation website using axios and cheerio, extracting description, installation, usage, and props.

  private async fetchComponentDetails(
    componentName: string
  ): Promise<ComponentInfo> {
    const response = await this.axiosInstance.get(
      `${this.SHADCN_DOCS_URL}/docs/components/${componentName}`
    );
    const $ = cheerio.load(response.data);
  
    // Extract component information
    const title = $('h1').first().text().trim();
  
    // Extract description properly
    const description = this.extractDescription($);
  
    // Extract GitHub source code link
    const sourceUrl = `${this.SHADCN_GITHUB_URL}/tree/main/apps/www/registry/default/ui/${componentName}`;
  
    // Extract installation instructions
    const installation = this.extractInstallation($);
  
    // Extract usage examples
    const usage = this.extractUsage($);
  
    // Extract variant information
    const props = this.extractVariants($, componentName);
  
    return {
      name: componentName,
      description,
      url: `${this.SHADCN_DOCS_URL}/docs/components/${componentName}`,
      sourceUrl,
      installation: installation.trim(),
      usage: usage.trim(),
      props: Object.keys(props).length > 0 ? props : undefined,
    };
  }

• src/index.ts:244-252 (helper)

  Helper function used by the handler to validate and normalize the 'componentName' input parameter.

  private validateComponentName(args: any): string {
    if (!args?.componentName || typeof args.componentName !== 'string') {
      throw new McpError(
        ErrorCode.InvalidParams,
        'Component name is required and must be a string'
      );
    }
    return args.componentName.toLowerCase();
  }