antd-components-mcp

Instructions

Implementation Reference

• src/tools/list-component-examples.ts:15-27 (handler)

  The MCP tool handler that invokes the helper to fetch component examples and formats the response as structured MCP content.

      async ({ componentName }) => {
        const componentExamples = await listComponentExamples(componentName);
    
        return {
          content: [
            {
              type: "text",
              text: `${componentName} 组件的代码示例文档：
  ${componentExamples || '暂无代码示例'}`,
            },
          ],
        };
      },

• src/tools/list-component-examples.ts:14-14 (schema)

  Input schema using Zod, requiring a 'componentName' string parameter.

  { componentName: z.string() },

• src/tools/list-component-examples.ts:6-29 (registration)

  The tool registration function that attaches the tool to the MCP server, including name, description, schema, and handler.

  const registryTool = (server: McpServer) => {
    server.tool(
      "list-component-examples",
      `获取 Ant Design 特定组件的代码示例
  适用场景：
  1. 用户询问特定组件的示例时
  2. 用户想要实现某个功能时直接告知可使用的例子
  3. 生成页面前需要获取组件的示例代码`,
      { componentName: z.string() },
      async ({ componentName }) => {
        const componentExamples = await listComponentExamples(componentName);
    
        return {
          content: [
            {
              type: "text",
              text: `${componentName} 组件的代码示例文档：
  ${componentExamples || '暂无代码示例'}`,
            },
          ],
        };
      },
    );
  }

• src/tools/index.ts:3-11 (registration)

  Higher-level registration that imports and invokes all tool registry functions, including this one.

  import getComponentDocs from "./get-component-docs";
  import listComponentExamples from "./list-component-examples";
  import getComponentChangelog from "./get-component-changelog";
  import listComponents from "./list-components";
  
  export default function registryTools(server: McpServer) {
    [getComponentDocs, listComponentExamples, getComponentChangelog, listComponents].forEach((registryFn) => {
      registryFn(server)
    })

• src/utils/components.ts:83-115 (helper)

  Core helper function that locates the component directory, reads the example markdown file from disk (with caching), and returns the content or error message.

  export const listComponentExamples = async (componentName: string) => {
    const component = await findComponentByName(componentName);
  
    if (!component) {
      return "当前组件不存在";
    }
  
    const examplesMdPath = join(EXTRACTED_COMPONENTS_DATA_PATH, component.dirName, EXAMPLE_FILE_NAME);
  
    if (!existsSync(examplesMdPath)) {
      return `${component.name} 的示例代码不存在`;
    }
    try {
      const cacheComponentExample = componentCache.get('componentExample') || {}
      if (cacheComponentExample?.[component.name]) {
        return cacheComponentExample[component.name]
      }
  
      if (existsSync(examplesMdPath)) {
        const exampleResult = await readFile(examplesMdPath, "utf-8");
  
        cacheComponentExample[component.name] = exampleResult
        componentCache.set('componentExample', cacheComponentExample)
  
        return exampleResult
      }
  
      return await readFile(examplesMdPath, "utf-8");
    } catch (error) {
      console.error(`${component.name} 的示例代码不存在: ${(error as Error).message}`);
      return `${component.name} 的示例代码不存在`;
    }
  };