get-component-docs

Retrieve detailed documentation for Ant Design components, including API properties and usage examples, to help developers implement UI elements correctly.

Instructions

获取 Ant Design 特定组件的详细文档适用场景：

用户询问如何使用特定组件
用户需要查看该组件的 api 属性

Input Schema

TableJSON Schema

Name	Required	Description	Default
`componentName`	Yes

Implementation Reference

src/tools/get-component-docs.ts:14-26 (handler)

The core handler function that retrieves component documentation using the helper function and formats it into the MCP response format with text content.

    async ({ componentName }) => {
      const documentation = await getComponentDocumentation(componentName);
      return {
        content: [
          {
            type: "text",
            text: `${componentName} 组件的文档：
${documentation}
如有版本说明需要提醒用户需要使用某个版本及以上的版本`,
          },
        ],
      };
    },

src/tools/get-component-docs.ts:13-13 (schema)
Zod schema defining the input parameter: componentName as a string.
```
{ componentName: z.string() },
```

src/tools/get-component-docs.ts:5-30 (registration)

The registration function that sets up the 'get-component-docs' tool on the MCP server, including name, description, schema, and handler.

/** 获取组件文档 */
const registryTool = (server: McpServer) => {
  server.tool(
    "get-component-docs",
    `获取 Ant Design 特定组件的详细文档
适用场景：
1. 用户询问如何使用特定组件
2. 用户需要查看该组件的 api 属性`,
    { componentName: z.string() },
    async ({ componentName }) => {
      const documentation = await getComponentDocumentation(componentName);
      return {
        content: [
          {
            type: "text",
            text: `${componentName} 组件的文档：
${documentation}
如有版本说明需要提醒用户需要使用某个版本及以上的版本`,
          },
        ],
      };
    },
  );
}

export default registryTool;

src/tools/index.ts:8-12 (registration)

Aggregates and invokes registration for all tools, including get-component-docs via its imported registry function.

export default function registryTools(server: McpServer) {
  [getComponentDocs, listComponentExamples, getComponentChangelog, listComponents].forEach((registryFn) => {
    registryFn(server)
  })
}

src/utils/components.ts:51-80 (helper)

Helper function that loads and caches the documentation for a specific component from the extracted data files.

export const getComponentDocumentation = async (componentName: string) => {
  const component = await findComponentByName(componentName);

  if (!component) {
    return ` "${componentName}" 组件文档不存在`;
  }

  const docPath = join(EXTRACTED_COMPONENTS_DATA_PATH, component.dirName, DOC_FILE_NAME);

  try {
    const cacheComponentDoc = componentCache.get('componentsDoc') || {}
    if (cacheComponentDoc?.[component.name]) {
      return cacheComponentDoc[component.name]
    }

    if (existsSync(docPath)) {
      const docResult = await readFile(docPath, "utf-8");

      cacheComponentDoc[component.name] = docResult
      componentCache.set('componentsDoc', cacheComponentDoc)

      return docResult
    }

    return `${component.name} 组件文档不存在`;
  } catch (error) {
    console.error(`获取 ${component.name} 组件文档错误: ${(error as Error).message}`);
    return `获取 ${component.name} 组件文档错误: ${(error as Error).message}`;
  }
};

antd-components-mcp