Get Component Examples
get_component_examplesRetrieve 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 |
Output Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| content | Yes | 过滤后的文档内容，包含组件描述和使用示例 | |
| tagName | Yes | 组件标签名 |
Implementation Reference
- 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, }, ], } } - 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);