get_component
Retrieve detailed documentation for Element-UI components including properties, events, slots, and example code to support Vue 2 development.
Instructions
获取 Element-UI 组件库中某个组件的详细信息。返回：含前缀的标签名（tagName）、描述（description）、文档 URL（documentation URL）、属性（props）、事件（events）、插槽（slots）、示例代码（example）、类型定义（dts）。
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| tagName | Yes | 组件标签名, 例如：el-button |
Implementation Reference
- src/tools/get-component.ts:37-88 (handler)The core handler logic for the 'get_component' tool. It retrieves component data from the componentObject, reads optional example Markdown and TypeScript definition files, assembles the result, and returns structured JSON content.
async ({ tagName }) => { const component = componentObject[tagName] if (!component) { throw new Error(`Component "${tagName}" not found. Available components: ${Object.keys(componentObject).join(', ')}`) } // 读取示例代码（MD文件） let examples = '' try { const mdPath = path.join(__dirname, '../data/docs', `${tagName}.md`) if (fs.existsSync(mdPath)) { examples = fs.readFileSync(mdPath, 'utf8') } } catch (error) { console.warn(`Failed to read examples for ${tagName}:`, error) } // 读取类型定义（DTS文件） let dts = '' try { const dtsPath = path.join(__dirname, '../examples', `${tagName}.d.ts`) if (fs.existsSync(dtsPath)) { dts = fs.readFileSync(dtsPath, 'utf8') } } catch (error) { console.warn(`Failed to read dts for ${tagName}:`, error) } const result = { tagName: component.tagName, description: component.description, docUrl: component.docUrl, props: component.props || [], events: component.events || [], slots: component.slots || [], methods: component.methods || [], examples, dts: dts, } return { structuredContent: result, content: [ { type: 'text' as const, text: JSON.stringify(result, null, 2), }, ], } } ) - src/tools/get-component.ts:18-36 (schema)Input and output schemas defined using Zod for the 'get_component' tool, specifying the tagName input and detailed output structure for component information.
{ title: 'Get Element-UI Component', description: '获取 Element-UI 组件库中某个组件的详细信息。返回：含前缀的标签名（tagName）、描述（description）、文档 URL（documentation URL）、属性（props）、事件（events）、插槽（slots）、示例代码（example）、类型定义（dts）。', inputSchema: z.object({ tagName: z.string().describe('组件标签名, 例如：el-button'), }), outputSchema: z.object({ tagName: z.string().describe('组件标签名, 例如：el-button'), description: z.string().describe('组件描述'), docUrl: z.string().url().describe('组件文档URL'), props: z.any().describe('组件属性列表'), slots: z.any().describe('组件插槽列表'), methods: z.any().describe('组件方法(Methods)列表'), events: z.any().describe('组件事件(Events)列表'), examples: z.string().describe('组件用法示例文档内容'), dts: z.string().describe('组件的TypeScript类型定义'), }), }, - src/tools/get-component.ts:15-89 (registration)The registerGetComponent function that registers the 'get_component' tool on the MCP server, including title, description, schemas, and handler.
export function registerGetComponent(server: McpServer) { server.registerTool( 'get_component', { title: 'Get Element-UI Component', description: '获取 Element-UI 组件库中某个组件的详细信息。返回：含前缀的标签名（tagName）、描述（description）、文档 URL（documentation URL）、属性（props）、事件（events）、插槽（slots）、示例代码（example）、类型定义（dts）。', inputSchema: z.object({ tagName: z.string().describe('组件标签名, 例如：el-button'), }), outputSchema: z.object({ tagName: z.string().describe('组件标签名, 例如：el-button'), description: z.string().describe('组件描述'), docUrl: z.string().url().describe('组件文档URL'), props: z.any().describe('组件属性列表'), slots: z.any().describe('组件插槽列表'), methods: z.any().describe('组件方法(Methods)列表'), events: z.any().describe('组件事件(Events)列表'), examples: z.string().describe('组件用法示例文档内容'), dts: z.string().describe('组件的TypeScript类型定义'), }), }, async ({ tagName }) => { const component = componentObject[tagName] if (!component) { throw new Error(`Component "${tagName}" not found. Available components: ${Object.keys(componentObject).join(', ')}`) } // 读取示例代码（MD文件） let examples = '' try { const mdPath = path.join(__dirname, '../data/docs', `${tagName}.md`) if (fs.existsSync(mdPath)) { examples = fs.readFileSync(mdPath, 'utf8') } } catch (error) { console.warn(`Failed to read examples for ${tagName}:`, error) } // 读取类型定义（DTS文件） let dts = '' try { const dtsPath = path.join(__dirname, '../examples', `${tagName}.d.ts`) if (fs.existsSync(dtsPath)) { dts = fs.readFileSync(dtsPath, 'utf8') } } catch (error) { console.warn(`Failed to read dts for ${tagName}:`, error) } const result = { tagName: component.tagName, description: component.description, docUrl: component.docUrl, props: component.props || [], events: component.events || [], slots: component.slots || [], methods: component.methods || [], examples, dts: dts, } return { structuredContent: result, content: [ { type: 'text' as const, text: JSON.stringify(result, null, 2), }, ], } } ) } - src/index.ts:6-30 (registration)Top-level import and registration call for the 'get_component' tool in the main server setup.
import { registerGetComponent } from './tools/get-component.js'; import { registerSearchComponents } from './tools/search-components.js'; import { registerGetComponentExamples } from './tools/get-component-examples.js'; import { registerGetComponentProps } from './tools/get-component-props.js'; import { registerGetComponentEvents } from './tools/get-component-events.js'; import { registerGetComponentSlots } from './tools/get-component-slots.js'; import { registerGetComponentMethods } from './tools/get-component-methods.js'; export function createServer() { const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const VERSION = ( JSON.parse( fs.readFileSync(path.join(__dirname, '../package.json'), 'utf8'), ) as { version: string } ).version; const server = new McpServer({ name: 'element-ui-mcp', version: VERSION, }); // Register tool modules registerListComponents(server); registerGetComponent(server);