From cc0e656d7bf256f367e00fed8883fba1ce7f13c0 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Mon, 14 Sep 2026 16:06:28 +0200
Subject: [PATCH 1/3] Add Claude Code and Codex to the AI connector modal and
 the docs

A coding agent installs the connector into itself, so its tab is one prompt and
nothing else:

  Add the FlowFuse MCP tool at <this platform>/mcp. Then ask me to complete the
  sign-in in the browser that opens.

The prompt is built from the platform's own origin, the same source the address
step already used, so it is correct on Cloud and self-hosted with nothing for the
reader to edit.

Nothing here goes stale when a client changes how remote servers are added, which
they do at different times and in different ways: one documents an mcp add
subcommand, Codex documents only its config file and its UI.

Modal changes:

- Step one is overridable per client, so a tab can show a prompt instead of the
  bare address. Both go through the same copy path and the same event.
- The tab glyph is chosen per client through <component :is> rather than one
  hardcoded icon. ServerIcon and CommandLineIcon are values now, not registered
  components.

Docs: 'Command-line and editor agents' splits into a coding-agent section leading
with the prompt, and a section for the rest. The hand-written mcp add command
stays for anyone who wants it.
---
 docs/user/expert/third-party-agents.md        | 16 +++++-
 .../components/dialogs/AiConnectorModal.vue   | 57 +++++++++++++++----
 2 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/docs/user/expert/third-party-agents.md b/docs/user/expert/third-party-agents.md
index c214ac141a..dc9a4706aa 100644
--- a/docs/user/expert/third-party-agents.md
+++ b/docs/user/expert/third-party-agents.md
@@ -89,16 +89,26 @@ Where custom connectors are available on your plan, add one and enter the FlowFu
 
 On Team and Enterprise plans an owner adds the connector for the organisation first, and then each person connects and signs in individually.
 
-### Command-line and editor agents
+### Coding agents
 
-Claude Code, Cursor, Visual Studio Code and Gemini CLI all connect to the same address. Where a client supports OAuth, sign in; otherwise use a token, see [clients without a sign-in flow](#clients-without-a-sign-in-flow).
+A coding agent can add the connector to itself. Ask it, rather than editing its configuration by hand:
 
-For Claude Code:
+```
+Add the FlowFuse MCP tool at https://app.flowfuse.com/mcp. Then ask me to complete the sign-in in the browser that opens.
+```
+
+This works in Claude Code and Codex, and in any other agent that can change its own MCP configuration. It also survives those clients changing how a remote server is added, which they do at different times and in different ways.
+
+If you would rather add it yourself, Claude Code takes:
 
 ```bash
 claude mcp add --transport http flowfuse https://app.flowfuse.com/mcp
 ```
 
+### Other command-line and editor agents
+
+Cursor, Visual Studio Code and Gemini CLI all connect to the same address. Where a client supports OAuth, sign in; otherwise use a token, see [clients without a sign-in flow](#clients-without-a-sign-in-flow).
+
 ### Local and self-hosted models
 
 Use any HTTP-capable MCP client, such as LM Studio, LibreChat or Open WebUI, pointed at your own model, and add the FlowFuse address as a server in that client's configuration. Note that Ollama is a model runtime rather than an agent, so it needs an MCP client in front of it.
diff --git a/frontend/src/components/dialogs/AiConnectorModal.vue b/frontend/src/components/dialogs/AiConnectorModal.vue
index 31a4dc4063..01c584b3dd 100644
--- a/frontend/src/components/dialogs/AiConnectorModal.vue
+++ b/frontend/src/components/dialogs/AiConnectorModal.vue
@@ -15,7 +15,7 @@
                     @click="selectClient(client.id)"
                 >
                     <span class="ff-agent-tab__icon" aria-hidden="true">
-                        <ServerIcon v-if="client.icon" />
+                        <component :is="client.icon" v-if="client.icon" />
                         <img v-else :src="client.logo" alt="">
                     </span>
                     <span>{{ client.name }}</span>
@@ -33,12 +33,12 @@
             >
                 <div class="ff-agent-step">
                     <p class="ff-agent-step__num">01</p>
-                    <p class="ff-agent-step__title">Copy the FlowFuse connector URL</p>
-                    <p class="ff-agent-step__body">Paste it into your agent in the next step.</p>
+                    <p class="ff-agent-step__title">{{ client.step1Title || 'Copy the FlowFuse connector URL' }}</p>
+                    <p class="ff-agent-step__body">{{ client.step1Body || 'Paste it into your agent in the next step.' }}</p>
                     <div class="ff-agent-step__cta">
                         <div class="ai-connector__command">
-                            <code class="ai-connector__endpoint">{{ endpoint }}</code>
-                            <ff-button kind="primary" size="small" @click="copyEndpoint">
+                            <code class="ai-connector__endpoint">{{ stepOneText(client) }}</code>
+                            <ff-button kind="primary" size="small" @click="copyStepOne(client)">
                                 <template #icon-right><ClipboardDocumentIcon /></template>
                                 Copy
                             </ff-button>
@@ -96,7 +96,7 @@
 </template>
 
 <script>
-import { ArrowTopRightOnSquareIcon, ClipboardDocumentIcon, ServerIcon } from '@heroicons/vue/24/outline'
+import { ArrowTopRightOnSquareIcon, ClipboardDocumentIcon, CommandLineIcon, ServerIcon } from '@heroicons/vue/24/outline'
 
 import clipboardMixin from '../../mixins/Clipboard.js'
 import alerts from '../../services/alerts.js'
@@ -134,9 +134,37 @@ const CLIENTS = [
         step2Label: 'Open ChatGPT',
         step2Url: 'https://chatgpt.com/'
     },
+    // A coding agent installs the connector into itself, so its tab is the prompt
+    // and nothing else. Nothing here to go stale when a client changes how remote
+    // servers are added, and the prompt carries this platform's own address, so it
+    // is correct on Cloud and self-hosted without the reader editing it.
+    {
+        id: 'claude-code',
+        icon: CommandLineIcon,
+        name: 'Claude Code',
+        step1Title: 'Copy the prompt',
+        step1Body: 'This is the whole setup.',
+        step1Command: url => `Add the FlowFuse MCP tool at ${url}. Then ask me to complete the sign-in in the browser that opens.`,
+        step2Title: 'Paste it into Claude Code',
+        step2Body: 'It adds the connector itself, then asks you to finish signing in.',
+        step2Label: 'See the documentation',
+        step2Url: 'https://flowfuse.com/docs/user/expert/third-party-agents/'
+    },
+    {
+        id: 'codex',
+        icon: CommandLineIcon,
+        name: 'Codex',
+        step1Title: 'Copy the prompt',
+        step1Body: 'This is the whole setup.',
+        step1Command: url => `Add the FlowFuse MCP tool at ${url}. Then ask me to complete the sign-in in the browser that opens.`,
+        step2Title: 'Paste it into Codex',
+        step2Body: 'It adds the connector itself, then asks you to finish signing in.',
+        step2Label: 'See the documentation',
+        step2Url: 'https://flowfuse.com/docs/user/expert/third-party-agents/'
+    },
     {
         id: 'local',
-        icon: true,
+        icon: ServerIcon,
         name: 'Local and Custom Agents',
         step2Title: "Your MCP client's config",
         step2Body: 'Any MCP client, pointed at your own model.',
@@ -147,7 +175,10 @@ const CLIENTS = [
 
 export default {
     name: 'AiConnectorModal',
-    components: { ArrowTopRightOnSquareIcon, ClipboardDocumentIcon, ServerIcon },
+    // ServerIcon and CommandLineIcon are not registered: the tab glyph is chosen
+    // per client and rendered through <component :is>, so they are values here
+    // rather than tags in the template.
+    components: { ArrowTopRightOnSquareIcon, ClipboardDocumentIcon },
     mixins: [clipboardMixin],
     data () {
         return {
@@ -168,8 +199,14 @@ export default {
             this.activeClient = id
             this.capture('cta-ai-agent-tab', { position: id })
         },
-        copyEndpoint () {
-            this.copyToClipboard(this.endpoint)
+        // Most tabs show the bare address. A coding-agent tab shows a prompt built
+        // around it, so step one is whatever that client asks for rather than a
+        // fixed string. Both go through the same copy path and the same event.
+        stepOneText (client) {
+            return client.step1Command ? client.step1Command(this.endpoint) : this.endpoint
+        },
+        copyStepOne (client) {
+            this.copyToClipboard(this.stepOneText(client))
                 .then(() => {
                     this.capture('cta-copy-mcp-endpoint', { position: this.activeClient })
                     alerts.emit('Copied to Clipboard.', 'confirmation')

From 9871452725614e577eabe67c0e6627c597906cd3 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Mon, 14 Sep 2026 16:16:33 +0200
Subject: [PATCH 2/3] Reuse the vendor marks on the coding-agent tabs

Codex takes the OpenAI mark already on the ChatGPT tab, and Claude Code takes the
Anthropic mark already on the Claude tab. Same vendor either way, so the files
already in this directory serve both new tabs.

Replaces the heroicons command-line glyph the tabs shipped with in the previous
commit. With no glyph left but ServerIcon, the dynamic <component :is> and the
matching registration change are both unnecessary, so they go back to what main
had and the diff shrinks to the two new clients plus the overridable step one.
---
 .../src/components/dialogs/AiConnectorModal.vue   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/dialogs/AiConnectorModal.vue b/frontend/src/components/dialogs/AiConnectorModal.vue
index 01c584b3dd..18564002a2 100644
--- a/frontend/src/components/dialogs/AiConnectorModal.vue
+++ b/frontend/src/components/dialogs/AiConnectorModal.vue
@@ -15,7 +15,7 @@
                     @click="selectClient(client.id)"
                 >
                     <span class="ff-agent-tab__icon" aria-hidden="true">
-                        <component :is="client.icon" v-if="client.icon" />
+                        <ServerIcon v-if="client.icon" />
                         <img v-else :src="client.logo" alt="">
                     </span>
                     <span>{{ client.name }}</span>
@@ -96,7 +96,7 @@
 </template>
 
 <script>
-import { ArrowTopRightOnSquareIcon, ClipboardDocumentIcon, CommandLineIcon, ServerIcon } from '@heroicons/vue/24/outline'
+import { ArrowTopRightOnSquareIcon, ClipboardDocumentIcon, ServerIcon } from '@heroicons/vue/24/outline'
 
 import clipboardMixin from '../../mixins/Clipboard.js'
 import alerts from '../../services/alerts.js'
@@ -140,7 +140,7 @@ const CLIENTS = [
     // is correct on Cloud and self-hosted without the reader editing it.
     {
         id: 'claude-code',
-        icon: CommandLineIcon,
+        logo: claudeLogo,
         name: 'Claude Code',
         step1Title: 'Copy the prompt',
         step1Body: 'This is the whole setup.',
@@ -152,7 +152,7 @@ const CLIENTS = [
     },
     {
         id: 'codex',
-        icon: CommandLineIcon,
+        logo: chatgptLogo,
         name: 'Codex',
         step1Title: 'Copy the prompt',
         step1Body: 'This is the whole setup.',
@@ -164,7 +164,7 @@ const CLIENTS = [
     },
     {
         id: 'local',
-        icon: ServerIcon,
+        icon: true,
         name: 'Local and Custom Agents',
         step2Title: "Your MCP client's config",
         step2Body: 'Any MCP client, pointed at your own model.',
@@ -175,10 +175,7 @@ const CLIENTS = [
 
 export default {
     name: 'AiConnectorModal',
-    // ServerIcon and CommandLineIcon are not registered: the tab glyph is chosen
-    // per client and rendered through <component :is>, so they are values here
-    // rather than tags in the template.
-    components: { ArrowTopRightOnSquareIcon, ClipboardDocumentIcon },
+    components: { ArrowTopRightOnSquareIcon, ClipboardDocumentIcon, ServerIcon },
     mixins: [clipboardMixin],
     data () {
         return {

From 045aacc4a0e155ebd8fb50942371673090e9388a Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Tue, 15 Sep 2026 11:46:49 +0200
Subject: [PATCH 3/3] Let the prompt block wrap instead of overflowing the
 modal

Same defect as the website widget, and worse here because the modal is narrower.
The endpoint block sets white-space: nowrap, which is right for an address you
read left to right and paste, but it sizes the block to its content, so a prompt
runs past the edge of the modal and the half you cannot see is the half that says
what it does.

Only the tabs carrying a prompt get the wrapping variant.
---
 frontend/src/components/dialogs/AiConnectorModal.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/dialogs/AiConnectorModal.vue b/frontend/src/components/dialogs/AiConnectorModal.vue
index 18564002a2..644a8e3649 100644
--- a/frontend/src/components/dialogs/AiConnectorModal.vue
+++ b/frontend/src/components/dialogs/AiConnectorModal.vue
@@ -37,7 +37,7 @@
                     <p class="ff-agent-step__body">{{ client.step1Body || 'Paste it into your agent in the next step.' }}</p>
                     <div class="ff-agent-step__cta">
                         <div class="ai-connector__command">
-                            <code class="ai-connector__endpoint">{{ stepOneText(client) }}</code>
+                            <code class="ai-connector__endpoint" :class="{ 'ai-connector__endpoint--wrap': client.step1Command }">{{ stepOneText(client) }}</code>
                             <ff-button kind="primary" size="small" @click="copyStepOne(client)">
                                 <template #icon-right><ClipboardDocumentIcon /></template>
                                 Copy
@@ -364,6 +364,15 @@ export default {
     color: var(--ff-color-text-default);
 }
 
+// A sentence, not an address. Holding one line is right for something you read
+// left to right and paste, but a prompt sized to its whole length pushes out of
+// the modal, and the half you cannot see is the half saying what it does.
+.ai-connector__endpoint--wrap {
+    white-space: pre-wrap;
+    overflow-x: visible;
+    overflow-wrap: anywhere;
+}
+
 @container (min-width: 640px) {
     .ff-agent-panel {
         grid-template-columns: repeat(3, minmax(0, 1fr));