From 7f7873336e1bc8887ea4bf0dbbe6dbd7b70b32b0 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Wed, 28 Oct 2026 20:17:23 +0300
Subject: [PATCH 1/2] fix: match Claude connector setup instructions to the
 current dialog

The custom connector dialog in Claude Desktop and claude.ai asks for a
name and URL first and reserves the authorization header while OAuth
sign-in is selected. The instructions now say to choose "No sign-in"
and add the authorization header, and show the server URL and the
header value as separate values to copy.
---
 src/application/i18n/messages/en.json         |   4 +-
 src/presentation/components/mcp/McpTokens.vue | 104 +++++++++++++++---
 2 files changed, 91 insertions(+), 17 deletions(-)

diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
index ec64ece2..26e08f53 100644
--- a/src/application/i18n/messages/en.json
+++ b/src/application/i18n/messages/en.json
@@ -58,7 +58,9 @@
       "instructions": {
         "claudeCode": "Run in the terminal",
         "cursor": "Add to ~/.cursor/mcp.json",
-        "claude": "Settings → Connectors → Add custom connector: paste the URL and add the request header"
+        "claude": "Customize → Connectors → Add custom connector. Enter a name, e.g. NoteX, and the server URL. In Authentication choose \"No sign-in\", then in Request headers add the \"authorization\" header with the value below",
+        "claudeUrl": "Server URL",
+        "claudeHeader": "Value of the authorization header"
       },
       "permission": {
         "read": "Read only",
diff --git a/src/presentation/components/mcp/McpTokens.vue b/src/presentation/components/mcp/McpTokens.vue
index 7acaf7d2..49ffc674 100644
--- a/src/presentation/components/mcp/McpTokens.vue
+++ b/src/presentation/components/mcp/McpTokens.vue
@@ -56,17 +56,39 @@
               :title="instruction.title"
               :subtitle="instruction.caption"
             >
-              <template #right>
+              <template
+                v-if="instruction.snippets.length === 1"
+                #right
+              >
                 <Button
                   icon="Copy"
                   secondary
-                  @click="copy(instruction.snippet)"
+                  @click="copy(instruction.snippets[0].value)"
                 >
                   {{ t('userSettings.mcp.copy') }}
                 </Button>
               </template>
             </Row>
-            <pre :class="[$style['mcp__snippet'], 'text-monospaced']">{{ instruction.snippet }}</pre>
+            <template
+              v-for="snippet in instruction.snippets"
+              :key="snippet.value"
+            >
+              <Row
+                v-if="instruction.snippets.length > 1"
+                :title="snippet.label ?? ''"
+              >
+                <template #right>
+                  <Button
+                    icon="Copy"
+                    secondary
+                    @click="copy(snippet.value)"
+                  >
+                    {{ t('userSettings.mcp.copy') }}
+                  </Button>
+                </template>
+              </Row>
+              <pre :class="[$style['mcp__snippet'], 'text-monospaced']">{{ snippet.value }}</pre>
+            </template>
           </div>
         </div>
       </Section>
@@ -153,37 +175,87 @@ const createdToken = ref<string | null>(null);
  */
 const mcpUrl = `${import.meta.env.VITE_API_URL}/mcp`;
 
+/**
+ * Value to paste into MCP client settings
+ */
+interface SetupSnippet {
+  /**
+   * Field the value goes to, shown when the client needs several values
+   */
+  label?: string;
+
+  /**
+   * Value to copy
+   */
+  value: string;
+}
+
+/**
+ * Setup instruction for MCP client
+ */
+interface SetupInstruction {
+  /**
+   * MCP client name
+   */
+  title: string;
+
+  /**
+   * Where to paste the snippets
+   */
+  caption: string;
+
+  /**
+   * Values to paste
+   */
+  snippets: SetupSnippet[];
+}
+
 /**
  * Ready-made setup instructions for popular MCP clients
  */
-const setupInstructions = computed(() => {
+const setupInstructions = computed<SetupInstruction[]>(() => {
   const token = createdToken.value ?? '';
 
   return [
     {
       title: 'Claude Code',
       caption: t('userSettings.mcp.instructions.claudeCode'),
-      snippet: `claude mcp add --transport http notex ${mcpUrl} --header "Authorization: Bearer ${token}"`,
+      snippets: [
+        { value: `claude mcp add --transport http notex ${mcpUrl} --header "Authorization: Bearer ${token}"` },
+      ],
     },
     {
       title: 'Cursor',
       caption: t('userSettings.mcp.instructions.cursor'),
-      snippet: JSON.stringify({
-        mcpServers: {
-          notex: {
-            url: mcpUrl,
-            headers: {
-              // eslint-disable-next-line @typescript-eslint/naming-convention
-              Authorization: `Bearer ${token}`,
+      snippets: [
+        {
+          value: JSON.stringify({
+            mcpServers: {
+              notex: {
+                url: mcpUrl,
+                headers: {
+                  // eslint-disable-next-line @typescript-eslint/naming-convention
+                  Authorization: `Bearer ${token}`,
+                },
+              },
             },
-          },
+          }, null, 2),
         },
-      }, null, 2),
+      ],
     },
     {
-      title: 'Claude',
+      title: 'Claude Desktop and claude.ai',
       caption: t('userSettings.mcp.instructions.claude'),
-      snippet: `${mcpUrl}\nAuthorization: Bearer ${token}`,
+      snippets: [
+        {
+          label: t('userSettings.mcp.instructions.claudeUrl'),
+          value: mcpUrl,
+        },
+        {
+          label: t('userSettings.mcp.instructions.claudeHeader'),
+          value: `Bearer ${token}`,
+        },
+      ],
     },
   ];
 });

From 5128d8daaa93ef90b8b904b3f83d39c0691fea69 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Wed, 28 Oct 2026 20:21:52 +0300
Subject: [PATCH 2/2] fix: show Claude snippet labels as plain text

---
 src/presentation/components/mcp/McpTokens.vue | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/presentation/components/mcp/McpTokens.vue b/src/presentation/components/mcp/McpTokens.vue
index 49ffc674..583998fb 100644
--- a/src/presentation/components/mcp/McpTokens.vue
+++ b/src/presentation/components/mcp/McpTokens.vue
@@ -73,20 +73,19 @@
               v-for="snippet in instruction.snippets"
               :key="snippet.value"
             >
-              <Row
+              <div
                 v-if="instruction.snippets.length > 1"
-                :title="snippet.label ?? ''"
+                :class="$style['mcp__snippet-label']"
               >
-                <template #right>
-                  <Button
-                    icon="Copy"
-                    secondary
-                    @click="copy(snippet.value)"
-                  >
-                    {{ t('userSettings.mcp.copy') }}
-                  </Button>
-                </template>
-              </Row>
+                <span class="text-ui-subtle">{{ snippet.label }}</span>
+                <Button
+                  icon="Copy"
+                  secondary
+                  @click="copy(snippet.value)"
+                >
+                  {{ t('userSettings.mcp.copy') }}
+                </Button>
+              </div>
               <pre :class="[$style['mcp__snippet'], 'text-monospaced']">{{ snippet.value }}</pre>
             </template>
           </div>
@@ -327,6 +326,14 @@ async function revokeClicked(token: McpToken): Promise<void> {
     display: grid;
   }
 
+  &__snippet-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-m);
+    padding: 0 var(--h-padding) var(--v-padding);
+  }
+
   &__snippet {
     margin: 0 var(--h-padding) var(--v-padding);
     padding: var(--v-padding) var(--h-padding);