Element-UI MCP Server

Instructions

Implementation Reference

• src/tools/list-components.ts:31-48 (handler)

  The handler function that lists all Element-UI components by mapping from componentObject data, returning structured content and JSON text.

  async () => {
    const components = Object.values(componentObject)
    const list = components.map(component => ({
      tagName: component.tagName,
      description: component.description,
      docUrl: component.docUrl,
    }))
  
    return {
      structuredContent: { components: list },
      content: [
        {
          type: 'text' as const,
          text: JSON.stringify({ components: list }, null, 2),
        },
      ],
    }
  }

• src/tools/list-components.ts:16-29 (schema)

  Input schema (empty) and output schema defining an array of components with tagName, description, and docUrl.

  inputSchema: {},
  outputSchema: {
    components: z
      .array(
        z.object({
          tagName: z.string().describe('组件标签名, 例如：el-button'),
          description: z.string().describe('组件描述'),
          docUrl: z.string().url().describe('组件文档URL'),
        })
      )
      .describe(
        '一份包含组件及其标签名称、描述、文档 URL 的列表（按标签名称排序）。'
      ),
  },

• src/tools/list-components.ts:9-50 (registration)

  The registerListComponents function that registers the 'list_components' tool with the MCP server, including schema and handler.

  export function registerListComponents(server: McpServer) {
    server.registerTool(
      'list_components',
      {
        title: 'List Element-UI Components',
        description:
          '列出 Element-UI 组件库中所有可用的组件。每个条目返回：含前缀的标签名（tagName）、描述（description）、文档 URL（documentation URL）。结果按标签名（升序）排序。',
        inputSchema: {},
        outputSchema: {
          components: z
            .array(
              z.object({
                tagName: z.string().describe('组件标签名, 例如：el-button'),
                description: z.string().describe('组件描述'),
                docUrl: z.string().url().describe('组件文档URL'),
              })
            )
            .describe(
              '一份包含组件及其标签名称、描述、文档 URL 的列表（按标签名称排序）。'
            ),
        },
      },
      async () => {
        const components = Object.values(componentObject)
        const list = components.map(component => ({
          tagName: component.tagName,
          description: component.description,
          docUrl: component.docUrl,
        }))
  
        return {
          structuredContent: { components: list },
          content: [
            {
              type: 'text' as const,
              text: JSON.stringify({ components: list }, null, 2),
            },
          ],
        }
      }
    )
  }

• src/index.ts:29-29 (registration)

  Invocation of registerListComponents in the main server creation function.

  registerListComponents(server);