From 320f901efa8cbc16fa81452862a00f2d35461aa0 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 24 Aug 2026 11:40:30 +0200 Subject: [PATCH 1/8] /ai: disable the Expert prompt widget and add a connect-your-own-agent section Splits the Connect capability group into inbound and outbound so the two MCP directions cannot be confused, scopes the approval-card governance claim to Expert and Platform Automations, and replaces the hero prompt widget with a two-path chooser. The widget's components and script are left in place. --- src/ai.njk | 212 +++++++++++++++++++++-- src/images/ai/connect-your-own-agent.svg | 55 ++++++ 2 files changed, 248 insertions(+), 19 deletions(-) create mode 100644 src/images/ai/connect-your-own-agent.svg diff --git a/src/ai.njk b/src/ai.njk index 321f9ba389..240de6bebd 100644 --- a/src/ai.njk +++ b/src/ai.njk @@ -3,8 +3,8 @@ layout: page nohero: true imageDescription: "Plant worker interacting with an HMI" meta: - title: "Industrial AI: FlowFuse Expert, Governed and Built-In" - description: "Industrial AI with FlowFuse: build industrial applications with FlowFuse Expert, act on live operations behind approvals, and give your company-sanctioned AI governed access. Every AI capability on one platform, with the permissions, RBAC, and audit your plants require." + title: "Industrial AI: Our Agent, or Bring Your Own" + description: "Industrial AI with FlowFuse: build with FlowFuse Expert, or connect the AI agent your company already approved. Microsoft Copilot, ChatGPT, Claude and local models can query your operations and build Node-RED applications, with the permissions, RBAC and audit your plants require." hero: title: "Industrial AI, Governed and Built-In" description: @@ -66,30 +66,86 @@ capabilityGroups: status: "Available" statusKind: "live" description: "Certified LLM nodes bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control." - - title: "Connect and govern your AI" - eyebrow: "Connect" - subtitle: "Give the AI your company already trusts a governed door into operations, on a boundary you control." + - title: "Connect your own agent" + eyebrow: "Connect in" + subtitle: "The agent your company already approved, working your platform and building in Node-RED. Your agent, your model, on a boundary you set." items: - - name: "Connect your company's AI" + - name: "Bring your own AI agent" svgPath: "components/icons/arrows-right-left.svg" - status: "Coming soon" - statusKind: "soon" - description: "Expose flows as MCP tools so the AI your company already sanctioned, like Claude or Copilot, can reach operational data through a permissioned boundary. The AI reaches only what you expose, on the terms you set, rather than getting direct access to plant systems. This is our most-requested capability and is in active development." + status: "Available" + statusKind: "live" + description: "Point Microsoft Copilot, ChatGPT, Claude or a local model at FlowFuse, sign in, and it can query your teams and instances and build Node-RED applications for you. Where company policy only permits an approved AI assistant, this is how that assistant reaches your operations, instead of nobody getting AI on the platform at all." + - name: "You decide what it reaches" + svgPath: "components/icons/lock-closed.svg" + status: "Available" + statusKind: "live" + description: "Signing in asks which teams the agent may act on and whether it may make changes at all. FlowFuse holds you to that on every call, so a read-only grant is refused whatever the agent tries. Nothing an agent reaches can delete an instance, an application, a snapshot or a team, and deploying stays yours." + - title: "Expose your own tools" + eyebrow: "Send out" + subtitle: "The other direction. Your flows become tools that an agent can call as part of its work." + items: - name: "AI that uses your tools" svgPath: "components/icons/puzzle-piece.svg" status: "Available" statusKind: "live" description: "Build your own MCP servers and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register." +choose: + title: "Two ways to get AI into your operations" + options: + - label: "Use FlowFuse Expert" + eyebrow: "Our agent" + description: "Built into the platform and the Node-RED editor. Nothing to configure, nothing to get approved." + href: "#capabilities" + event: "expert" + - label: "Connect your own agent" + eyebrow: "Your agent, your model" + description: "Point the AI your company already uses at FlowFuse and it works your operations." + href: "#connect-your-agent" + event: "byo-agent" +connect: + eyebrow: "New in 3.0" + title: "FlowFuse becomes an extension of your own agent" + subtitle: "Your agent, your model, working your platform and building in Node-RED. Only your own authenticated agent can connect." + endpointLabel: "Add this address in your agent's connector settings" + endpoint: "https://app.flowfuse.com/api/v1/mcp" + endpointNote: "Self-hosted, use your own platform address." + steps: + - title: "Add the address" + description: "Paste it into your agent's connector settings. Where that lives depends on your agent." + - title: "Sign in to FlowFuse" + description: "A normal FlowFuse sign-in. There is no key to generate and nothing to paste." + - title: "Choose what it reaches" + description: "Which teams the agent may act on, and whether it may make changes at all." + clients: + - name: "Microsoft Copilot" + where: "Copilot Studio, Tools, add a Model Context Protocol tool" + - name: "ChatGPT" + where: "Settings, connectors, developer mode" + - name: "Claude" + where: "Settings, Customize, Connectors" + - name: "Local models" + where: "Your own MCP client, pointed at your own model" + adminTitle: "If your IT team controls which AI you use" + adminBody: "Adding a connector is often an admin's call, and on ChatGPT and Claude an administrator or owner adds it once for the organisation before anyone connects. It is a small, specific ask: one address, and each person still signs in with their own FlowFuse account and chooses what the agent may reach." + storeBody: "Coming soon: FlowFuse in the Microsoft Copilot, Claude and ChatGPT connector directories. No custom connector, no admin request. FlowFuse Cloud first." + eyesTitle: "It builds on the canvas in front of you" + eyesBody: "Node-RED has always been visual development. Asking about your platform needs nothing open, and when an agent builds a flow it builds it in an editor session you opened for it, so you watch the nodes appear and you deploy. Visual development, now AI-assisted, with your eyes on it." + rulesTitle: "Your agent, your rules" + rules: + - "FlowFuse marks every tool it offers as read-only or as making a change, so your agent knows before it acts." + - "Your agent applies its own confirmation behaviour on top of that." + - "The access you granted is enforced by FlowFuse on every call, whatever the agent decides to try." + codingNote: "Command-line and editor agents such as Claude Code, Cursor, Visual Studio Code and Gemini CLI connect the same way." governance: title: "Governance you can prove" subtitle: "The control plane every AI action runs through, the same one that governs your teams." items: - svgPath: "components/icons/check-circle.svg" title: "Approval cards on writes" - description: "Every write action AI proposes waits for a human to approve, reject or edit." + description: "FlowFuse Expert and Platform Automations hold every write action for a human to approve, reject or edit." - svgPath: "components/icons/lock-closed.svg" - title: "Per-tool permissions" - description: "Grant read, write or delete per tool and per team, so AI only reaches what you allow." + title: "Scoped on connect" + description: "A connected agent gets the teams you granted and nothing else, enforced on every call it makes." - svgPath: "components/icons/shield-check.svg" title: "Role-based access" description: "The same RBAC that governs your teams governs what AI can see and do." @@ -112,12 +168,24 @@ governance:

{{ p | safe }}

{% endfor %} -
- - {% include "components/ai-chat-interface.njk" %} - - - {% include "components/ai-expert-modal.njk" %} + +
+

{{ choose.title | striptags }}

+
+ {% for opt in choose.options %} + +

{{ opt.eyebrow }}

+

{{ opt.label }}

+

{{ opt.description }}

+ + {% endfor %} +
@@ -140,7 +208,7 @@ governance: -
+

{{ capabilityIntro.title | safe }}

@@ -181,6 +249,112 @@ governance: {% endfor %}
+ +
+
+
+

{{ connect.eyebrow }}

+

{{ connect.title | safe }}

+

{{ connect.subtitle }}

+
+ + +
+

{{ connect.endpointLabel }}

+
+ {{ connect.endpoint }} + +
+

{{ connect.endpointNote }}

+
+ + +
+ {% for step in connect.steps %} +
+

0{{ loop.index }}

+

{{ step.title }}

+

{{ step.description }}

+
+ {% endfor %} +
+ + +
+ {% for client in connect.clients %} +
+
+ {% if client.logo %} + {{ client.name }} + {% else %} + {{ client.name }} + {% endif %} +
+

{{ client.where }}

+
+ {% endfor %} +
+

{{ connect.codingNote }} See the documentation.

+ + +
+
+

{{ connect.eyesTitle }}

+

{{ connect.eyesBody }}

+
+
+

{{ connect.rulesTitle }}

+
    + {% for rule in connect.rules %} +
  • + 0{{ loop.index }} + {{ rule }} +
    • + {% endfor %} +
+
+
+ + +
+

{{ connect.adminTitle }}

+

{{ connect.adminBody }}

+

{{ connect.storeBody }}

+
+ + +
+ Your own AI agent signs in to one FlowFuse address. FlowFuse checks the access you granted, then reaches your Node-RED instances and the editor session you have opened. +
+ + +
+ Start a free trial + Already a customer? Connect an agent +
+
+
+ +
diff --git a/src/images/ai/connect-your-own-agent.svg b/src/images/ai/connect-your-own-agent.svg new file mode 100644 index 0000000000..b1d4782e2b --- /dev/null +++ b/src/images/ai/connect-your-own-agent.svg @@ -0,0 +1,55 @@ + + How your own agent reaches FlowFuse + + + + + + + + + + + + + + Your own AI agent + Copilot, ChatGPT, Claude + + + signs in + + + + WHAT YOU GRANTED + + + + One FlowFuse address + which teams it may reach, + and whether it may change them + + + + + + FlowFuse + your platform + + + + + + + Instances + and remote + + + Your editor + when you open it + + + Your agent talks to one address. FlowFuse reaches the instances, so they stay unexposed. + + From d6fe87d54c0288a69c44c6745170e0b3f65a6307 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 24 Aug 2026 14:05:31 +0200 Subject: [PATCH 2/8] /ai: lead with what AI can do, then a real fork into Expert or your own agent Restructures the page so the reader understands the capabilities before being asked to choose. Adds a FlowFuse Expert section built the same way as the connect section, so both paths have a destination and a CTA. Also fixes the diagram rendering at zero height, and stops the disabled Expert modal and its script from shipping: an HTML comment does not prevent Nunjucks executing an include. --- src/ai.njk | 158 ++++++++++++++++++----- src/images/ai/connect-your-own-agent.svg | 2 +- 2 files changed, 130 insertions(+), 30 deletions(-) diff --git a/src/ai.njk b/src/ai.njk index 240de6bebd..1b989fd778 100644 --- a/src/ai.njk +++ b/src/ai.njk @@ -89,19 +89,56 @@ capabilityGroups: status: "Available" statusKind: "live" description: "Build your own MCP servers and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register." +scenarios: + eyebrow: "What people do with it" + title: "What you can do with AI here" + subtitle: "Concrete things teams run on the platform today, whichever agent is doing the work." + items: + - name: "Ask the plant anything" + svgPath: "components/icons/chat-bubble-left-right.svg" + description: "Ask in plain language what a line is doing and get an answer grounded in live machine state, alarms and logs. No report to build and no database to query by hand." + - name: "Build a flow by describing it" + svgPath: "components/icons/sparkles.svg" + description: "Say what you need and watch it appear on the canvas: nodes wired up, configured, and corrected against Node-RED's own validation when something is wrong." + - name: "Understand a flow you inherited" + svgPath: "components/icons/book-open.svg" + description: "Point AI at an unfamiliar flow and get an explanation of what it actually does, so a flow one person wrote does not stay a flow only that person can maintain." + - name: "Inspect parts at the edge" + svgPath: "components/icons/camera.svg" + description: "Run vision models next to the machine with camera ingest over RTSP. Inference keeps working offline and no image data leaves your network." + - name: "Act on live systems, behind approval" + svgPath: "components/icons/bolt.svg" + description: "Let AI propose changes to running systems, with every write held for a person to approve, edit or reject before it reaches a machine." + - name: "Use any model in a flow" + svgPath: "components/icons/cog-6-tooth.svg" + description: "Bring OpenAI, Anthropic, Gemini or a local model via Ollama into any flow with your own keys, or keep everything local when data cannot leave the plant." choose: - title: "Two ways to get AI into your operations" + eyebrow: "Two ways in" + title: "So how do you want to get it?" + subtitle: "The capabilities above are the same either way. What differs is whose agent does the work." options: - label: "Use FlowFuse Expert" eyebrow: "Our agent" description: "Built into the platform and the Node-RED editor. Nothing to configure, nothing to get approved." - href: "#capabilities" + href: "#flowfuse-expert" event: "expert" - label: "Connect your own agent" eyebrow: "Your agent, your model" description: "Point the AI your company already uses at FlowFuse and it works your operations." href: "#connect-your-agent" event: "byo-agent" +expert: + eyebrow: "Our agent" + title: "FlowFuse Expert is already in your editor" + subtitle: "Built into the platform and the Node-RED editor. Nothing to install, nothing to get approved, no connector to configure." + differentiator: "It is not a general assistant pointed at your screen. Expert knows your flows, your installed nodes, your live data and your environment, which is why it can produce something that runs rather than something that merely looks right." + steps: + - title: "Open any instance" + description: "Expert is in the editor and across the platform already. There is no setup step." + - title: "Ask for what you need" + description: "Build a flow, explain one you inherited, write the Function node, or ask what is running." + - title: "Approve what it proposes" + description: "Every write waits for you. Approve it, edit it, or reject it before anything reaches a machine." connect: eyebrow: "New in 3.0" title: "FlowFuse becomes an extension of your own agent" @@ -168,24 +205,19 @@ governance:

{{ p | safe }}

{% endfor %}
- -
-

{{ choose.title | striptags }}

-
- {% for opt in choose.options %} - -

{{ opt.eyebrow }}

-

{{ opt.label }}

-

{{ opt.description }}

- - {% endfor %} -
+ {# + The live FlowFuse Expert prompt widget is disabled for now, not removed. + These are Nunjucks comments on purpose: an HTML comment does not stop + Nunjucks executing the include, so the modal and its script would still + ship. To re-enable, move these two lines out of this comment block. + {% include "components/ai-chat-interface.njk" %} + {% include "components/ai-expert-modal.njk" %} + #} +
+ Start a free trial + {{ hero.buttonText }}
@@ -193,18 +225,27 @@ governance:
- -
-
-
-
- {% image "./images/ai/ai-ui.png", "FlowFuse Expert showing AI-generated flow suggestions", [1200] %} + +
+
+
+

{{ scenarios.eyebrow }}

+

{{ scenarios.title | safe }}

+

{{ scenarios.subtitle }}

+
+
+ {% for item in scenarios.items %} +
+ +

{{ item.name }}

+

{{ item.description }}

+ {% endfor %}
+ @@ -249,7 +290,66 @@ governance: {% endfor %}
- +
+
+
+

{{ choose.eyebrow }}

+

{{ choose.title | safe }}

+

{{ choose.subtitle }}

+
+
+ {% for opt in choose.options %} + +

{{ opt.eyebrow }}

+

{{ opt.label }}

+

{{ opt.description }}

+ + {% endfor %} +
+
+
+ + +
+
+
+

{{ expert.eyebrow }}

+

{{ expert.title | safe }}

+

{{ expert.subtitle }}

+
+ +

{{ expert.differentiator }}

+ +
+ {% for step in expert.steps %} +
+

0{{ loop.index }}

+

{{ step.title }}

+

{{ step.description }}

+
+ {% endfor %} +
+ +
+
+ {% image "./images/ai/ai-ui.png", "FlowFuse Expert showing AI-generated flow suggestions", [1200] %} +
+
+ +
+ Start a free trial + Already a customer? Open an instance and ask it something +
+
+
+ +
diff --git a/src/images/ai/connect-your-own-agent.svg b/src/images/ai/connect-your-own-agent.svg index b1d4782e2b..9ec26d3f53 100644 --- a/src/images/ai/connect-your-own-agent.svg +++ b/src/images/ai/connect-your-own-agent.svg @@ -1,4 +1,4 @@ - How your own agent reaches FlowFuse From 7567c0edbbdcd8f3dff20d6699a0471b986573d4 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 24 Aug 2026 14:22:17 +0200 Subject: [PATCH 3/8] /ai: drop the exposure wording from the diagram caption --- src/images/ai/connect-your-own-agent.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/images/ai/connect-your-own-agent.svg b/src/images/ai/connect-your-own-agent.svg index 9ec26d3f53..118c1de9d1 100644 --- a/src/images/ai/connect-your-own-agent.svg +++ b/src/images/ai/connect-your-own-agent.svg @@ -50,6 +50,6 @@ when you open it - Your agent talks to one address. FlowFuse reaches the instances, so they stay unexposed. + Your agent talks to one address. FlowFuse reaches the instances, so they are never opened up. From 777b614a263e4e4ad0ea5701f9833a153b7de1d3 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 24 Aug 2026 17:18:27 +0200 Subject: [PATCH 4/8] /ai: rebuild the page around one agent picker in the hero Replaces the two path sections and the fork cards with a single tabbed picker in the hero, FlowFuse Expert first, so the choice is made once. Adds the five agent marks, an auto-rotating showcase well with per-tab timing, and media wells on the capability items. Moves AI Governance directly below the hero as shared ground. Also drops a bespoke copy button in favour of the existing ff-command component, which has the non-secure-context fallback the bespoke one lacked. --- src/ai.njk | 656 +++++++++++---------- src/css/style.css | 97 +++ src/images/ai/agents/README.md | 25 + src/images/ai/agents/chatgpt.svg | 3 + src/images/ai/agents/claude.svg | 3 + src/images/ai/agents/flowfuse-expert.svg | 2 + src/images/ai/agents/gemini.svg | 10 + src/images/ai/agents/microsoft-copilot.svg | 40 ++ 8 files changed, 511 insertions(+), 325 deletions(-) create mode 100644 src/images/ai/agents/README.md create mode 100644 src/images/ai/agents/chatgpt.svg create mode 100644 src/images/ai/agents/claude.svg create mode 100644 src/images/ai/agents/flowfuse-expert.svg create mode 100644 src/images/ai/agents/gemini.svg create mode 100644 src/images/ai/agents/microsoft-copilot.svg diff --git a/src/ai.njk b/src/ai.njk index 1b989fd778..4abf843952 100644 --- a/src/ai.njk +++ b/src/ai.njk @@ -23,22 +23,18 @@ capabilityGroups: subtitle: "FlowFuse Expert turns intent into working industrial applications, right in the editor." items: - name: "AI-assisted engineering" - svgPath: "components/icons/code-bracket.svg" status: "Available" statusKind: "live" description: "Generate and edit Node-RED flows, Function node JavaScript, SQL queries and dashboard UI from plain language, and ask Expert to explain any existing flow so any engineer can pick it up. It works inline in the editor your team already uses, so there is no separate tool to context-switch into. That turns unfamiliar or inherited flows into something the whole team can read and maintain." - name: "Prompt-to-app" - svgPath: "components/icons/sparkles.svg" status: "Available" statusKind: "live" description: "Describe the application you need and FlowFuse Expert agentically builds the starting flows and logic directly in your workspace. You begin from a working draft instead of a blank canvas, then refine it like any other flow. Everything it creates stays inside the platform, so the same permissions and review apply from the first node." - name: "Build your own AI agents" - svgPath: "components/icons/squares-plus.svg" status: "Available" statusKind: "live" description: "Start from an agent blueprint, like the LLM chat agent or RAG chat agent, to stand up a task-specific AI agent grounded in your own data, tools and context. It gives you a proven structure to adapt rather than wiring an agent up from scratch. With MCP servers you can give the agent access to anything, including your RAG applications. Because it runs on the platform, the agent operates within the access you grant it." - - name: "Built-in product expert" - svgPath: "components/icons/book-open.svg" + - name: "Built-in product knowledge" status: "Available" statusKind: "live" description: "A chat assistant with answers grounded in FlowFuse and Node-RED documentation, so guidance comes from the product, not stale wikis. Ask how a node works or how to approach a build and get an answer without leaving your workspace. It shortens the path from question to working flow for new and experienced users alike." @@ -47,22 +43,20 @@ capabilityGroups: subtitle: "AI that acts inside your flows and answers questions about live operations, always behind your controls." items: - name: "Governed autonomous operations" - svgPath: "components/icons/bolt.svg" + externalNote: "For external agents, approval cards do not apply. The access you granted is the control, enforced on every call." status: "Available" statusKind: "live" description: "Platform Automations let AI act on live systems, with every write behind an approval card, session-scoped and fully audited. A person approves, edits or rejects each proposed change before it reaches a machine. Nothing runs outside the permissions and RBAC that already govern your teams." - name: "Ask your plant anything" - svgPath: "components/icons/chat-bubble-left-right.svg" + externalNote: "For external agents, whether they can reach the MCP servers you build in your own flows depends on the agent." status: "Available" statusKind: "live" description: "In Insights mode, ask questions in natural language and get answers grounded in live machine state, alarms and logs. Operators and engineers can check what is happening on the floor without building a report or querying a database by hand. Table and MQTT-broker reading are coming soon." - name: "Automated visual inspection" - svgPath: "components/icons/camera.svg" status: "Available" statusKind: "live" description: "Run ONNX vision models inside flows next to the machine, with camera ingest over RTSP, for inference that works offline and keeps data on your network. Detection results flow into the same logic as any other signal, so you can trigger alerts or actions from what the model sees. Running at the edge means no round trip to the cloud and no image data leaving the plant." - name: "Use any model within flows" - svgPath: "components/icons/cog-6-tooth.svg" status: "Available" statusKind: "live" description: "Certified LLM nodes bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control." @@ -71,12 +65,10 @@ capabilityGroups: subtitle: "The agent your company already approved, working your platform and building in Node-RED. Your agent, your model, on a boundary you set." items: - name: "Bring your own AI agent" - svgPath: "components/icons/arrows-right-left.svg" status: "Available" statusKind: "live" description: "Point Microsoft Copilot, ChatGPT, Claude or a local model at FlowFuse, sign in, and it can query your teams and instances and build Node-RED applications for you. Where company policy only permits an approved AI assistant, this is how that assistant reaches your operations, instead of nobody getting AI on the platform at all." - name: "You decide what it reaches" - svgPath: "components/icons/lock-closed.svg" status: "Available" statusKind: "live" description: "Signing in asks which teams the agent may act on and whether it may make changes at all. FlowFuse holds you to that on every call, so a read-only grant is refused whatever the agent tries. Nothing an agent reaches can delete an instance, an application, a snapshot or a team, and deploying stays yours." @@ -85,110 +77,100 @@ capabilityGroups: subtitle: "The other direction. Your flows become tools that an agent can call as part of its work." items: - name: "AI that uses your tools" - svgPath: "components/icons/puzzle-piece.svg" + externalNote: "Anyone can build them. For external agents, whether they can call them depends on the agent." status: "Available" statusKind: "live" description: "Build your own MCP servers and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register." -scenarios: - eyebrow: "What people do with it" - title: "What you can do with AI here" - subtitle: "Concrete things teams run on the platform today, whichever agent is doing the work." - items: - - name: "Ask the plant anything" - svgPath: "components/icons/chat-bubble-left-right.svg" - description: "Ask in plain language what a line is doing and get an answer grounded in live machine state, alarms and logs. No report to build and no database to query by hand." - - name: "Build a flow by describing it" - svgPath: "components/icons/sparkles.svg" - description: "Say what you need and watch it appear on the canvas: nodes wired up, configured, and corrected against Node-RED's own validation when something is wrong." - - name: "Understand a flow you inherited" - svgPath: "components/icons/book-open.svg" - description: "Point AI at an unfamiliar flow and get an explanation of what it actually does, so a flow one person wrote does not stay a flow only that person can maintain." - - name: "Inspect parts at the edge" - svgPath: "components/icons/camera.svg" - description: "Run vision models next to the machine with camera ingest over RTSP. Inference keeps working offline and no image data leaves your network." - - name: "Act on live systems, behind approval" - svgPath: "components/icons/bolt.svg" - description: "Let AI propose changes to running systems, with every write held for a person to approve, edit or reject before it reaches a machine." - - name: "Use any model in a flow" - svgPath: "components/icons/cog-6-tooth.svg" - description: "Bring OpenAI, Anthropic, Gemini or a local model via Ollama into any flow with your own keys, or keep everything local when data cannot leave the plant." -choose: - eyebrow: "Two ways in" - title: "So how do you want to get it?" - subtitle: "The capabilities above are the same either way. What differs is whose agent does the work." - options: - - label: "Use FlowFuse Expert" - eyebrow: "Our agent" - description: "Built into the platform and the Node-RED editor. Nothing to configure, nothing to get approved." - href: "#flowfuse-expert" - event: "expert" - - label: "Connect your own agent" - eyebrow: "Your agent, your model" - description: "Point the AI your company already uses at FlowFuse and it works your operations." - href: "#connect-your-agent" - event: "byo-agent" -expert: - eyebrow: "Our agent" - title: "FlowFuse Expert is already in your editor" - subtitle: "Built into the platform and the Node-RED editor. Nothing to install, nothing to get approved, no connector to configure." - differentiator: "It is not a general assistant pointed at your screen. Expert knows your flows, your installed nodes, your live data and your environment, which is why it can produce something that runs rather than something that merely looks right." - steps: - - title: "Open any instance" - description: "Expert is in the editor and across the platform already. There is no setup step." - - title: "Ask for what you need" - description: "Build a flow, explain one you inherited, write the Function node, or ask what is running." - - title: "Approve what it proposes" - description: "Every write waits for you. Approve it, edit it, or reject it before anything reaches a machine." connect: - eyebrow: "New in 3.0" - title: "FlowFuse becomes an extension of your own agent" - subtitle: "Your agent, your model, working your platform and building in Node-RED. Only your own authenticated agent can connect." - endpointLabel: "Add this address in your agent's connector settings" endpoint: "https://app.flowfuse.com/api/v1/mcp" endpointNote: "Self-hosted, use your own platform address." - steps: - - title: "Add the address" - description: "Paste it into your agent's connector settings. Where that lives depends on your agent." - - title: "Sign in to FlowFuse" - description: "A normal FlowFuse sign-in. There is no key to generate and nothing to paste." - - title: "Choose what it reaches" - description: "Which teams the agent may act on, and whether it may make changes at all." + step1: + title: "Copy the FlowFuse connector URL" + description: "You will paste this into your agent in the next step." + 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." + # Each client renders `logo` when set and its name as text when not. Drop a mark in + # src/images/ai/agents/ and add e.g. `logo: "/images/ai/agents/claude.svg"` to that + # client. See the README in that directory for sources and the trademark position. clients: - - name: "Microsoft Copilot" - where: "Copilot Studio, Tools, add a Model Context Protocol tool" - - name: "ChatGPT" - where: "Settings, connectors, developer mode" - - name: "Claude" - where: "Settings, Customize, Connectors" - - name: "Local models" - where: "Your own MCP client, pointed at your own model" - adminTitle: "If your IT team controls which AI you use" - adminBody: "Adding a connector is often an admin's call, and on ChatGPT and Claude an administrator or owner adds it once for the organisation before anyone connects. It is a small, specific ask: one address, and each person still signs in with their own FlowFuse account and chooses what the agent may reach." - storeBody: "Coming soon: FlowFuse in the Microsoft Copilot, Claude and ChatGPT connector directories. No custom connector, no admin request. FlowFuse Cloud first." - eyesTitle: "It builds on the canvas in front of you" - eyesBody: "Node-RED has always been visual development. Asking about your platform needs nothing open, and when an agent builds a flow it builds it in an editor session you opened for it, so you watch the nodes appear and you deploy. Visual development, now AI-assisted, with your eyes on it." - rulesTitle: "Your agent, your rules" - rules: - - "FlowFuse marks every tool it offers as read-only or as making a change, so your agent knows before it acts." - - "Your agent applies its own confirmation behaviour on top of that." - - "The access you granted is enforced by FlowFuse on every call, whatever the agent decides to try." - codingNote: "Command-line and editor agents such as Claude Code, Cursor, Visual Studio Code and Gemini CLI connect the same way." + - id: "expert" + logo: "/images/ai/agents/flowfuse-expert.svg" + name: "FlowFuse Expert" + builtIn: true + step1Title: "Sign in to FlowFuse" + step1Body: "A new account puts you in a hosted instance with Expert already in the editor. Nothing to add, no connector, no token." + step1Label: "Start a free trial" + step2Title: "Or start with the Device Agent" + step2Body: "Already running Node-RED on your own hardware? Connect it as a remote instance and Expert works there in the same way." + step2Label: "Install the Device Agent" + step2Url: "/docs/device-agent/quickstart/" + step3Title: "Ask for what you need" + step3Body: "Build a flow, explain one you inherited, write the Function node, or ask what is running on the floor. Every write waits for you to approve, edit or reject." + noStep3Cta: true + - id: "copilot" + logo: "/images/ai/agents/microsoft-copilot.svg" + name: "Microsoft Copilot" + step2Title: "Go to Copilot Studio, then Tools" + step2Body: "Add a tool, New tool, Model Context Protocol. Paste the URL as the server address and describe what it is for, since the orchestrator reads that to decide when to call it." + step2Label: "Open Copilot Studio" + step2Url: "https://copilotstudio.microsoft.com/" + - id: "chatgpt" + logo: "/images/ai/agents/chatgpt.svg" + name: "ChatGPT" + step2Title: "Go to Settings, then Connectors" + step2Body: "A workspace administrator enables custom connectors first, under Permissions and Roles. Then add FlowFuse as a connector and paste the URL." + step2Label: "Open ChatGPT" + step2Url: "https://chatgpt.com/" + - id: "claude" + logo: "/images/ai/agents/claude.svg" + name: "Claude" + step2Title: "Go to Settings, Customize, Connectors" + step2Body: "Add a custom connector and paste the URL. On Team and Enterprise an owner adds it once for the organisation, then everyone connects their own." + step2Label: "Open Claude connectors" + step2Url: "https://claude.ai/settings/connectors" + - id: "gemini" + logo: "/images/ai/agents/gemini.svg" + name: "Gemini" + step2Title: "Go to Connected apps, then Add MCP Server" + step2Body: "In Gemini Enterprise, open Settings and help, then Manage team, then Connected apps, and add the FlowFuse URL as an MCP server. Gemini supports the Streamable HTTP transport, which is what FlowFuse serves." + step2Label: "Open Gemini" + step2Url: "https://gemini.google.com/" + - id: "local" + logoInclude: "components/icons/server-stack.svg" + name: "Local and Custom Agents" + step2Title: "Add it to your MCP client's config" + step2Body: "Any MCP-capable client works, pointed at your own model, so nothing has to leave your network." + step2Label: "See the documentation" + step2Url: "/docs/user/expert/third-party-agents/#local-and-self-hosted-models" + codingNote: "Command-line and editor agents such as Claude Code, Cursor, Visual Studio Code and Gemini CLI connect to the same URL." +showcase: + interval: 6000 + slides: + - id: "expert" + label: "FlowFuse Expert" + media: "https://placehold.co/1600x900/eef2ff/4f46e5/png?text=FlowFuse+Expert+building+a+flow" + mediaAlt: "Placeholder. FlowFuse Expert building a flow on the Node-RED canvas." + - id: "external" + label: "Your own agent" + media: "https://placehold.co/1600x900/eef2ff/4f46e5/png?text=External+agent+driving+FlowFuse" + mediaAlt: "Placeholder. An external AI agent driving FlowFuse and building in Node-RED." governance: - title: "Governance you can prove" + title: "AI Governance you can prove" subtitle: "The control plane every AI action runs through, the same one that governs your teams." items: - - svgPath: "components/icons/check-circle.svg" - title: "Approval cards on writes" - description: "FlowFuse Expert and Platform Automations hold every write action for a human to approve, reject or edit." - svgPath: "components/icons/lock-closed.svg" - title: "Scoped on connect" - description: "A connected agent gets the teams you granted and nothing else, enforced on every call it makes." + title: "Only the teams you grant" + description: "AI reaches the teams you allow and nothing else, enforced by the platform on every call." - svgPath: "components/icons/shield-check.svg" title: "Role-based access" description: "The same RBAC that governs your teams governs what AI can see and do." + - svgPath: "components/icons/check-circle.svg" + title: "Nothing gets deleted" + description: "No agent can remove an instance, an application, a snapshot or a team. There is no tool for it." - svgPath: "components/icons/clipboard-document-check.svg" title: "Audit on everything" - description: "Every action AI touches is logged, so you can show exactly what happened and when." + description: "Every action AI takes is logged and attributed, so you can show exactly what happened and when." ---
@@ -213,250 +195,171 @@ governance: {% include "components/ai-chat-interface.njk" %} {% include "components/ai-expert-modal.njk" %} #} -
- Start a free trial - {{ hero.buttonText }} -
-
-
-
-
- - - -
-
-
-

{{ scenarios.eyebrow }}

-

{{ scenarios.title | safe }}

-

{{ scenarios.subtitle }}

-
-
- {% for item in scenarios.items %} -
- -

{{ item.name }}

-

{{ item.description }}

-
+ + +
+
+ {% for client in connect.clients %} + {% endfor %}
-
-
- -
-
-
-

{{ capabilityIntro.title | safe }}

-

{{ capabilityIntro.subtitle }}

-
- {% for group in capabilityGroups %} -
- -
-

- 0{{ loop.index }} - {{ group.eyebrow }} -

-

{{ group.title }}

-

{{ group.subtitle }}

-
- -
- {% for item in group.items %} -
-
- -
-
- {{ item.name }} - {% if item.statusKind == 'soon' %} - Coming soon - {% endif %} -
-

{{ item.description | safe }}

-
+ {% for client in connect.clients %} +
+ +
+

01

+

{% if client.builtIn %}{{ client.step1Title }}{% else %}{{ connect.step1.title }}{% endif %}

+

{% if client.builtIn %}{{ client.step1Body }}{% else %}{{ connect.step1.description }}{% endif %}

+ {% if client.builtIn and client.step1Label %} +
+ {{ client.step1Label | upper }} +
+ {% endif %} + {% if not client.builtIn %} +
+

{{ connect.endpointNote }}

+
+ {{ connect.endpoint }} +
- {% endfor %} + {% endif %}
-
- {% endfor %} -
-
- -
-
-
-

{{ choose.eyebrow }}

-

{{ choose.title | safe }}

-

{{ choose.subtitle }}

-
-
- {% for opt in choose.options %} - -

{{ opt.eyebrow }}

-

{{ opt.label }}

-

{{ opt.description }}

- - {% endfor %} -
-
-
- - -
-
-
-

{{ expert.eyebrow }}

-

{{ expert.title | safe }}

-

{{ expert.subtitle }}

-
- -

{{ expert.differentiator }}

-
- {% for step in expert.steps %} -
-

0{{ loop.index }}

-

{{ step.title }}

-

{{ step.description }}

+
+

02

+

{{ client.step2Title }}

+

{{ client.step2Body }}

+
+ {{ client.step2Label }} +
- {% endfor %} -
-
-
- {% image "./images/ai/ai-ui.png", "FlowFuse Expert showing AI-generated flow suggestions", [1200] %} +
+

03

+

{% if client.step3Title %}{{ client.step3Title }}{% else %}{{ connect.step3.title }}{% endif %}

+

{% if client.step3Body %}{{ client.step3Body }}{% else %}{{ connect.step3.description }}{% endif %}

+ {% if not client.noStep3Cta %} +
+ GET STARTED +
+ {% endif %}
- -
- Start a free trial - Already a customer? Open an instance and ask it something -
+ {% endfor %}
-
+

{{ connect.codingNote }} See the documentation.

- -
-
-
-

{{ connect.eyebrow }}

-

{{ connect.title | safe }}

-

{{ connect.subtitle }}

-
- - -
-

{{ connect.endpointLabel }}

-
- {{ connect.endpoint }} - +
-

{{ connect.endpointNote }}

+
+ - -
- {% for step in connect.steps %} -
-

0{{ loop.index }}

-

{{ step.title }}

-

{{ step.description }}

-
+ +
+
+
+ {% for slide in showcase.slides %} + {% endfor %}
- - -
- {% for client in connect.clients %} -
-
- {% if client.logo %} - {{ client.name }} - {% else %} - {{ client.name }} - {% endif %} -
-

{{ client.where }}

+
+ {% for slide in showcase.slides %} +
+ {{ slide.mediaAlt }}
{% endfor %}
-

{{ connect.codingNote }} See the documentation.

+
+
- -
-
-

{{ connect.eyesTitle }}

-

{{ connect.eyesBody }}

-
-
-

{{ connect.rulesTitle }}

-
    - {% for rule in connect.rules %} -
  • - 0{{ loop.index }} - {{ rule }} -
    • - {% endfor %} -
-
-
+ -
+

{{ governance.title | safe }}

@@ -474,16 +377,119 @@ document.querySelectorAll('.ff-copy-endpoint').forEach(function (btn) {
- - - -
-
-

Where AI meets your operations

-

The use cases pair with FlowFuse AI, from governed agent access to AI-assisted monitoring.

- {% set featuredUseCases = ["production-monitoring", "shop-floor-communication"] %} - {% include "components/use-case-links.njk" %} -

See all use cases

+ +
+
+
+

{{ capabilityIntro.title | safe }}

+

{{ capabilityIntro.subtitle }}

+
+ {% for group in capabilityGroups %} +
+ +
+

+ 0{{ loop.index }} + {{ group.eyebrow }} +

+

{{ group.title }}

+

{{ group.subtitle }}

+
+ +
+ {% for item in group.items %} +
+ +
+ {% if item.media %} + {% if ".webm" in item.media or ".mp4" in item.media %} + + {% else %} + {{ item.mediaAlt }} + {% endif %} + {% endif %} +
+
+ {{ item.name }} + {% if item.statusKind == 'soon' %} + Coming soon + {% endif %} +
+

{{ item.description | safe }}

+ {% if item.externalNote %} +

{{ item.externalNote }}

+ {% endif %} +
+ {% endfor %} +
+
+ {% endfor %}
+ diff --git a/src/css/style.css b/src/css/style.css index 0be94f9c0a..0aa1b7d2cb 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -3248,6 +3248,103 @@ lite-youtube::before { height: 2.5rem; color: var(--color-indigo-600); } +/* "Differs by agent" clause: sits under a capability whose behaviour is not identical + on the FlowFuse Expert path and the bring-your-own-agent path. Quieter than the body + copy, and set off by a rule, so it reads as a qualification rather than a feature. */ +.ff-cap-differs { + font-size: 0.875rem; + line-height: 1.6; + color: var(--color-gray-500); + padding-left: 0.875rem; + border-left: 2px solid var(--color-indigo-200); +} + +/* Showcase tabs: text labels with a timing line, not buttons. The line under the active + tab fills over the rotation interval so the switch is expected rather than sudden. */ +.ff-show-tabs { + display: flex; + gap: 1rem; + margin-bottom: 1rem; +} + +/* Each tab takes an equal share of the row, so the timing lines together span the + full width of the well below them. */ +.ff-show-tab { + flex: 1 1 0; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0; + background: none; + border: 0; + text-align: left; + cursor: pointer; +} +.ff-show-tab__label { + font-size: 0.95rem; + font-weight: 400; + color: var(--color-gray-500); + transition: color 0.15s ease; + white-space: nowrap; +} +.ff-show-tab.is-active .ff-show-tab__label, +.ff-show-tab:hover .ff-show-tab__label { + color: var(--color-gray-900); +} +.ff-show-tab.is-active .ff-show-tab__label { font-weight: 500; } + +.ff-show-tab__track { + display: block; + height: 2px; + width: 100%; + background-color: var(--color-gray-200); + overflow: hidden; +} +.ff-show-tab__fill { + display: block; + height: 100%; + width: 0; + background-color: var(--color-indigo-600); +} +.ff-show-tab__fill.is-full { width: 100%; } +.ff-show-tab__fill.is-running { + animation: ffShowFill var(--ff-show-duration, 6000ms) linear forwards; +} +@keyframes ffShowFill { + from { width: 0; } + to { width: 100%; } +} +@media (prefers-reduced-motion: reduce) { + .ff-show-tab__fill.is-running { animation: none; width: 100%; } +} + +/* Agent tab strip: scrolls sideways rather than wrapping, so the row stays one line at + any width. Thin scrollbar so it reads as a control, not a scroll container. */ +.ff-agent-tabs { + scrollbar-width: thin; + -webkit-overflow-scrolling: touch; + overscroll-behavior-x: contain; +} +.ff-agent-tabs::-webkit-scrollbar { + height: 6px; +} +.ff-agent-tabs::-webkit-scrollbar-thumb { + background-color: var(--color-gray-300); + border-radius: 3px; +} + +/* Media well: a reserved 16:9 slot under each capability, for a screenshot or a + short loop. Deliberately visible while empty so the page shows where the assets + go, rather than collapsing and then reflowing when they land. */ +.ff-cap-well { + aspect-ratio: 16 / 9; + width: 100%; + overflow: hidden; + background-color: var(--color-white); + border: 1px solid var(--color-indigo-100); +} + .ff-cap-icon svg { width: 1.875rem; height: 1.875rem; diff --git a/src/images/ai/agents/README.md b/src/images/ai/agents/README.md new file mode 100644 index 0000000000..d4c5dc581f --- /dev/null +++ b/src/images/ai/agents/README.md @@ -0,0 +1,25 @@ +# Agent marks for the /ai connector tabs + +Each tab in the "connect your own agent" section renders `client.logo` when it is set in +`src/ai.njk`, and falls back to the agent's name as text when it is not. + +| File | Tab | Source | +| --- | --- | --- | +| `microsoft-copilot.svg` | Microsoft Copilot | `adoption.microsoft.com/wp-content/uploads/2023/09/icon-copilot.svg`, a Microsoft-owned domain. **Still needs a legal check**: Microsoft's trademark guidelines generally require permission to use its marks in a way that presents a product relationship, and this came from a marketing page rather than a brand kit with usage terms attached. | +| `chatgpt.svg` | ChatGPT | OpenAI brand kit, `OAI_OpenAI-Blossom_Black.svg`, downloaded by hand from `openai.com/brand` because that page blocks automated fetching. This is the OpenAI symbol, which is the icon form their kit provides. | +| `claude.svg` | Claude | Anthropic press kit, `anthropic.com/press-kit`, which redirects to an official CDN zip. File is "Claude Spark - Clay", the icon form intended to sit beside a label. Unmodified, in its own brand colour. | +| `gemini.svg` | Gemini | Google's own CDN, the Gemini sparkle used by Gemini's product surfaces. | +| _(none)_ | Local and Custom Agents | Not a brand mark by design. The repo icon `components/icons/server-stack.svg` is inlined instead of linked as a file, so it inherits `currentColor` and turns white when the tab is active. | + +All marks are used unmodified, at their own aspect ratio, in a 16px-tall slot beside the +agent's name. None is altered in colour or proportion. + +To add or replace one, drop the file here and set the path on that client: + +```yaml + - id: "claude" + logo: "/images/ai/agents/claude.svg" +``` + +Leave `logo` unset until the file exists. Setting it early renders a broken image, whereas +leaving it unset renders the name as text, which is the intended fallback. diff --git a/src/images/ai/agents/chatgpt.svg b/src/images/ai/agents/chatgpt.svg new file mode 100644 index 0000000000..7c119340c4 --- /dev/null +++ b/src/images/ai/agents/chatgpt.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/ai/agents/claude.svg b/src/images/ai/agents/claude.svg new file mode 100644 index 0000000000..64fe70ca8f --- /dev/null +++ b/src/images/ai/agents/claude.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/ai/agents/flowfuse-expert.svg b/src/images/ai/agents/flowfuse-expert.svg new file mode 100644 index 0000000000..7ce1777f2d --- /dev/null +++ b/src/images/ai/agents/flowfuse-expert.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/images/ai/agents/gemini.svg b/src/images/ai/agents/gemini.svg new file mode 100644 index 0000000000..4545c8331f --- /dev/null +++ b/src/images/ai/agents/gemini.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/ai/agents/microsoft-copilot.svg b/src/images/ai/agents/microsoft-copilot.svg new file mode 100644 index 0000000000..f93be73b7a --- /dev/null +++ b/src/images/ai/agents/microsoft-copilot.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From f0deea71ebec67ff52e46350373c959d4ad8ccb2 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 24 Aug 2026 17:35:44 +0200 Subject: [PATCH 5/8] /ai: draw the showcase schematics instead of using placeholders Expert nested inside the platform, an external agent overlapping it from outside. Replaces the placehold.co images, so the page makes no external image requests. --- src/ai.njk | 26 +++++++++++++------------- src/images/ai/schematic-expert.svg | 20 ++++++++++++++++++++ src/images/ai/schematic-external.svg | 20 ++++++++++++++++++++ 3 files changed, 53 insertions(+), 13 deletions(-) create mode 100644 src/images/ai/schematic-expert.svg create mode 100644 src/images/ai/schematic-external.svg diff --git a/src/ai.njk b/src/ai.njk index 4abf843952..e5985a90e9 100644 --- a/src/ai.njk +++ b/src/ai.njk @@ -111,35 +111,35 @@ connect: - id: "copilot" logo: "/images/ai/agents/microsoft-copilot.svg" name: "Microsoft Copilot" - step2Title: "Go to Copilot Studio, then Tools" - step2Body: "Add a tool, New tool, Model Context Protocol. Paste the URL as the server address and describe what it is for, since the orchestrator reads that to decide when to call it." + step2Title: "Copilot Studio → Tools → Add a tool" + step2Body: "Choose Model Context Protocol and paste the URL. Describe what it is for: the orchestrator reads that to decide when to call it." step2Label: "Open Copilot Studio" step2Url: "https://copilotstudio.microsoft.com/" - id: "chatgpt" logo: "/images/ai/agents/chatgpt.svg" name: "ChatGPT" - step2Title: "Go to Settings, then Connectors" - step2Body: "A workspace administrator enables custom connectors first, under Permissions and Roles. Then add FlowFuse as a connector and paste the URL." + step2Title: "Settings → Connectors" + step2Body: "An administrator enables custom connectors first, under Permissions and Roles." step2Label: "Open ChatGPT" step2Url: "https://chatgpt.com/" - id: "claude" logo: "/images/ai/agents/claude.svg" name: "Claude" - step2Title: "Go to Settings, Customize, Connectors" - step2Body: "Add a custom connector and paste the URL. On Team and Enterprise an owner adds it once for the organisation, then everyone connects their own." + step2Title: "Settings → Customize → Connectors" + step2Body: "Add a custom connector and paste the URL. On Team and Enterprise an owner adds it once for everyone." step2Label: "Open Claude connectors" step2Url: "https://claude.ai/settings/connectors" - id: "gemini" logo: "/images/ai/agents/gemini.svg" name: "Gemini" - step2Title: "Go to Connected apps, then Add MCP Server" - step2Body: "In Gemini Enterprise, open Settings and help, then Manage team, then Connected apps, and add the FlowFuse URL as an MCP server. Gemini supports the Streamable HTTP transport, which is what FlowFuse serves." + step2Title: "Settings → Manage team → Connected apps" + step2Body: "Add the FlowFuse URL as an MCP server." step2Label: "Open Gemini" step2Url: "https://gemini.google.com/" - id: "local" logoInclude: "components/icons/server-stack.svg" name: "Local and Custom Agents" - step2Title: "Add it to your MCP client's config" + step2Title: "Your MCP client's config" step2Body: "Any MCP-capable client works, pointed at your own model, so nothing has to leave your network." step2Label: "See the documentation" step2Url: "/docs/user/expert/third-party-agents/#local-and-self-hosted-models" @@ -149,12 +149,12 @@ showcase: slides: - id: "expert" label: "FlowFuse Expert" - media: "https://placehold.co/1600x900/eef2ff/4f46e5/png?text=FlowFuse+Expert+building+a+flow" - mediaAlt: "Placeholder. FlowFuse Expert building a flow on the Node-RED canvas." + media: "/images/ai/schematic-expert.svg" + mediaAlt: "FlowFuse Expert sits inside the FlowFuse platform and Node-RED, as part of it." - id: "external" label: "Your own agent" - media: "https://placehold.co/1600x900/eef2ff/4f46e5/png?text=External+agent+driving+FlowFuse" - mediaAlt: "Placeholder. An external AI agent driving FlowFuse and building in Node-RED." + media: "/images/ai/schematic-external.svg" + mediaAlt: "An external AI agent stays its own thing and overlaps the FlowFuse platform and Node-RED, reaching into it." governance: title: "AI Governance you can prove" subtitle: "The control plane every AI action runs through, the same one that governs your teams." diff --git a/src/images/ai/schematic-expert.svg b/src/images/ai/schematic-expert.svg new file mode 100644 index 0000000000..8a9192b5b0 --- /dev/null +++ b/src/images/ai/schematic-expert.svg @@ -0,0 +1,20 @@ + + FlowFuse Expert is part of the platform + + + + + + + + + FlowFuse Platform + Node-RED + + FlowFuse + Expert + + diff --git a/src/images/ai/schematic-external.svg b/src/images/ai/schematic-external.svg new file mode 100644 index 0000000000..b1937b7148 --- /dev/null +++ b/src/images/ai/schematic-external.svg @@ -0,0 +1,20 @@ + + An external agent reaching into the platform + + + + + + + FlowFuse Platform + Node-RED + + + + External AI agent + + From 625d1020ed8f9eb9e057f1d17ec662b7b8f81a79 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 24 Aug 2026 17:37:23 +0200 Subject: [PATCH 6/8] /ai: give the showcase band room above the tabs --- src/ai.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ai.njk b/src/ai.njk index e5985a90e9..e802faf731 100644 --- a/src/ai.njk +++ b/src/ai.njk @@ -284,7 +284,7 @@ governance: without the reader doing anything. Clicking a tab takes over and stops the rotation, which is the expected behaviour for an auto-advancing control. Honours prefers-reduced-motion by not rotating at all. Images are placeholders. --> -
+
{% for slide in showcase.slides %} From cbc62c2f84d63375cffb92cb6d8754690e610ded Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 24 Aug 2026 17:54:27 +0200 Subject: [PATCH 7/8] ai: point the connector URL at /mcp --- src/ai.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ai.njk b/src/ai.njk index e802faf731..0333943e9a 100644 --- a/src/ai.njk +++ b/src/ai.njk @@ -82,7 +82,7 @@ capabilityGroups: statusKind: "live" description: "Build your own MCP servers and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register." connect: - endpoint: "https://app.flowfuse.com/api/v1/mcp" + endpoint: "https://app.flowfuse.com/mcp" endpointNote: "Self-hosted, use your own platform address." step1: title: "Copy the FlowFuse connector URL" From b2fd57eb9564b9d10b1b088cd240c7c50a3c4812 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Wed, 26 Aug 2026 11:55:58 +0200 Subject: [PATCH 8/8] /ai: take the SEO review Title and meta description are the reviewer's suggestions verbatim. The description was 280 characters and truncated around 155, so the trust signal at the end never reached the snippet. The H1 now carries "AI for industrial applications" too. Targeting a phrase the largest heading does not say is the gap the reviewer raised. Adds meta.faq with the three questions from the review plus two specific to this launch. It uses the homepage's faq.njk and meta.faq shape, so jsonld.njk emits FAQPage structured data off the frontmatter with no extra wiring. Answers are plain text on purpose: jsonld.njk interpolates them into a JSON string, so markup in an answer would land in the schema. Internal links added where the copy already named the thing: Node-RED, ONNX, RTSP, the certified LLM nodes and MCP server nodes. Plus a further reading block pointing at the AI blog and the four posts closest to what this page claims. All ten targets verified 200 against production. --- src/ai.njk | 57 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 50 insertions(+), 7 deletions(-) diff --git a/src/ai.njk b/src/ai.njk index 0333943e9a..92e87249e3 100644 --- a/src/ai.njk +++ b/src/ai.njk @@ -3,10 +3,26 @@ layout: page nohero: true imageDescription: "Plant worker interacting with an HMI" meta: - title: "Industrial AI: Our Agent, or Bring Your Own" - description: "Industrial AI with FlowFuse: build with FlowFuse Expert, or connect the AI agent your company already approved. Microsoft Copilot, ChatGPT, Claude and local models can query your operations and build Node-RED applications, with the permissions, RBAC and audit your plants require." + faq: + - question: "What is AI for industrial applications?" + answer: > + AI for industrial applications means using AI to work with industrial data, equipment and processes. Common uses include helping engineers build automation applications, analysing machine data, inspecting products with computer vision, and allowing people or AI agents to interact with production systems. FlowFuse provides a platform for connecting these AI capabilities to industrial data and applications. + - question: "How is AI used in industrial applications?" + answer: > + AI can support different parts of an industrial operation, from engineering and quality inspection to production monitoring and automation. For example, it can help generate application logic, analyse live machine data, identify defects from camera feeds, or let an AI agent interact with industrial systems. FlowFuse brings these capabilities into the same environment as the industrial applications and data they need to work with. + - question: "What are examples of AI for industrial applications?" + answer: > + Examples include AI-assisted engineering, automated visual inspection, natural-language access to production data, AI agents that interact with industrial systems, and AI models running locally at the edge. With FlowFuse, teams can use FlowFuse Expert to build and explain applications, connect external AI agents over MCP, run ONNX vision models, and use cloud or local LLMs within industrial workflows. + - question: "Can I use my own AI agent with FlowFuse?" + answer: > + Yes. FlowFuse acts as an MCP server, so Microsoft Copilot, ChatGPT, Claude, Gemini or a local model can connect to it and work your platform. You add one address, sign in, and choose which teams the agent may act on and whether it has editing rights or read access only. Because the agent is yours, so is the model behind it. + - question: "How do you keep AI from making changes you did not approve?" + answer: > + Every AI action runs through the same permissions and role-based access control that govern your teams, enforced on every call, so a read-only grant is refused whatever the agent tries. No agent can delete an instance, an application, a snapshot or a team, deploying stays with a person, and every action is logged and attributed in the audit log. + title: "AI for Industrial Applications: Governed AI for Industry" + description: "AI for industrial applications, without losing control: use FlowFuse Expert, or connect Copilot, ChatGPT, Claude or a local model to your operations." hero: - title: "Industrial AI, Governed and Built-In" + title: "AI for Industrial Applications, Governed and Built-In" description: - "AI capability is table stakes in 2026. Governed access to your operations is the difference." buttonText: "Request a Demo" @@ -25,7 +41,7 @@ capabilityGroups: - name: "AI-assisted engineering" status: "Available" statusKind: "live" - description: "Generate and edit Node-RED flows, Function node JavaScript, SQL queries and dashboard UI from plain language, and ask Expert to explain any existing flow so any engineer can pick it up. It works inline in the editor your team already uses, so there is no separate tool to context-switch into. That turns unfamiliar or inherited flows into something the whole team can read and maintain." + description: "Generate and edit Node-RED flows, Function node JavaScript, SQL queries and dashboard UI from plain language, and ask Expert to explain any existing flow so any engineer can pick it up. It works inline in the editor your team already uses, so there is no separate tool to context-switch into. That turns unfamiliar or inherited flows into something the whole team can read and maintain." - name: "Prompt-to-app" status: "Available" statusKind: "live" @@ -55,11 +71,11 @@ capabilityGroups: - name: "Automated visual inspection" status: "Available" statusKind: "live" - description: "Run ONNX vision models inside flows next to the machine, with camera ingest over RTSP, for inference that works offline and keeps data on your network. Detection results flow into the same logic as any other signal, so you can trigger alerts or actions from what the model sees. Running at the edge means no round trip to the cloud and no image data leaving the plant." + description: "Run ONNX vision models inside flows next to the machine, with camera ingest over RTSP, for inference that works offline and keeps data on your network. Detection results flow into the same logic as any other signal, so you can trigger alerts or actions from what the model sees. Running at the edge means no round trip to the cloud and no image data leaving the plant." - name: "Use any model within flows" status: "Available" statusKind: "live" - description: "Certified LLM nodes bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control." + description: "Certified LLM nodes bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control." - title: "Connect your own agent" eyebrow: "Connect in" subtitle: "The agent your company already approved, working your platform and building in Node-RED. Your agent, your model, on a boundary you set." @@ -80,7 +96,7 @@ capabilityGroups: externalNote: "Anyone can build them. For external agents, whether they can call them depends on the agent." status: "Available" statusKind: "live" - description: "Build your own MCP servers and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register." + description: "Build your own MCP servers and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register." connect: endpoint: "https://app.flowfuse.com/mcp" endpointNote: "Self-hosted, use your own platform address." @@ -438,6 +454,33 @@ governance: {% endfor %}
+ + +
+
+

More on industrial AI

+

Worked examples and the thinking behind them, from the FlowFuse AI blog.

+ +
+
+ + +
+
+

Frequently Asked Questions

+
+ {% include "faq.njk" %} +
+
+
+