Skip to main content
Glama
MarySuneela

Visa Design System MCP Server

by MarySuneela

get-design-tokens

Access and filter design tokens from Visa's Design System by category (color, typography, spacing, elevation, motion) or deprecated status for consistent UI implementation.

Instructions

Get design tokens with optional category filtering

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
categoryNoFilter tokens by category (color, typography, spacing, elevation, motion)
deprecatedNoFilter by deprecated status (true for deprecated, false for active)

Implementation Reference

  • MCP handler function that executes the get-design-tokens tool: calls DesignTokenService.getTokens with args and returns formatted JSON response with token list, count, and category.
    private async handleGetDesignTokens(args: Record<string, any>): Promise<CallToolResult> { const tokens = await this.designTokenService.getTokens(args); return { content: [ { type: 'text', text: JSON.stringify({ tokens, count: tokens.length, category: args.category || 'all' }, null, 2) } ] }; }
  • Input schema definition for the get-design-tokens tool, defining optional category filter (enum) and deprecated boolean filter.
    inputSchema: { type: 'object', properties: { category: { type: 'string', description: 'Filter tokens by category (color, typography, spacing, elevation, motion)', enum: ['color', 'typography', 'spacing', 'elevation', 'motion'] }, deprecated: { type: 'boolean', description: 'Filter by deprecated status (true for deprecated, false for active)' } } }
  • Tool registration in getToolDefinitions(): defines name, description, and inputSchema for get-design-tokens.
    { name: 'get-design-tokens', description: 'Get design tokens with optional category filtering', inputSchema: { type: 'object', properties: { category: { type: 'string', description: 'Filter tokens by category (color, typography, spacing, elevation, motion)', enum: ['color', 'typography', 'spacing', 'elevation', 'motion'] }, deprecated: { type: 'boolean', description: 'Filter by deprecated status (true for deprecated, false for active)' } } } },
  • Switch case in handleToolCall that routes get-design-tokens calls to the handler function.
    case 'get-design-tokens': return await this.handleGetDesignTokens(args);
  • Core helper method in DesignTokenService that fetches design tokens from cache and applies optional filters (category, deprecated).
    async getTokens(options?: DesignTokenSearchOptions): Promise<DesignToken[]> { const cachedData = this.dataManager.getCachedData(); if (!cachedData) { throw this.createError('NO_DATA', 'No design token data available', [ 'Ensure data files are loaded', 'Check data directory configuration' ]); } let tokens = cachedData.designTokens; // Apply filters if provided if (options) { tokens = this.filterTokens(tokens, options); } return tokens; }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/MarySuneela/mcp-vpds'

If you have feedback or need assistance with the MCP directory API, please join our Discord server