shadcn-ui MCP Server

Instructions

Implementation Reference

• src/index.ts:128-141 (registration)

  Registration of the 'get_component_examples' tool in the ListToolsRequestSchema handler, including name, description, and input schema requiring 'componentName'.

  {
    name: "get_component_examples",
    description: "Get usage examples for 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:460-470 (handler)

  The main handler function for the 'get_component_examples' tool. Validates the component name, fetches examples using helper methods, formats the response, and handles errors.

  private async handleGetComponentExamples(args: any) {
    const componentName = this.validateComponentName(args);
  
    try {
      // Fetch component examples
      const examples = await this.fetchComponentExamples(componentName);
      return this.createSuccessResponse(examples);
    } catch (error) {
      this.handleAxiosError(error, `Component examples for "${componentName}"`);
    }
  }

• src/index.ts:165-166 (registration)

  Dispatch/registration in the switch statement of the CallToolRequestSchema handler that routes calls to the tool handler.

  case "get_component_examples":
    return await this.handleGetComponentExamples(request.params.arguments);

• src/index.ts:477-490 (helper)

  Core helper function that implements the logic to scrape examples from shadcn/ui docs and GitHub for the given component.

  private async fetchComponentExamples(componentName: string): Promise<ComponentExample[]> {
    const response = await this.axiosInstance.get(`${this.SHADCN_DOCS_URL}/docs/components/${componentName}`);
    const $ = cheerio.load(response.data);
    
    const examples: ComponentExample[] = [];
    
    // Collect examples from different sources
    this.collectGeneralCodeExamples($, examples);
    this.collectSectionExamples($, "Usage", "Basic usage example", examples);
    this.collectSectionExamples($, "Link", "Link usage example", examples);
    await this.collectGitHubExamples(componentName, examples);
    
    return examples;
  }

• src/index.ts:50-56 (schema)

  TypeScript interface defining the structure of component examples returned by the tool.

   * Interface for component example
   */
  interface ComponentExample {
    title: string;
    code: string;
    description?: string;
  }