feat: redesign MCP client configuration with per-tool setup instructions

Author: datlechin

TablePro/Views/Settings/MCPSettingsView.swift

@@ -8,6 +8,7 @@ import SwiftUI
 struct MCPSettingsView: View {
     @Bindable var settingsManager: AppSettingsManager
     @State private var manager = MCPServerManager.shared
+    @State private var selectedTool: MCPClientTool = .claudeDesktop
 
     var body: some View {
         Form {
@@ -83,30 +84,16 @@ struct MCPSettingsView: View {
     // MARK: - Client Configuration
 
     private var clientConfigurationSection: some View {
-        Section("Client Configuration") {
-            VStack(alignment: .leading, spacing: 8) {
-                Text("Add this to your AI tool's MCP configuration:")
-                    .foregroundStyle(.secondary)
-                    .font(.callout)
-
-                HStack {
-                    Text(configSnippet)
-                        .font(.system(.caption, design: .monospaced))
-                        .textSelection(.enabled)
-                        .padding(8)
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .background(.quaternary)
-                        .clipShape(RoundedRectangle(cornerRadius: 6))
-
-                    Button {
-                        NSPasteboard.general.clearContents()
-                        NSPasteboard.general.setString(configSnippet, forType: .string)
-                    } label: {
-                        Image(systemName: "doc.on.doc")
-                    }
-                    .help(String(localized: "Copy to clipboard"))
+        Section("Setup") {
+            Picker("", selection: $selectedTool) {
+                ForEach(MCPClientTool.allCases) { tool in
+                    Text(tool.displayName).tag(tool)
                 }
             }
+            .pickerStyle(.segmented)
+            .labelsHidden()
+
+            MCPSetupInstructions(tool: selectedTool, port: settingsManager.mcp.port)
         }
     }
 
@@ -145,16 +132,155 @@ struct MCPSettingsView: View {
         }
     }
 
-    private var configSnippet: String {
-        """
-        {
-          "mcpServers": {
-            "tablepro": {
-              "url": "http://127.0.0.1:\(settingsManager.mcp.port)/mcp"
+}
+
+// MARK: - Client Tool Enum
+
+private enum MCPClientTool: String, CaseIterable, Identifiable {
+    case claudeDesktop
+    case claudeCode
+    case cursor
+
+    var id: String { rawValue }
+
+    var displayName: String {
+        switch self {
+        case .claudeDesktop: "Claude Desktop"
+        case .claudeCode: "Claude Code"
+        case .cursor: "Cursor"
+        }
+    }
+}
+
+// MARK: - Setup Instructions
+
+private struct MCPSetupInstructions: View {
+    let tool: MCPClientTool
+    let port: Int
+    @State private var copied = false
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 12) {
+            ForEach(Array(steps.enumerated()), id: \.offset) { index, step in
+                HStack(alignment: .firstTextBaseline, spacing: 8) {
+                    Text("\(index + 1).")
+                        .foregroundStyle(.secondary)
+                        .monospacedDigit()
+                        .frame(width: 20, alignment: .trailing)
+                    Text(step)
+                        .textSelection(.enabled)
+                }
             }
-          }
+
+            if let snippet = configSnippet {
+                HStack(alignment: .top) {
+                    Text(snippet)
+                        .font(.system(.caption, design: .monospaced))
+                        .textSelection(.enabled)
+                        .padding(8)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .background(.quaternary)
+                        .clipShape(RoundedRectangle(cornerRadius: 6))
+
+                    Button {
+                        NSPasteboard.general.clearContents()
+                        NSPasteboard.general.setString(snippet, forType: .string)
+                        copied = true
+                        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) { copied = false }
+                    } label: {
+                        Image(systemName: copied ? "checkmark" : "doc.on.doc")
+                            .contentTransition(.symbolEffect(.replace))
+                    }
+                    .help(String(localized: "Copy to clipboard"))
+                }
+            }
+
+            if let command {
+                HStack(alignment: .top) {
+                    Text(command)
+                        .font(.system(.caption, design: .monospaced))
+                        .textSelection(.enabled)
+                        .padding(8)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .background(.quaternary)
+                        .clipShape(RoundedRectangle(cornerRadius: 6))
+
+                    Button {
+                        NSPasteboard.general.clearContents()
+                        NSPasteboard.general.setString(command, forType: .string)
+                        copied = true
+                        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) { copied = false }
+                    } label: {
+                        Image(systemName: copied ? "checkmark" : "doc.on.doc")
+                            .contentTransition(.symbolEffect(.replace))
+                    }
+                    .help(String(localized: "Copy to clipboard"))
+                }
+            }
+        }
+        .font(.callout)
+    }
+
+    private var url: String {
+        "http://127.0.0.1:\(port)/mcp"
+    }
+
+    private var steps: [String] {
+        switch tool {
+        case .claudeDesktop:
+            [
+                "Open Claude Desktop, go to Settings > Developer",
+                "Click \"Edit Config\" to open claude_desktop_config.json",
+                "Add the JSON below inside the file and save",
+                "Restart Claude Desktop"
+            ]
+        case .claudeCode:
+            [
+                "Run the command below in your terminal",
+            ]
+        case .cursor:
+            [
+                "Open Cursor, go to Settings > MCP",
+                "Click \"+ Add new global MCP server\"",
+                "Paste the JSON below and save"
+            ]
+        }
+    }
+
+    private var configSnippet: String? {
+        switch tool {
+        case .claudeDesktop:
+            """
+            {
+              "mcpServers": {
+                "tablepro": {
+                  "url": "\(url)"
+                }
+              }
+            }
+            """
+        case .claudeCode:
+            nil
+        case .cursor:
+            """
+            {
+              "mcpServers": {
+                "tablepro": {
+                  "url": "\(url)"
+                }
+              }
+            }
+            """
+        }
+    }
+
+    private var command: String? {
+        switch tool {
+        case .claudeCode:
+            "claude mcp add tablepro --transport sse \(url)"
+        default:
+            nil
         }
-        """
     }
 }