list-component-examples
Get code examples for Ant Design components to implement UI features or understand component usage patterns.
Instructions
获取 Ant Design 特定组件的代码示例 适用场景：
用户询问特定组件的示例时
用户想要实现某个功能时直接告知可使用的例子
生成页面前需要获取组件的示例代码
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes |
Implementation Reference
- 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 || '暂无代码示例'}`, }, ], }; },
- 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} 的示例代码不存在`; } };