get_component_examples

Retrieve specific usage examples for Element-UI components to understand implementation patterns and generate accurate Vue 2 code.

Instructions

获取 Element-UI 组件的具体使用示例。直接返回过滤后的文档内容。

Input Schema

TableJSON Schema

Name	Required	Description	Default
`tagName`	Yes	组件标签名, 例如：el-button

Implementation Reference

src/tools/get-component-examples.ts:29-66 (handler)

The main handler function for the 'get_component_examples' tool. It checks if the component exists, reads the corresponding Markdown example file from the examples directory, and returns structured content with the example documentation.

async ({ tagName }) => {
  const component = componentObject[tagName]

  if (!component) {
    throw new Error(`Component "${tagName}" not found. Available components: ${Object.keys(componentObject).join(', ')}`)
  }

  // 读取过滤后的文档内容
  let content = ''
  try {
    const mdPath = path.join(__dirname, '../examples', `${tagName}.md`)
    if (fs.existsSync(mdPath)) {
      content = fs.readFileSync(mdPath, 'utf8')
    } else {
      content = `未找到 ${tagName} 组件的示例文档。`
    }
  } catch (error) {
    console.warn(`Failed to read examples for ${tagName}:`, error)
    content = `读取 ${tagName} 组件示例文档时出错。`
  }

  console.log('content',content)

  const result = {
    tagName,
    content,
  }

  return {
    structuredContent: result,
    content: [
      {
        type: 'text' as const,
        text: content,
      },
    ],
  }
}

src/tools/get-component-examples.ts:18-28 (schema)

Input and output schemas for the get_component_examples tool: input requires tagName (string), output returns tagName and content (string).

{
  title: 'Get Component Examples',
  description: '获取 Element-UI 组件的具体使用示例。直接返回过滤后的文档内容。',
  inputSchema: z.object({
    tagName: z.string().describe('组件标签名, 例如：el-button'),
  }),
  outputSchema: z.object({
    tagName: z.string().describe('组件标签名'),
    content: z.string().describe('过滤后的文档内容，包含组件描述和使用示例'),
  }),
},

src/tools/get-component-examples.ts:15-68 (registration)

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

export function registerGetComponentExamples(server: McpServer) {
  server.registerTool(
    'get_component_examples',
    {
      title: 'Get Component Examples',
      description: '获取 Element-UI 组件的具体使用示例。直接返回过滤后的文档内容。',
      inputSchema: z.object({
        tagName: z.string().describe('组件标签名, 例如：el-button'),
      }),
      outputSchema: z.object({
        tagName: z.string().describe('组件标签名'),
        content: z.string().describe('过滤后的文档内容，包含组件描述和使用示例'),
      }),
    },
    async ({ tagName }) => {
      const component = componentObject[tagName]

      if (!component) {
        throw new Error(`Component "${tagName}" not found. Available components: ${Object.keys(componentObject).join(', ')}`)
      }

      // 读取过滤后的文档内容
      let content = ''
      try {
        const mdPath = path.join(__dirname, '../examples', `${tagName}.md`)
        if (fs.existsSync(mdPath)) {
          content = fs.readFileSync(mdPath, 'utf8')
        } else {
          content = `未找到 ${tagName} 组件的示例文档。`
        }
      } catch (error) {
        console.warn(`Failed to read examples for ${tagName}:`, error)
        content = `读取 ${tagName} 组件示例文档时出错。`
      }

      console.log('content',content)

      const result = {
        tagName,
        content,
      }

      return {
        structuredContent: result,
        content: [
          {
            type: 'text' as const,
            text: content,
          },
        ],
      }
    }
  )
}

src/index.ts:32-32 (registration)
Top-level registration call to registerGetComponentExamples in the main server creation function.
```
registerGetComponentExamples(server);
```

Element-UI MCP Server