Visa Design System MCP Server

Instructions

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)
        }
      ]
    };
  }

• src/services/component-service.ts:113-118 (helper)

  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;
  }