[ai-assisted] Add Codex CLI MCP setup to client config list

Author: JooHyung Park

src/components/mcp/McpClientItem.tsx

@@ -83,6 +83,11 @@ export function McpClientItem({ client }: McpClientItemProps) {
       const quotedPath = stdioPath.includes(' ') ? `"${stdioPath}"` : stdioPath
       return `claude mcp add TalkToFigmaDesktop 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 client.cliCommand || ''
   }
 
@@ -110,8 +115,8 @@ export function McpClientItem({ client }: McpClientItemProps) {
         </>
       )}
 
-      {/* Claude Code */}
-      {client.id === 'claude-code' && (
+      {/* CLI Clients */}
+      {(client.id === 'claude-code' || client.id === 'codex') && (
         <>
           <div className="space-y-3">
             <ConfigCodeBlock config={getCliCommand()} />

src/lib/mcp/client-configs.ts

@@ -68,6 +68,23 @@ export const MCP_CLIENTS: Record<string, McpClient> = {
     ]
   },
 
+  codex: {
+    id: 'codex',
+    displayName: 'Codex CLI',
+    configFormat: 'cli',
+    serverName: 'TalkToFigmaDesktop',
+    installMethod: 'cli',
+    description: 'Use Codex CLI to install the MCP server',
+    cliCommand: 'codex mcp add TalkToFigmaDesktop -- 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'
+    ]
+  },
+
   vscode: {
     id: 'vscode',
     displayName: 'VS Code',
@@ -144,7 +161,13 @@ export function getClientConfig(clientId: string): McpClient | undefined {
  * Get all client IDs (excluding coming soon)
  */
 export function getAllClientIds(): string[] {
-  return Object.keys(MCP_CLIENTS).filter(id => id !== 'comingSoon')
+  return Object.keys(MCP_CLIENTS)
+    .filter(id => id !== 'comingSoon')
+    .sort((a, b) => {
+      const nameA = MCP_CLIENTS[a]?.displayName ?? a
+      const nameB = MCP_CLIENTS[b]?.displayName ?? b
+      return nameA.localeCompare(nameB, 'en', { sensitivity: 'base' })
+    })
 }
 
 /**