list-components
Retrieve available Ant Design UI components to integrate into your codebase. This tool provides the component list needed for building user interfaces.
Instructions
当用户请求一个新的用户界面（UI）使用 Ant Design 组件时使用此工具。 此工具仅返回可用的组件列表。 调用此工具后，你必须编辑或添加文件，以便将代码片段集成到代码库中
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Implementation Reference
- src/tools/list-components.ts:10-20 (handler)The handler function for the 'list-components' tool. It loads the list of available Ant Design components using loadComponentsList() and returns a text message containing the JSON-stringified list of components (excluding dirName).
调用此工具后，你必须编辑或添加文件，以便将代码片段集成到代码库中`, async () => { const components = await loadComponentsList(); return { content: [ { type: "text", text: `以下是可用的组件：${JSON.stringify(components.map(({ dirName, ...restProps }) => restProps))}`, }, ], }; }); - src/tools/list-components.ts:6-21 (registration)Registers the 'list-components' tool on the MCP server, including the tool name, description in Chinese, and the handler function.
const registryTool = (server: McpServer) => { server.tool( "list-components", `当用户请求一个新的用户界面（UI）使用 Ant Design 组件时使用此工具。 此工具仅返回可用的组件列表。 调用此工具后，你必须编辑或添加文件，以便将代码片段集成到代码库中`, async () => { const components = await loadComponentsList(); return { content: [ { type: "text", text: `以下是可用的组件：${JSON.stringify(components.map(({ dirName, ...restProps }) => restProps))}`, }, ], }; }); } - src/tools/index.ts:8-12 (registration)Top-level registration function that invokes the listComponents registry function (imported from './list-components') along with other tools on the MCP server.
export default function registryTools(server: McpServer) { [getComponentDocs, listComponentExamples, getComponentChangelog, listComponents].forEach((registryFn) => { registryFn(server) }) } - src/utils/components.ts:20-38 (helper)Helper function that loads the list of Ant Design components from a cached value or the JSON file at EXTRACTED_COMPONENTS_LIST_PATH, parsing it and caching the result.
export async function loadComponentsList() { try { const cacheComponentList = componentCache.get('componentsList') if (cacheComponentList) { return cacheComponentList } const componentList = await readFile(EXTRACTED_COMPONENTS_LIST_PATH, "utf-8"); const componentListJson = JSON.parse(componentList) as ComponentData[] componentCache.set('componentsList', componentListJson) return componentListJson } catch (error) { console.error(`加载组件列表错误: ${(error as Error).message}`); return []; } }