From 984c3e506d48116059a86c6c9136ba494135af80 Mon Sep 17 00:00:00 2001 From: andypalmi Date: Tue, 29 Sep 2026 14:40:13 +0200 Subject: [PATCH 1/5] Link Claude setup to the FlowFuse connector in Claude's directory --- nuxt/components/content/AgentSetupTabs.vue | 24 +++++++++++++++---- .../blog/2026/09/industrial-ai-agent.md | 2 +- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/nuxt/components/content/AgentSetupTabs.vue b/nuxt/components/content/AgentSetupTabs.vue index 2947f6b4af..75446d16aa 100644 --- a/nuxt/components/content/AgentSetupTabs.vue +++ b/nuxt/components/content/AgentSetupTabs.vue @@ -77,10 +77,12 @@ const CLIENTS = [ id: 'claude', logo: '/images/ai/agents/claude.svg', name: 'Claude', - step2Title: 'Add a custom connector', - step2Body: 'Where custom connectors are available on your plan, add one and paste the URL. On Team and Enterprise an owner adds it once for everyone.', - step2Label: 'Open Claude', - step2Url: 'https://claude.ai/', + step1Title: 'Open the FlowFuse connector', + step1Body: 'FlowFuse is listed in the Claude connector directory.', + step1Label: 'Connect to Claude', + step1Url: 'https://claude.ai/directory/flowfuse', + step2Title: 'Choose Connect to Claude', + step2Body: 'Claude takes you to FlowFuse to sign in. On Team and Enterprise an owner adds it once for everyone.', }, // A coding agent installs the connector into itself, so its tab is the prompt // and nothing else. No flags, no config file, and nothing that goes stale when @@ -179,6 +181,18 @@ function selectClient (id: string) {
+
+ +
@@ -187,7 +201,7 @@ function selectClient (id: string) {

02{{ client.step2Title }}

{{ client.step2Body }}

-
+
Date: Tue, 29 Sep 2026 14:50:52 +0200 Subject: [PATCH 2/5] Reword the Claude connector steps --- nuxt/components/content/AgentSetupTabs.vue | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/nuxt/components/content/AgentSetupTabs.vue b/nuxt/components/content/AgentSetupTabs.vue index 75446d16aa..dc58754856 100644 --- a/nuxt/components/content/AgentSetupTabs.vue +++ b/nuxt/components/content/AgentSetupTabs.vue @@ -32,8 +32,7 @@ const STEP1 = { description: 'You will paste this into your agent in the next step.', } const STEP3 = { - title: 'Sign in and choose what it reaches', - description: 'Which teams the agent may act on, and whether it has editing rights or read access only.', + title: 'Select teams and permissions', } // A client renders `logo` as a brand mark when set, `icon` as our own glyph when not. @@ -78,11 +77,11 @@ const CLIENTS = [ logo: '/images/ai/agents/claude.svg', name: 'Claude', step1Title: 'Open the FlowFuse connector', - step1Body: 'FlowFuse is listed in the Claude connector directory.', + step1Body: 'The official FlowFuse MCP connector is available in Claude.', step1Label: 'Connect to Claude', step1Url: 'https://claude.ai/directory/flowfuse', step2Title: 'Choose Connect to Claude', - step2Body: 'Claude takes you to FlowFuse to sign in. On Team and Enterprise an owner adds it once for everyone.', + step2Body: 'Claude opens FlowFuse. On Team and Enterprise an owner adds it once for everyone.', }, // A coding agent installs the connector into itself, so its tab is the prompt // and nothing else. No flags, no config file, and nothing that goes stale when @@ -217,7 +216,7 @@ function selectClient (id: string) {

03{{ client.step3Title || STEP3.title }}

-

{{ client.step3Body || STEP3.description }}

+

{{ client.step3Body }}

From 38d9a93139085a8deb7716510ae3a3c7a49cb977 Mon Sep 17 00:00:00 2001 From: andypalmi Date: Tue, 29 Sep 2026 15:07:41 +0200 Subject: [PATCH 3/5] Keep the self-hosted route in the Claude setup step --- nuxt/components/content/AgentSetupTabs.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nuxt/components/content/AgentSetupTabs.vue b/nuxt/components/content/AgentSetupTabs.vue index dc58754856..8885837d31 100644 --- a/nuxt/components/content/AgentSetupTabs.vue +++ b/nuxt/components/content/AgentSetupTabs.vue @@ -81,7 +81,7 @@ const CLIENTS = [ step1Label: 'Connect to Claude', step1Url: 'https://claude.ai/directory/flowfuse', step2Title: 'Choose Connect to Claude', - step2Body: 'Claude opens FlowFuse. On Team and Enterprise an owner adds it once for everyone.', + step2Body: 'Claude opens FlowFuse. Self-hosted platforms add a custom connector with their own address, https:///mcp. On Team and Enterprise an owner adds it once for everyone.', }, // A coding agent installs the connector into itself, so its tab is the prompt // and nothing else. No flags, no config file, and nothing that goes stale when From c7262c863d9c475454729ce219063611bf258707 Mon Sep 17 00:00:00 2001 From: andypalmi Date: Tue, 29 Sep 2026 15:30:27 +0200 Subject: [PATCH 4/5] Match the Claude Code tab to the modal and add a self-hosted switch to the Claude tabs --- nuxt/components/content/AgentSetupTabs.vue | 60 +++++++++++++++++----- nuxt/components/content/FfCommand.vue | 2 +- 2 files changed, 49 insertions(+), 13 deletions(-) diff --git a/nuxt/components/content/AgentSetupTabs.vue b/nuxt/components/content/AgentSetupTabs.vue index 8885837d31..81ae6a9387 100644 --- a/nuxt/components/content/AgentSetupTabs.vue +++ b/nuxt/components/content/AgentSetupTabs.vue @@ -81,9 +81,19 @@ const CLIENTS = [ step1Label: 'Connect to Claude', step1Url: 'https://claude.ai/directory/flowfuse', step2Title: 'Choose Connect to Claude', - step2Body: 'Claude opens FlowFuse. Self-hosted platforms add a custom connector with their own address, https:///mcp. On Team and Enterprise an owner adds it once for everyone.', + step2Body: 'Claude opens FlowFuse. On Team and Enterprise an owner adds it once for everyone.', + selfHosted: { + step1Title: 'Copy the FlowFuse connector URL', + step1Body: 'You will paste this into Claude in the next step.', + step1Url: null, + step1Command: 'https://your-domain.com/mcp', + step2Title: 'Add a custom connector', + step2Body: 'Where custom connectors are available on your plan, add one and paste the URL. On Team and Enterprise an owner adds it once for everyone.', + step2Label: 'Open Claude', + step2Url: 'https://claude.ai/', + }, }, - // A coding agent installs the connector into itself, so its tab is the prompt + // Off Cloud, a coding agent installs the connector into itself, so its tab is the prompt // and nothing else. No flags, no config file, and nothing that goes stale when // a client changes how remote servers are added. Claude Code documents an // `mcp add`; Codex documents only its config file and UI. Asking works on both. @@ -91,13 +101,22 @@ const CLIENTS = [ id: 'claude-code', logo: '/images/ai/agents/claude.svg', name: 'Claude Code', - step1Title: 'Copy the prompt', - step1Body: 'This is the whole setup.', - step1Command: 'Add the FlowFuse MCP tool at https://app.flowfuse.com/mcp. 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.', + step1Title: 'Open the MCP list', + step1Body: 'Run this in Claude Code.', + step1Command: '/mcp', + hostSwap: false, + step2Title: 'Select FlowFuse and choose Authenticate', + step2Body: 'Find it under Show unused connectors.', step2Label: 'See the documentation', step2Url: '/docs/user/expert/third-party-agents/', + selfHosted: { + step1Title: 'Copy the prompt', + step1Body: 'This is the whole setup.', + step1Command: 'Add the FlowFuse MCP tool at https://your-domain.com/mcp. Then ask me to complete the sign-in in the browser that opens.', + hostSwap: true, + step2Title: 'Paste it into Claude Code', + step2Body: 'It adds the connector itself, then asks you to finish signing in.', + }, }, { id: 'codex', @@ -123,7 +142,12 @@ const CLIENTS = [ }, ] -const clients = computed(() => props.excludeExpert ? CLIENTS.filter(client => !client.builtIn) : CLIENTS) +const selfHosted = useState('ff-command-host-editing', () => false) + +const clients = computed(() => { + const list = props.excludeExpert ? CLIENTS.filter(client => !client.builtIn) : CLIENTS + return list.map(client => (selfHosted.value && client.selfHosted) ? { ...client, ...client.selfHosted } : client) +}) // Prefix only off the /ai page, so the positions that page already reports to // PostHog keep their current values and its existing insights stay valid. @@ -138,6 +162,11 @@ watch(clients, (list) => { if (!list.some(client => client.id === activeClient.value)) activeClient.value = list[0].id }) +function chooseSelfHosted (id: string) { + selfHosted.value = true + capture('cta-ai-self-hosted-toggle', { position: pos(id) }) +} + function selectClient (id: string) { activeClient.value = id capture('cta-ai-agent-tab', { position: pos(id) }) @@ -180,8 +209,9 @@ function selectClient (id: string) {
-
+
-
-
- + +
diff --git a/nuxt/components/content/FfCommand.vue b/nuxt/components/content/FfCommand.vue index 69c3413a12..0e3f9ec34a 100644 --- a/nuxt/components/content/FfCommand.vue +++ b/nuxt/components/content/FfCommand.vue @@ -156,7 +156,7 @@ onUnmounted(() => clearTimeout(resetTimer)) autocomplete="off" spellcheck="false" class="ff-command__host-input" - placeholder="flowfuse.example.com" + placeholder="your-domain.com" aria-label="Your FlowFuse address" @input="onHostInput" > From 26075d02b5da45355257c51c7d78e2caec90bf2a Mon Sep 17 00:00:00 2001 From: andypalmi Date: Tue, 29 Sep 2026 17:07:30 +0200 Subject: [PATCH 5/5] Put the self-hosted and Cloud switch links above the connector controls --- nuxt/assets/css/style.css | 5 +++++ nuxt/components/content/AgentSetupTabs.vue | 13 +++++-------- nuxt/components/content/FfCommand.vue | 10 +++++----- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/nuxt/assets/css/style.css b/nuxt/assets/css/style.css index 3f703210b7..79076bf728 100644 --- a/nuxt/assets/css/style.css +++ b/nuxt/assets/css/style.css @@ -554,6 +554,11 @@ dl.message-properties > dd { color: var(--color-indigo-600); } +.ff-command__host-reset { + flex-basis: 100%; + text-align: left; +} + .ff-command__host-toggle:hover, .ff-command__host-reset:hover { color: var(--color-indigo-800); diff --git a/nuxt/components/content/AgentSetupTabs.vue b/nuxt/components/content/AgentSetupTabs.vue index 81ae6a9387..b90defcc94 100644 --- a/nuxt/components/content/AgentSetupTabs.vue +++ b/nuxt/components/content/AgentSetupTabs.vue @@ -210,6 +210,11 @@ function selectClient (id: string) {
+
+ +
-
diff --git a/nuxt/components/content/FfCommand.vue b/nuxt/components/content/FfCommand.vue index 0e3f9ec34a..27ac021a56 100644 --- a/nuxt/components/content/FfCommand.vue +++ b/nuxt/components/content/FfCommand.vue @@ -149,6 +149,11 @@ onUnmounted(() => clearTimeout(resetTimer)) @click="editing = true" >Self-hosted? Use your own address
+ clearTimeout(resetTimer)) aria-label="Your FlowFuse address" @input="onHostInput" > -