get-component-examples
Retrieve code examples for Visa Design System components to implement UI elements correctly and consistently.
Instructions
Get code examples for a specific component
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name |
Implementation Reference
- src/mcp-server.ts:202-215 (registration)Tool registration definition including name, description, and input schema for get-component-examples
{ name: 'get-component-examples', description: 'Get code examples for a specific component', inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'Component name' } }, required: ['name'] } }, - src/mcp-server.ts:483-510 (handler)MCP protocol handler for get-component-examples tool: validates input, delegates to ComponentService, formats JSON response as CallToolResult
/** * Handle get-component-examples tool call */ private async handleGetComponentExamples(args: Record<string, any>): Promise<CallToolResult> { const { name } = args; if (!name || typeof name !== 'string') { throw new McpError( ErrorCode.InvalidParams, 'Component name is required and must be a string' ); } const examples = await this.componentService.getComponentExamples(name); return { content: [ { type: 'text', text: JSON.stringify({ component: name, examples, count: examples.length }, null, 2) } ] }; } - Helper method in ComponentService that retrieves examples for a given component from cached data
* Get component examples and code snippets */ async getComponentExamples(name: string): Promise<ComponentExample[]> { const component = await this.getComponent(name); return component.examples; }