Skip to main content
Glama
MarySuneela

Visa Design System MCP Server

by MarySuneela

search-design-tokens

Find design tokens by name or value to access Visa's Product Design System resources for consistent UI implementation.

Instructions

Search design tokens by name or value

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query for token names or values

Implementation Reference

  • Core implementation of the search-design-tokens tool. Filters design tokens from cache by matching query against name, value, description, usage, and aliases (case-insensitive).
    async searchTokens(query: string): Promise<DesignToken[]> { if (!query || typeof query !== 'string') { throw this.createError('INVALID_QUERY', 'Search query must be a non-empty string'); } const cachedData = this.dataManager.getCachedData(); if (!cachedData) { throw this.createError('NO_DATA', 'No design token data available'); } const searchTerm = query.toLowerCase(); return cachedData.designTokens.filter(token => { // Search in name if (token.name.toLowerCase().includes(searchTerm)) { return true; } // Search in value (convert to string for search) if (String(token.value).toLowerCase().includes(searchTerm)) { return true; } // Search in description if (token.description?.toLowerCase().includes(searchTerm)) { return true; } // Search in usage array if (token.usage?.some(usage => usage.toLowerCase().includes(searchTerm) )) { return true; } // Search in aliases if (token.aliases?.some(alias => alias.toLowerCase().includes(searchTerm) )) { return true; } return false; }); }
  • MCP server wrapper handler for search-design-tokens tool. Validates input query and delegates to DesignTokenService.searchTokens, formats response as JSON.
    private async handleSearchDesignTokens(args: Record<string, any>): Promise<CallToolResult> { const { query } = args; if (!query || typeof query !== 'string') { throw new McpError( ErrorCode.InvalidParams, 'Query parameter is required and must be a string' ); } const tokens = await this.designTokenService.searchTokens(query); return { content: [ { type: 'text', text: JSON.stringify({ tokens, count: tokens.length, query }, null, 2) } ] }; }
  • Tool registration in MCP server's getToolDefinitions(). Defines name, description, and input schema requiring 'query' string.
    { name: 'search-design-tokens', description: 'Search design tokens by name or value', inputSchema: { type: 'object', properties: { query: { type: 'string', description: 'Search query for token names or values' } }, required: ['query'] } },
  • Input schema for search-design-tokens tool: requires 'query' string parameter.
    query: { type: 'string', description: 'Search query for token names or values' } }, required: ['query'] } },
  • Switch case in handleToolCall that routes 'search-design-tokens' calls to the handler.
    case 'search-design-tokens': return await this.handleSearchDesignTokens(args);

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