list-component-examples
Retrieve code examples for specific Ant Design components to implement features or understand usage. Input the component name to generate relevant code snippets.
Instructions
获取 Ant Design 特定组件的代码示例 适用场景：
用户询问特定组件的示例时
用户想要实现某个功能时直接告知可使用的例子
生成页面前需要获取组件的示例代码
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes |
Implementation Reference
- The tool handler that fetches component examples using the helper function and returns them formatted as text content.async ({ componentName }) => { const componentExamples = await listComponentExamples(componentName); return { content: [ { type: "text", text: `${componentName} 组件的代码示例文档： ${componentExamples || '暂无代码示例'}`, }, ], }; },
- Input schema validating the componentName parameter as a string using Zod.{ componentName: z.string() },
- src/tools/list-component-examples.ts:6-29 (registration)Registers the 'list-component-examples' tool on 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/utils/components.ts:83-115 (helper)Helper function that finds the component, loads and caches its example markdown file from disk.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} 的示例代码不存在`; } };
- src/tools/index.ts:8-12 (registration)Central registry function that invokes individual tool registry functions, including this one.export default function registryTools(server: McpServer) { [getComponentDocs, listComponentExamples, getComponentChangelog, listComponents].forEach((registryFn) => { registryFn(server) }) }