feat: add branding support for TalkToFigma, refactor deep link and server name usage

Author: claude

package.json

@@ -3,6 +3,12 @@
   "productName": "TalkToFigma Desktop",
   "version": "2.0.15",
   "description": "Bridge between Figma and AI tools (Cursor, Claude Code) using Model Context Protocol",
+  "branding": {
+    "shortName": "TalkToFigma",
+    "mcpServerName": "TalkToFigmaDesktop",
+    "mcpServerDirName": "TalkToFigma",
+    "deepLinkScheme": "talktofigma"
+  },
   "type": "module",
   "main": ".vite/build/main.cjs",
   "scripts": {

src/components/mcp/McpClientItem.tsx

@@ -12,6 +12,7 @@ import { ConfigCodeBlock } from './ConfigCodeBlock'
 import type { McpClient } from '@/lib/mcp/client-configs'
 import { formatClientConfig } from '@/lib/mcp/client-configs'
 import { useToast } from '@/hooks/use-toast'
+import { BRANDING } from '@/shared/branding'
 
 interface McpClientItemProps {
   client: McpClient
@@ -51,7 +52,7 @@ export function McpClientItem({ client }: McpClientItemProps) {
     const base64Config = btoa(configJson)
     console.log('Base64 Config:', base64Config)
 
-    const deepLink = `cursor://anysphere.cursor-deeplink/mcp/install?name=TalkToFigmaDesktop&config=${base64Config}`
+    const deepLink = `cursor://anysphere.cursor-deeplink/mcp/install?name=${BRANDING.mcpServerName}&config=${base64Config}`
     console.log('Full DeepLink:', deepLink)
 
     window.location.href = deepLink
@@ -66,7 +67,7 @@ export function McpClientItem({ client }: McpClientItemProps) {
     if (client.id === 'cursor' || client.id === 'vscode' || client.id === 'antigravity') {
       const config = {
         mcpServers: {
-          TalkToFigmaDesktop: {
+          [BRANDING.mcpServerName]: {
             command: 'node',
             args: [stdioPath]
           }
@@ -81,12 +82,12 @@ export function McpClientItem({ client }: McpClientItemProps) {
     if (client.id === 'claude-code') {
       // Wrap path in quotes if it contains spaces
       const quotedPath = stdioPath.includes(' ') ? `"${stdioPath}"` : stdioPath
-      return `claude mcp add TalkToFigmaDesktop node ${quotedPath}`
+      return `claude mcp add ${BRANDING.mcpServerName} node ${quotedPath}`
     }
     if (client.id === 'codex') {
       // Codex requires `--` before the executable command.
       const shellQuotedPath = `'${stdioPath.replace(/'/g, `'\\''`)}'`
-      return `codex mcp add TalkToFigmaDesktop -- node ${shellQuotedPath}`
+      return `codex mcp add ${BRANDING.mcpServerName} -- node ${shellQuotedPath}`
     }
     return client.cliCommand || ''
   }
@@ -101,7 +102,7 @@ export function McpClientItem({ client }: McpClientItemProps) {
             <Separator />
             <h4 className="text-sm font-semibold mb-2">Deep Link</h4>
             <p className="text-sm text-muted-foreground">
-              Click the button to open Cursor and install TalkToFigmaDesktop
+              Click the button to open Cursor and install {BRANDING.mcpServerName}
             </p>
             <Button
               onClick={handleDeepLink}

src/lib/mcp/client-configs.ts

@@ -4,6 +4,8 @@
  * Defines all supported MCP clients and their configuration formats
  */
 
+import { BRANDING } from '@/shared/branding'
+
 export type InstallMethod = 'deeplink' | 'cli' | 'auto-config' | 'manual' | 'coming-soon'
 
 export interface McpClient {
@@ -26,17 +28,17 @@ export const MCP_CLIENTS: Record<string, McpClient> = {
     id: 'cursor',
     displayName: 'Cursor',
     configFormat: 'deeplink',
-    serverName: 'TalkToFigmaDesktop',
+    serverName: BRANDING.mcpServerName,
     installMethod: 'deeplink',
     description: 'Use Cursor to install the MCP server',
-    deepLink: 'cursor://anysphere.cursor-deeplink/mcp/install?name=TalkToFigmaDesktop&config=' +
+    deepLink: `cursor://anysphere.cursor-deeplink/mcp/install?name=${BRANDING.mcpServerName}&config=` +
       encodeURIComponent(JSON.stringify({
         command: 'node',
         args: ['<STDIO_SERVER_PATH>']  // Will be replaced with actual path
       })),
     config: {
       mcpServers: {
-        TalkToFigmaDesktop: {
+        [BRANDING.mcpServerName]: {
           command: 'node',
           args: ['<STDIO_SERVER_PATH>']  // Replace with actual path to mcp-stdio-server.js
         }
@@ -47,18 +49,18 @@ export const MCP_CLIENTS: Record<string, McpClient> = {
       'The server path (~/.talktofigma/server) is automatically configured',
       'Cursor will open and show the MCP configuration dialog',
       'Click "Connect" to complete the installation',
-      'TalkToFigmaDesktop will be added to your MCP servers'
+      `${BRANDING.mcpServerName} will be added to your MCP servers`
     ]
   },
 
   claudeCode: {
     id: 'claude-code',
     displayName: 'Claude Code',
     configFormat: 'cli',
-    serverName: 'TalkToFigmaDesktop',
+    serverName: BRANDING.mcpServerName,
     installMethod: 'cli',
     description: 'Use Claude Code to install the MCP server',
-    cliCommand: 'claude mcp add TalkToFigmaDesktop node <STDIO_SERVER_PATH>',
+    cliCommand: `claude mcp add ${BRANDING.mcpServerName} node <STDIO_SERVER_PATH>`,
     instructions: [
       'Copy the command above (server path is pre-filled)',
       'Open your terminal',
@@ -72,16 +74,16 @@ export const MCP_CLIENTS: Record<string, McpClient> = {
     id: 'codex',
     displayName: 'Codex CLI',
     configFormat: 'cli',
-    serverName: 'TalkToFigmaDesktop',
+    serverName: BRANDING.mcpServerName,
     installMethod: 'cli',
     description: 'Use Codex CLI to install the MCP server',
-    cliCommand: 'codex mcp add TalkToFigmaDesktop -- node <STDIO_SERVER_PATH>',
+    cliCommand: `codex mcp add ${BRANDING.mcpServerName} -- node <STDIO_SERVER_PATH>`,
     instructions: [
       'Copy the command above (server path is pre-filled)',
       'Open your terminal',
       'Paste and run the command',
-      'Use codex mcp list to verify TalkToFigmaDesktop is enabled',
-      'If a malformed entry exists, run codex mcp remove TalkToFigmaDesktop and add it again'
+      `Use codex mcp list to verify ${BRANDING.mcpServerName} is enabled`,
+      `If a malformed entry exists, run codex mcp remove ${BRANDING.mcpServerName} and add it again`
     ]
   },
 
@@ -90,12 +92,12 @@ export const MCP_CLIENTS: Record<string, McpClient> = {
     displayName: 'VS Code',
     configPath: '~/.vscode/mcp.json', // Approximate - may vary
     configFormat: 'json',
-    serverName: 'TalkToFigmaDesktop',
+    serverName: BRANDING.mcpServerName,
     installMethod: 'manual',
     description: 'Use VS Code to install the MCP server',
     config: {
       mcpServers: {
-        TalkToFigmaDesktop: {
+        [BRANDING.mcpServerName]: {
           command: 'node',
           args: ['<STDIO_SERVER_PATH>']  // Replace with actual path to mcp-stdio-server.js
         }
@@ -115,12 +117,12 @@ export const MCP_CLIENTS: Record<string, McpClient> = {
     displayName: 'Antigravity',
     configPath: '~/Library/Application Support/Antigravity/mcp_config.json', // macOS
     configFormat: 'json',
-    serverName: 'TalkToFigmaDesktop',
+    serverName: BRANDING.mcpServerName,
     installMethod: 'manual',
     description: 'Google Antigravity AI editor',
     config: {
       mcpServers: {
-        TalkToFigmaDesktop: {
+        [BRANDING.mcpServerName]: {
           command: 'node',
           args: ['<STDIO_SERVER_PATH>']  // Replace with actual path to mcp-stdio-server.js
         }
@@ -139,7 +141,7 @@ export const MCP_CLIENTS: Record<string, McpClient> = {
     id: 'coming-soon',
     displayName: 'Other Clients',
     configFormat: 'unknown',
-    serverName: 'TalkToFigmaDesktop',
+    serverName: BRANDING.mcpServerName,
     installMethod: 'coming-soon',
     description: 'Support for additional MCP clients coming soon',
     instructions: [
@@ -201,7 +203,7 @@ export function getCursorDeepLink(): string {
     args: ['<STDIO_SERVER_PATH>']
   }
 
-  return `cursor://anysphere.cursor-deeplink/mcp/install?name=TalkToFigmaDesktop&config=${encodeURIComponent(JSON.stringify(config))}`
+  return `cursor://anysphere.cursor-deeplink/mcp/install?name=${BRANDING.mcpServerName}&config=${encodeURIComponent(JSON.stringify(config))}`
 }
 
 /**

src/main/server/TalkToFigmaMcpServer.ts

@@ -24,6 +24,7 @@ import { allPrompts, promptContents } from './prompts';
 import { allTools } from './tools';
 import { ServerStatus } from './TalkToFigmaWebSocketServer';
 import { isChannelNotRequired } from '../../shared/constants';
+import { BRANDING } from '../../shared/branding';
 
 const logger = createLogger('MCP');
 
@@ -91,7 +92,7 @@ export class TalkToFigmaMcpServer {
     // Create MCP server instance
     this.server = new Server(
       {
-        name: 'TalkToFigmaDesktop',
+        name: BRANDING.mcpServerName,
         version: '1.0.0',
       },
       {
@@ -367,7 +368,7 @@ export class TalkToFigmaMcpServer {
           prompts: {},
         },
         serverInfo: {
-          name: 'TalkToFigmaDesktop',
+          name: BRANDING.mcpServerName,
           version: '1.0.0',
         },
       };

src/main/server/TalkToFigmaMcpServerStdio.ts

@@ -26,6 +26,7 @@ const logger = {
 import { allPrompts, promptContents } from './shared/prompt-registry';
 import { allTools } from './shared/tool-registry';
 import { WebSocketClient } from './shared/websocket-client';
+import { BRANDING } from '../../shared/branding';
 
 /**
  * MCP Server for stdio transport (spawned by MCP clients)
@@ -55,7 +56,7 @@ export class TalkToFigmaMcpServerStdio {
     // Create MCP server instance
     this.server = new Server(
       {
-        name: 'TalkToFigmaDesktop',
+        name: BRANDING.mcpServerName,
         version: '1.0.0',
       },
       {
@@ -137,7 +138,7 @@ export class TalkToFigmaMcpServerStdio {
           prompts: {},
         },
         serverInfo: {
-          name: 'TalkToFigmaDesktop',
+          name: BRANDING.mcpServerName,
           version: '1.0.0',
         },
       };

src/main/server/mcp-server.ts

@@ -4,6 +4,7 @@ import { createLogger } from '../utils/logger';
 import { PORTS, TIMEOUTS } from '../../shared/constants';
 import { getAllTools, initializeServices, ToolDefinition } from './services';
 import { FigmaWebSocketServer } from './websocket-server';
+import { BRANDING } from '../../shared/branding';
 
 const logger = createLogger('MCP');
 
@@ -309,7 +310,7 @@ export class McpSseServer {
     return {
       protocolVersion: '2024-11-05',
       serverInfo: {
-        name: 'TalkToFigmaDesktop',
+        name: BRANDING.mcpServerName,
         version: '1.0.0',
       },
       capabilities: {

src/main/utils/stdio-installer.ts

@@ -9,6 +9,7 @@ import path from 'node:path';
 import { existsSync, mkdirSync, copyFileSync } from 'node:fs';
 import os from 'node:os';
 import { createLogger } from './logger';
+import { BRANDING } from '@/shared/branding';
 
 const logger = createLogger('stdio');
 
@@ -24,11 +25,11 @@ export function getInstallPaths() {
   // Application Support location (works in all environments including sandboxed)
   let appSupportDir: string;
   if (platform === 'darwin') {
-    appSupportDir = path.join(homeDir, 'Library', 'Application Support', 'TalkToFigma');
+    appSupportDir = path.join(homeDir, 'Library', 'Application Support', BRANDING.mcpServerDirName);
   } else if (platform === 'win32') {
-    appSupportDir = path.join(process.env.APPDATA || path.join(homeDir, 'AppData', 'Roaming'), 'TalkToFigma');
+    appSupportDir = path.join(process.env.APPDATA || path.join(homeDir, 'AppData', 'Roaming'), BRANDING.mcpServerDirName);
   } else {
-    throw new Error(`Unsupported platform: ${platform}. TalkToFigma Desktop supports macOS and Windows only.`);
+    throw new Error(`Unsupported platform: ${platform}. ${BRANDING.productName} supports macOS and Windows only.`);
   }
 
   const serverPath = path.join(appSupportDir, 'mcp-server.cjs');

src/main/utils/stdio-path.ts

@@ -9,6 +9,7 @@ import path from 'node:path';
 import { existsSync } from 'node:fs';
 import { createLogger } from './logger';
 import { getInstalledServerPath, getInstallPaths } from './stdio-installer';
+import { BRANDING } from '@/shared/branding';
 
 const logger = createLogger('stdio');
 
@@ -83,7 +84,7 @@ export function getStdioServerConfig(): object {
 
   return {
     mcpServers: {
-      TalkToFigmaDesktop: {
+      [BRANDING.mcpServerName]: {
         command: 'node',
         args: [stdioServerPath]
       },

src/shared/branding.ts

@@ -0,0 +1,34 @@
+import packageJson from '../../package.json';
+
+interface PackageBranding {
+  shortName?: string;
+  mcpServerName?: string;
+  mcpServerDirName?: string;
+  deepLinkScheme?: string;
+}
+
+interface PackagedMetadata {
+  productName?: string;
+  branding?: PackageBranding;
+}
+
+const packagedMetadata = packageJson as PackagedMetadata;
+const branding = packagedMetadata.branding ?? {};
+
+function sanitizeServerName(value: string | undefined): string {
+  const sanitized = (value ?? '').replace(/[^A-Za-z0-9]/g, '');
+  return sanitized || 'TalkToFigmaDesktop';
+}
+
+function sanitizeDeepLinkScheme(value: string | undefined): string {
+  const sanitized = (value ?? '').toLowerCase().replace(/[^a-z0-9]/g, '');
+  return sanitized || 'talktofigma';
+}
+
+export const BRANDING = {
+  productName: packagedMetadata.productName || 'TalkToFigma Desktop',
+  shortName: branding.shortName || 'TalkToFigma',
+  mcpServerName: sanitizeServerName(branding.mcpServerName),
+  mcpServerDirName: branding.mcpServerDirName || 'TalkToFigma',
+  deepLinkScheme: sanitizeDeepLinkScheme(branding.deepLinkScheme),
+} as const;

src/shared/constants.ts

@@ -4,6 +4,8 @@
  * Use of this source code is governed by an MIT-style license that can be found in the LICENSE file
  */
 
+import { BRANDING } from './branding';
+
 // Shared constants across main and renderer processes
 
 // Server ports
@@ -110,7 +112,7 @@ export const STORE_KEYS = {
 
 // App metadata
 export const APP_INFO = {
-  NAME: 'TalkToFigmaDesktop',
+  NAME: BRANDING.mcpServerName,
   VERSION: '1.0.0',
   DESCRIPTION: 'Figma plugin to MCP server bridge',
 } as const;