diff --git a/nuxt/app.config.ts b/nuxt/app.config.ts
index 57adfc77d7..448dbe3b20 100644
--- a/nuxt/app.config.ts
+++ b/nuxt/app.config.ts
@@ -15,5 +15,19 @@ export default defineAppConfig({
                 label: 'text-[color:var(--ui-primary)] pr-4 pt-4 pb-2',
             },
         },
+        prose: {
+            // .prose pins --tw-prose-bold to gray-500, and Tailwind Typography's
+            // strong rule reads that token, so bold text inside a callout came out
+            // grey while the callout's own body kept its colour: two colours in one
+            // sentence. Callout's theme already carries a [&_code]: rule for the same
+            // class of problem, so this extends it the same way rather than adding a
+            // stylesheet override. Applies to ::note, ::tip, ::warning and ::caution,
+            // and so to the handbook's callouts too, which had the same mismatch.
+            callout: {
+                slots: {
+                    base: '[&_strong]:text-inherit',
+                },
+            },
+        },
     },
 })
diff --git a/nuxt/components/BlogPostCta.vue b/nuxt/components/BlogPostCta.vue
index a8d5500557..f9a6198ebb 100644
--- a/nuxt/components/BlogPostCta.vue
+++ b/nuxt/components/BlogPostCta.vue
@@ -51,7 +51,10 @@ function onCtaClick (event: MouseEvent) {
 </script>
 
 <template>
-  <div class="ff-blue-card blog-post-cta p-8 sm:p-12 m-auto max-w-prose">
+  <!-- No max-w-prose: at 65ch that is narrower than the article column the card sits
+       in, so it was inset on both sides while every other block in the post, the
+       agent picker and the prompt carousel included, ran the full measure. -->
+  <div class="ff-blue-card blog-post-cta p-8 sm:p-12">
     <div class="flex flex-col gap-6 sm:gap-8 text-center sm:text-left">
       <h3 class="mt-0 mb-0 !text-3xl text-indigo-800">{{ cta?.title || currentCta.title }}</h3>
       <p class="mt-0 mb-0 max-w-4xl mx-auto sm:mx-0 leading-relaxed">{{ cta?.description || currentCta.description }}</p>
diff --git a/nuxt/components/content/AgentSetupTabs.vue b/nuxt/components/content/AgentSetupTabs.vue
index 450764eeeb..960180919e 100644
--- a/nuxt/components/content/AgentSetupTabs.vue
+++ b/nuxt/components/content/AgentSetupTabs.vue
@@ -15,13 +15,10 @@ const props = withDefaults(defineProps<{
     // Drops the FlowFuse Expert tab. For surfaces that are specifically about
     // connecting your own agent, where Expert is not one of the options.
     excludeExpert?: boolean
-    // Whether step 03 ends on a sign-up CTA. Off for documentation, where the
-    // reader already has an account.
-    signup?: boolean
     // Distinguishes this instance in PostHog. 'ai' keeps the positions the /ai
     // page already reports, so its existing numbers stay comparable.
     surface?: string
-}>(), { excludeExpert: false, signup: true, surface: 'ai' })
+}>(), { excludeExpert: false, surface: 'ai' })
 
 const capture = useCapture()
 
@@ -56,7 +53,6 @@ const CLIENTS = [
         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',
@@ -148,8 +144,10 @@ function selectClient (id: string) {
       class="ff-agent-panel"
     >
       <div class="ff-agent-step">
-        <p class="ff-agent-step__num">01</p>
-        <p class="ff-agent-step__title">{{ client.builtIn ? client.step1Title : STEP1.title }}</p>
+        <div class="ff-agent-step__head">
+          <p class="ff-agent-step__num">01</p>
+          <p class="ff-agent-step__title">{{ client.builtIn ? client.step1Title : STEP1.title }}</p>
+        </div>
         <p class="ff-agent-step__body">{{ client.builtIn ? client.step1Body : STEP1.description }}</p>
         <div v-if="client.builtIn" class="ff-agent-step__cta">
           <CtaSignUp variant="primary" :position="`${surface}-tab-expert`" class="w-full" />
@@ -160,8 +158,10 @@ function selectClient (id: string) {
       </div>
 
       <div class="ff-agent-step">
-        <p class="ff-agent-step__num">02</p>
-        <p class="ff-agent-step__title">{{ client.step2Title }}</p>
+        <div class="ff-agent-step__head">
+          <p class="ff-agent-step__num">02</p>
+          <p class="ff-agent-step__title">{{ client.step2Title }}</p>
+        </div>
         <p class="ff-agent-step__body">{{ client.step2Body }}</p>
         <div class="ff-agent-step__cta">
           <CtaCustom
@@ -178,12 +178,11 @@ function selectClient (id: string) {
       </div>
 
       <div class="ff-agent-step">
-        <p class="ff-agent-step__num">03</p>
-        <p class="ff-agent-step__title">{{ client.step3Title || STEP3.title }}</p>
-        <p class="ff-agent-step__body">{{ client.step3Body || STEP3.description }}</p>
-        <div v-if="signup && !client.noStep3Cta" class="ff-agent-step__cta">
-          <CtaSignUp variant="primary" :position="`${surface}-connect-step3`" class="w-full" />
+        <div class="ff-agent-step__head">
+          <p class="ff-agent-step__num">03</p>
+          <p class="ff-agent-step__title">{{ client.step3Title || STEP3.title }}</p>
         </div>
+        <p class="ff-agent-step__body">{{ client.step3Body || STEP3.description }}</p>
       </div>
     </div>
   </div>
diff --git a/nuxt/components/content/PromptCarousel.vue b/nuxt/components/content/PromptCarousel.vue
new file mode 100644
index 0000000000..54cc7a3b81
--- /dev/null
+++ b/nuxt/components/content/PromptCarousel.vue
@@ -0,0 +1,298 @@
+<script setup lang="ts">
+// The starter prompts: one card per prompt, stepped through sideways. Lives in
+// components/content/ so markdown can use it as ::prompt-carousel as well as pages
+// using it directly, for the same reason AgentSetupTabs does: the blog post, /ai and
+// the third-party-agents docs page all want to hand a reader the same nine openers,
+// and hand-copying nine paragraphs into three surfaces is how they drift apart.
+//
+// A carousel rather than a list because these are long. Nine of them stacked is a
+// wall of near-identical paragraphs that a reader scrolls past; one at a time, with
+// the next one's edge visible, is something they read and copy.
+//
+// Styling comes from the .ff-prompts-* rules in src/css/style.css, not from utility
+// classes on the elements. That is forced, same as AgentSetupTabs: this renders
+// inside .prose on the blog post, and the site's prose rules are unlayered, which
+// outranks Tailwind's @layer utilities whatever the specificity. As utilities,
+// .prose p would have set the card body to 12px.
+const props = withDefaults(defineProps<{
+    // Distinguishes this instance in PostHog, so the blog post's copies stay
+    // separable from /ai's once the same component is on both.
+    surface?: string
+}>(), { surface: 'blog' })
+
+const capture = useCapture()
+
+// Each prompt carries a short label so the carousel is scannable at a glance and the
+// dots have something to announce. Every one ends by asking the agent to simulate its
+// own inputs, which is the point: a reader can run these on a fresh trial team with
+// nothing connected to the platform yet and still watch a flow get built.
+//
+// The first three name a dashboard as the output on purpose. Reviewed 2026-09-03: a
+// prompt that only says what it wants to know leaves the agent free to answer with a
+// database write, an email or an MQTT topic, and the reader sees nothing. Naming the
+// surface is also the best-supported thing to ask for, since Dashboard UI Template is
+// one of the skills already exposed over MCP. The remaining six are unreviewed and
+// left as first written; several of them lean on skills that do not exist yet
+// (alarming and deadband, unified-namespace patterns, protocol nodes, flow-level
+// error handling), so their output is mixed by nature rather than by phrasing.
+const PROMPTS = [
+    {
+        id: 'oee',
+        label: 'Live OEE for one line',
+        text: 'I run one line and I want a dashboard showing live availability, performance and quality for it, with every stop carrying a reason. Simulate the machine signals so it runs before I connect anything.',
+    },
+    {
+        id: 'andon',
+        label: 'Andon calls with the evidence attached',
+        text: 'When an operator flags a problem at a machine I want a record created with that machine\'s recent signals attached, an owner and a status on it, and a dashboard my supervisor can work through. Simulate the line and a handful of open problems.',
+    },
+    {
+        id: 'shift-board',
+        label: 'A mid-shift board of orders and skills',
+        text: 'I want a dashboard my supervisors can use mid-shift: what has to run on each station and who on shift is qualified to run it. Simulate the orders, the roster and the skills.',
+    },
+    {
+        id: 'escalation',
+        label: 'Call for help, routed and escalated',
+        text: 'When a machine calls for help I want it routed to the person who can fix it, escalated if nobody acknowledges it, and the time from call to acknowledgement recorded. Simulate the line events.',
+    },
+    {
+        id: 'quality-check',
+        label: 'A quality check at the machine',
+        text: 'I want a check at the machine that measures each part against the tolerance for whatever is running, tells the operator the moment one fails, and records every result rather than only the failures. Simulate the measurements.',
+    },
+    {
+        id: 'traceability',
+        label: 'One record per unit, both directions',
+        text: 'I want one record per unit that follows it through every step with the conditions it was produced under, so a recall question can be answered in both directions. Simulate the production steps.',
+    },
+    {
+        id: 'machine-health',
+        label: 'Early warning on machine health',
+        text: 'I want the few signals that tell me a machine is going bad, cycle time drift, current, temperature and fault counts, judged against what is normal for that machine, and maintenance told before it stops. Simulate the machine signals.',
+    },
+    {
+        id: 'namespace',
+        label: 'Every protocol, one topic structure',
+        text: 'I want every machine, whatever protocol it speaks, to arrive in the same shape on a topic structure of site, area, line and asset, so my historian and my MES can each take what they need. Simulate a few machines on different protocols.',
+    },
+    {
+        id: 'error-reporting',
+        label: 'One view of what is broken, fleet-wide',
+        text: 'I want every application I have deployed to report its errors the same way, grouped so one fault across nine sites is one problem, with a single view of what is broken and since when. Simulate failures from a few instances.',
+    },
+]
+
+const track = ref<HTMLElement | null>(null)
+// Which cards are currently showing, not a single "active" index. The track is two
+// cards wide in a desktop prose column and one on a phone, and nine cards do not
+// divide by two: at the far end the track shows cards 8 and 9 together and can scroll
+// no further, so card 9's own snap position is never reached. Tracked as a single
+// index, the last dot could never light and the next arrow could never disable, which
+// is what the first Playwright pass on this component caught.
+const inView = ref<number[]>([0])
+// From the scroll extent rather than from the index, for the same reason: "there is
+// nowhere left to go" is a fact about the scroll position, not about which card is
+// leftmost.
+const atStart = ref(true)
+const atEnd = ref(false)
+const copiedId = ref<string | null>(null)
+let resetTimer: ReturnType<typeof setTimeout> | undefined
+
+// Read back from the scroll position rather than held as the source of truth, so a
+// swipe, a trackpad flick and the arrow buttons all agree on where we are.
+function syncActive () {
+    const el = track.value
+    if (!el) return
+    const cards = Array.from(el.querySelectorAll<HTMLElement>('.ff-prompts__card'))
+    if (!cards.length) return
+    const pad = parseFloat(getComputedStyle(el).paddingLeft) || 0
+    const trackRect = el.getBoundingClientRect()
+    const from = trackRect.left + pad
+    const to = trackRect.right - pad
+    // Showing means more than half the card is inside the padding box. Any overlap at
+    // all would count the sliver of the next card that the layout deliberately leaves
+    // visible, so every view would report one card too many.
+    const showing = cards
+        .map((card, index) => ({ index, rect: card.getBoundingClientRect() }))
+        .filter(({ rect }) => Math.min(rect.right, to) - Math.max(rect.left, from) > rect.width / 2)
+        .map(({ index }) => index)
+    inView.value = showing.length ? showing : [0]
+    const maxScroll = el.scrollWidth - el.clientWidth
+    // A pixel of slack: scrollLeft is fractional on a zoomed or scaled display, so an
+    // exact comparison leaves the arrow enabled with nowhere to scroll.
+    atStart.value = el.scrollLeft <= 1
+    atEnd.value = el.scrollLeft >= maxScroll - 1
+}
+
+// One card-and-gap per press, letting scroll-snap settle the landing, rather than
+// scrolling to a computed index. At the far end an index-based step asks for a
+// position the track cannot reach, so the press does nothing.
+function stride (el: HTMLElement) {
+    const card = el.querySelector<HTMLElement>('.ff-prompts__card')
+    if (!card) return 0
+    const gap = parseFloat(getComputedStyle(el).columnGap) || 0
+    return card.getBoundingClientRect().width + gap
+}
+
+// behavior is read here, not left to CSS scroll-behavior, because an explicit
+// 'smooth' in the options object wins over the stylesheet.
+function behavior () {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' as const : 'smooth' as const
+}
+
+function step (delta: number) {
+    const el = track.value
+    if (!el) return
+    el.scrollBy({ left: delta * stride(el), behavior: behavior() })
+    capture('cta-prompt-carousel-step', { position: `${props.surface}-${delta > 0 ? 'next' : 'prev'}` })
+}
+
+function goTo (index: number) {
+    const el = track.value
+    if (!el) return
+    const card = el.querySelectorAll<HTMLElement>('.ff-prompts__card')[index]
+    if (!card) return
+    // Measured off the live rects and the track's own padding rather than offsetLeft:
+    // offsetLeft is relative to whichever ancestor happens to be positioned, which is
+    // not the track, and it would drop the track's 1rem left padding so every card
+    // landed flush against the border instead of on its snap point. Asking for a
+    // position past the end is clamped by the browser, which is what should happen:
+    // the last dot scrolls as far as it goes and its card comes into view.
+    const pad = parseFloat(getComputedStyle(el).paddingLeft) || 0
+    const delta = card.getBoundingClientRect().left - el.getBoundingClientRect().left - pad
+    // scrollTo on the track rather than card.scrollIntoView: the latter scrolls the
+    // page as well, so stepping through the carousel would drag the article past it.
+    el.scrollTo({ left: el.scrollLeft + delta, behavior: behavior() })
+    capture('cta-prompt-carousel-step', { position: `${props.surface}-dot`, prompt: PROMPTS[index].id })
+}
+
+async function copy (prompt: typeof PROMPTS[number]) {
+    try {
+        if (navigator.clipboard && window.isSecureContext) {
+            await navigator.clipboard.writeText(prompt.text)
+        } else {
+            // Fallback for a non-secure context, where navigator.clipboard is
+            // undefined. Same approach as FfCommand.
+            const field = document.createElement('textarea')
+            field.value = prompt.text
+            field.setAttribute('readonly', '')
+            field.style.position = 'absolute'
+            field.style.left = '-9999px'
+            document.body.appendChild(field)
+            field.select()
+            document.execCommand('copy')
+            document.body.removeChild(field)
+        }
+    } catch {
+        return
+    }
+    capture('cta-copy-prompt', { position: props.surface, prompt: prompt.id })
+    copiedId.value = prompt.id
+    clearTimeout(resetTimer)
+    resetTimer = setTimeout(() => { copiedId.value = null }, 2000)
+}
+
+// How many cards fit changes with the column, so the readout has to be recomputed on
+// resize and not only on scroll. A ResizeObserver on the track rather than a window
+// listener: the prose column changes width when the sidebar appears, at a viewport
+// width that never fires a resize of its own.
+let observer: ResizeObserver | undefined
+onMounted(() => {
+    syncActive()
+    if (track.value && typeof ResizeObserver !== 'undefined') {
+        observer = new ResizeObserver(syncActive)
+        observer.observe(track.value)
+    }
+})
+onUnmounted(() => {
+    clearTimeout(resetTimer)
+    observer?.disconnect()
+})
+</script>
+
+<template>
+  <div
+    class="ff-prompts"
+    role="group"
+    aria-roledescription="carousel"
+    aria-label="Starter prompts"
+  >
+    <div class="ff-prompts__head">
+      <p class="ff-prompts__kicker">Starter prompts</p>
+      <div class="ff-prompts__nav">
+        <button
+          type="button"
+          class="ff-prompts__arrow"
+          :disabled="atStart"
+          aria-label="Previous prompt"
+          @click="step(-1)"
+        >
+          <UIcon name="i-lucide-arrow-left" aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          class="ff-prompts__arrow"
+          :disabled="atEnd"
+          aria-label="Next prompt"
+          @click="step(1)"
+        >
+          <UIcon name="i-lucide-arrow-right" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+
+    <!-- tabindex so the track itself takes focus and the arrow keys scroll it, which
+         is the keyboard path a scroll-snap carousel gets for free. -->
+    <div
+      ref="track"
+      class="ff-prompts__track"
+      tabindex="0"
+      @scroll.passive="syncActive"
+    >
+      <article
+        v-for="(prompt, index) in PROMPTS"
+        :key="prompt.id"
+        class="ff-prompts__card"
+        role="group"
+        aria-roledescription="slide"
+        :aria-label="`${index + 1} of ${PROMPTS.length}: ${prompt.label}`"
+      >
+        <p class="ff-prompts__label">{{ prompt.label }}</p>
+        <p class="ff-prompts__text">{{ prompt.text }}</p>
+        <!-- Copy is per card, since what it copies is this card's prompt. The
+             onward action is not: it goes once on the widget's own bar below. -->
+        <div class="ff-prompts__foot">
+          <button
+            type="button"
+            class="ff-prompts__copy"
+            @click="copy(prompt)"
+          >
+            <UIcon :name="copiedId === prompt.id ? 'i-lucide-check' : 'i-lucide-copy'" aria-hidden="true" />
+            <span>{{ copiedId === prompt.id ? 'Copied' : 'Copy prompt' }}</span>
+          </button>
+        </div>
+      </article>
+    </div>
+
+    <!-- The widget's own bar, carrying the position readout. -->
+    <div class="ff-prompts__bar">
+      <!-- One dot per prompt rather than per view: nine is few enough to show them
+           all, and a dot can carry the prompt's own name for a screen reader in a way
+           a "3 of 5" counter cannot. Every showing card lights its dot, so on a
+           desktop column two are lit at once, which is what is on screen. -->
+      <div class="ff-prompts__dots">
+        <button
+          v-for="(prompt, index) in PROMPTS"
+          :key="`dot-${prompt.id}`"
+          type="button"
+          class="ff-prompts__dot"
+          :class="{ 'ff-prompts__dot--active': inView.includes(index) }"
+          :aria-label="`Go to prompt ${index + 1} of ${PROMPTS.length}: ${prompt.label}`"
+          :aria-current="inView[0] === index ? 'true' : undefined"
+          @click="goTo(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/blog/2026/08/industrial-ai-agent.md b/src/blog/2026/08/industrial-ai-agent.md
new file mode 100644
index 0000000000..06d921c3b3
--- /dev/null
+++ b/src/blog/2026/08/industrial-ai-agent.md
@@ -0,0 +1,137 @@
+---
+metaTitle: "Connect Your Industrial AI Agent to FlowFuse"
+title: "Connect Your Industrial AI Agent to FlowFuse"
+subtitle: "Turn Microsoft Copilot, ChatGPT, or Claude into industrial AI agents."
+description: "Connect ChatGPT, Microsoft Copilot, or Claude to FlowFuse and turn your approved AI agent into an industrial AI agent that builds Node-RED flows directly."
+date: 2026-08-27
+keywords: flowfuse, mcp, model context protocol, industrial ai agent, ai agent, microsoft copilot, copilot studio, chatgpt, claude, node-red, industrial ai
+authors: ["dimitrie-hoekstra"]
+tags:
+- flowfuse
+- ai
+cta:
+    type: demo
+    title: Want to see this against your own setup?
+    description: Walk through connecting your agent with our team, on your instances, and see what it can and cannot reach.
+tldr: "FlowFuse 3.0 acts as an MCP server, so the AI agent your company already approved can operate FlowFuse and build flows in your Node-RED instances. You add one address, sign in, and choose which teams the agent reaches and whether it gets editing rights. It manages the FlowFuse platform and builds flows on a Node-RED canvas you are watching. It cannot delete anything, so you remain in control of deploying your flows. For teams under approved-AI-only policy, this is the difference between no AI on the platform and all of it."
+meta:
+  howto:
+    name: "How Do I Connect an Industrial AI Agent to My Systems?"
+    description: "Learn how to connect an industrial AI agent to your industrial systems through FlowFuse MCP, control its access, query operational data, manage your industrial applications, and build Node-RED flows."
+    totalTime: "PT10M"
+    tool:
+      - "Node-RED"
+      - "Microsoft Copilot"
+      - "ChatGPT"
+      - "Claude"
+    steps:
+      - name: "Connect your AI agent to FlowFuse"
+        text: "Open your AI agent's connector or tool settings and add the FlowFuse MCP server address. On FlowFuse Cloud, use https://app.flowfuse.com/mcp. Your AI agent must support MCP over HTTP."
+        url: "how-an-ai-agent-connects-to-flowfuse"
+      - name: "Sign in to FlowFuse"
+        text: "Authenticate the connection with your FlowFuse account. The AI agent uses your existing FlowFuse permissions and cannot access resources beyond what your account can access."
+        url: "how-an-ai-agent-connects-to-flowfuse"
+      - name: "Choose the teams and permissions the agent can access"
+        text: "Select which FlowFuse teams the AI agent can access and whether it has read-only or editing permissions. For example, you can give the agent access to a development team without giving it access to a production team."
+        url: "what-youre-actually-granting"
+      - name: "Ask your industrial AI agent about your operations"
+        text: "Start with read access and ask the AI agent about your applications, running instances, runtime logs, or FlowFuse Tables data. After confirming the connection, grant editing permissions if you want it to build or modify Node-RED flows."
+        url: "where-to-start"
+  faq:
+    - question: "How do I connect an industrial AI agent to my systems?"
+      answer: "Follow the three steps for your specific MCP-compatible AI agent at flowfuse.com/ai. It will instruct you to add https://app.flowfuse.com/mcp as a connector or plugin. Sign in with your FlowFuse account, select the teams the agent can access, and choose read-only or editing permissions. Once connected, it becomes an industrial AI agent that can interact with your operations through FlowFuse."
+    - question: "What can an industrial AI agent do with my systems?"
+      answer: "With read access, an industrial AI agent can query applications, instances, runtime logs, and FlowFuse Tables data. With editing permissions, it can also create supported FlowFuse resources like instances and applications, and build or modify Node-RED flows that connect to equipment, MQTT brokers, databases, APIs, and other industrial systems."
+    - question: "Can an industrial AI agent build Node-RED flows?"
+      answer: "Yes. With editing permissions, an industrial AI agent can build and modify Node-RED flows in FlowFuse. You can describe a workflow, for example reading temperature data from MQTT, checking it against a threshold, and writing the result to FlowFuse Tables, and the agent creates and connects the required nodes while you review the changes."
+    - question: "Can an industrial AI agent query my industrial data?"
+      answer: "Yes. With read access, an industrial AI agent can query FlowFuse Tables data alongside application, instance, and runtime information, answering questions about stored process values, downtime, throughput, and other operational data without any ability to make changes. If your data lives elsewhere, you can have the agent build a custom MCP server node tailored to your production environment to request it."
+    - question: "Which AI agents can become industrial AI agents in FlowFuse?"
+      answer: "FlowFuse can connect to any AI agents that act as clients that support Model Context Protocol (MCP) over HTTP, including ChatGPT, Microsoft Copilot, Claude, and Gemini. See the Industrial AI page for agent-specific setup steps. A local AI model can also connect through an MCP-compatible client."
+    - question: "Is it safe to connect an industrial AI agent to production systems?"
+      answer: "You control an industrial AI agent's exposure through FlowFuse team scope and role-based access control. You can restrict it to specific teams and start with read-only access before granting editing rights. Ideally start a new team used for experimentation. Unsupported operations such as deleting instances or teams aren't available to any agent, and deployment stays under your control regardless of what the agent proposes."
+---
+What used to happen is that an engineer would open their AI agent of choice in another tab or application, describe what they would need to happen in Node-RED, they get the JSON back, then copy, paste, and import that into the editor. Doing so, on repeat, until it is right. The AI is already doing the work, just not in an efficient way that requires you to be a part of it.
+
+That's not how an industrial AI agent should work. It should be able to work directly with your industrial systems, rather than generating something for you to copy and paste.
+
+That's what our first class integrated industrial AI agent, FlowFuse Expert, was built to do. It works within the FlowFuse platform, where it can understand your applications, instances, flows, and operational data, and then build and edit the operational flows directly in Node-RED instances.
+
+|  | **Without FlowFuse Expert** | **With FlowFuse Expert** |
+| :- | :- | :- |
+| **Creating and editing Node-RED flows** | Wiring flows by hand or asking an external AI for JSON to be copy and pasted over, including errors. | The industrial AI agent creates or edits the flows right in front of you. |
+| **Setting up an industrial application** | Manually setting up FlowFuse applications, instances, and connecting them together through submodules or pipelines so it's ready for a production setup, plus configuring the flows. | The industrial AI agent helps you set it up from start to finish. You can even plan with the AI agent so you are sure it aligns with your expectations. The AI will help you ensure it will be ready for a production setup. |
+| **Asking about your industrial fleet** | Manually walking through the platform UI to figure out what runs how. | The industrial AI agent scans your FlowFuse instance and understands what there is and its status, then reports it to you in natural language. |
+| **Asking about your operational data** | Manually configuring the data aggregation, modeling, and visualisation into dashboards, then monitoring those. | The industrial AI agent configures the data aggregation, modeling, and visualisation for you into a usable dashboard. And it can also create custom MCP servers which allow you to ask about your operational data in natural language. |
+
+## So why did this happen?
+
+Ask why they don't use the FlowFuse Expert built into the platform, and the answer usually isn't about quality; it's about policy. Plenty of the companies we work with run an approved-AI-only rule. So for those teams the only option was to use "their AI, through the clipboard" with the alternative being no AI-support at all.
+
+## What changed in FlowFuse 3.0
+
+FlowFuse now acts as an MCP server. Your own AI agent connects to it as a client and because the AI agent is yours, so is the choice of model it uses.
+
+That means the AI agent your company already approved can work the platform directly: look at your teams and applications, check what your instances are doing, read runtime logs, query your [FlowFuse Tables](/node-red/flowfuse/flowfuse-tables/) data, create applications and instances, and build and edit the flows inside your instances.
+
+## How an AI agent connects to FlowFuse
+
+Connecting an AI agent to FlowFuse takes three steps depending on the agent you would like to use.
+
+You add one address in your AI agent's connector settings. On FlowFuse Cloud that address is `https://app.flowfuse.com/mcp`. You are then triggered to sign in to FlowFuse, after which you pick which teams the AI agent may act on, and whether it gets editing rights or read access only.
+
+If you want to jump ahead and get connected now, [skip to the steps at the end](#connect-your-own-agent).
+
+## What you're actually granting
+
+"We gave an AI agent access to production" is usually a sentence that ends conversations, so let's clarify.
+
+You choose the teams. If you have a production team and a development team, granting only development means an instruction can only hit what you manage in that team.
+
+You choose read access or editing rights. Read access is useful on its own: what's running, what's failing, what the logs say, what's in your tables, and so on. An industrial AI agent with read access has no ability to change anything. When permitting editing rights, the agent can set up applications, instances, and edit the flows inside of them.
+
+And there are things nobody can grant. An industrial AI agent working through FlowFuse can't delete an instance, an application, a snapshot, or a team. That is because those tools don't exist. Lastly, deploying a Node-RED flow is, for now, still done by you manually as well.
+
+Two things run underneath all of it. The role-based access control that already governs your teams affects the industrial agent too, so it can't reach past what your own account reaches. And every action it takes lands in the audit log attributed to you and marked `via MCP`, so "what the AI did last Tuesday" is a question with an answer.
+
+Most agents will prompt you and ask before they act. This logic belongs to the agent itself rather than to FlowFuse, so it looks different in each one, but in practice you see the tool call before it runs, so you retain visibility and control.
+
+We're working towards AI that can act as required in production setups and in setups where experimentation is fine, and those are different settings for different scenarios. But what is described above is the boundary as it ships right now.
+
+## It builds where you can see it
+
+Node-RED has always been visual. You look at a flow and you can tell what it does.
+
+We didn't want to trade away control for AI, so when your agent builds a flow, it builds it in a live editor session, on the canvas in front of you. You watch the nodes appear and get wired up. If it's going somewhere you don't like, you can see that while it's happening rather than afterwards. Up for review before you enable the deployment.
+
+Asking questions about your platform needs no active browser session open at all. It's flow work specifically that runs in an editor you're looking at.
+
+## The conversation with IT
+
+Most people reading this can't add a connector on their company sanctioned AI agent. On ChatGPT, a workspace administrator switches on custom connectors. On Claude Team and Enterprise, an owner adds the connector for the organisation and then people connect individually. On Microsoft Copilot, a tenant administrator approves it.
+
+It's one address. Everyone still signs in with their own FlowFuse account, and still chooses their own scopes, so nobody inherits anyone else's access. Nothing about it makes FlowFuse a new data processor for your organisation.
+
+We're also working on removing the question at all.
+
+::note
+**Coming soon:** FlowFuse in the Microsoft Copilot, Claude and ChatGPT connector directories. No custom connector, no admin request. FlowFuse Cloud only.
+::
+
+## Where to start
+
+If your team is on FlowFuse Cloud, you can get connected already. Our [Industrial AI page](/ai/) has the three steps for whichever agent you use similar as noted above.
+
+If your team is on FlowFuse self-hosted, make sure to be on at least version FlowFuse 3.0 or higher. On self-hosted, platform messaging runs over the MQTT broker, so the Team Broker needs to be available. Whether anything is needed from you depends on how your self-hosted platform was installed. [Our documentation](/docs/user/expert/third-party-agents/) has further details on what to do for custom situations.
+
+For now, begin with any of the following prompts when authenticated with the platform:
+
+::prompt-carousel{surface="blog"}
+::
+
+## Connect your own agent
+
+Three steps, and they depend on which agent you would like to use.
+
+::agent-setup-tabs{:exclude-expert="true" surface="blog"}
+::
diff --git a/src/css/style.css b/src/css/style.css
index c9e0bd34bb..33492980cf 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -3411,23 +3411,45 @@ lite-youtube::before {
 .ff-agent-panel {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 2rem;
+    /* Tighter than the 2rem this used to carry, because stacked the steps are now
+       cards and the border does the separating that the whitespace was doing. */
+    gap: 1rem;
     padding: 1.5rem;
 }
+/* Stacked, each step is a card. One column of three headings with nothing but air
+   between them read as one continuous block, so 02 looked like more of 01 rather
+   than the next thing to do. Three across, the columns already separate themselves
+   and a border around each would just be noise, so the wide state below strips it. */
 .ff-agent-step {
     display: flex;
     flex-direction: column;
+    border: 1px solid var(--color-gray-200);
+    border-radius: 0.5rem;
+    background-color: var(--color-gray-50);
+    padding: 1.25rem;
 }
+/* Same size, face and weight as the heading beside it, so the two read as one line
+   of text rather than a label stuck to a title. Only the colour separates them. */
 .ff-agent-step__num {
     margin: 0;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1rem;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.75rem;
     color: var(--color-indigo-600);
 }
+/* The number and the heading share one line, in both layouts. Baseline rather than
+   centre, so the mono digits sit on the heading's baseline instead of floating
+   against its cap height. Wraps when a long heading needs two lines, and the number
+   stays put on the first. */
+.ff-agent-step__head {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+}
+/* No top margin any more: the gap that used to separate it from the number above is
+   now the row gap beside it. */
 .ff-agent-step__title {
-    margin: 0.5rem 0 0;
+    margin: 0;
     font-size: 1.125rem;
     font-weight: 500;
     line-height: 1.75rem;
@@ -3473,6 +3495,14 @@ lite-youtube::before {
         gap: 2.5rem;
         padding: 2rem;
     }
+    /* Back to bare columns: side by side the steps are already separate, so the card
+       treatment the stacked state needs becomes three boxes inside a box. */
+    .ff-agent-step {
+        border: 0;
+        border-radius: 0;
+        background-color: transparent;
+        padding: 0;
+    }
     /* Three across, the columns are narrow enough that filling them is right. */
     .ff-agent-step__cta {
         align-self: stretch;
@@ -3618,3 +3648,259 @@ lite-youtube::before {
 .ff-website header a > span.ff-icon {
     padding: 0;
 }
+
+/* Prompt carousel (nuxt/components/content/PromptCarousel.vue): the starter prompts,
+   stepped through sideways.
+
+   Unlayered on purpose, for the same reason the .ff-agent-* block above is: this
+   renders inside .prose on the blog post, and the site's prose rules are unlayered,
+   so they outrank Tailwind's @layer utilities whatever the specificity. As utilities,
+   .prose p would have set the card body to 12px and .prose p's own margins would have
+   reopened the gaps the cards close deliberately. Keep visual values here, not in the
+   template.
+
+   Sizing is driven by the component's own width via @container, not by the viewport,
+   because a blog post's prose column is ~704px inside a much wider viewport. */
+.ff-prompts {
+    container-type: inline-size;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    border: 1px solid var(--color-indigo-100);
+    border-radius: 0.75rem;
+    background-color: #fff;
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+}
+
+/* The header rail carries the label and the arrows, tinted like the agent card's tab
+   strip so the two read as the same family of object. */
+.ff-prompts__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    border-bottom: 1px solid var(--color-indigo-100);
+    background-color: color-mix(in srgb, var(--color-indigo-50) 60%, transparent);
+    padding: 0.75rem 1rem;
+}
+.ff-prompts__kicker {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--color-indigo-600);
+}
+.ff-prompts__nav {
+    display: flex;
+    flex: none;
+    gap: 0.375rem;
+}
+.ff-prompts__arrow {
+    display: flex;
+    height: 2rem;
+    width: 2rem;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    background-color: #fff;
+    color: var(--color-gray-600);
+    box-shadow: var(--shadow-sm);
+    transition: color 0.15s, background-color 0.15s, opacity 0.15s;
+}
+.ff-prompts__arrow:hover:not(:disabled) {
+    background-color: var(--color-indigo-600);
+    color: #fff;
+}
+.ff-prompts__arrow:focus {
+    outline: none;
+}
+.ff-prompts__arrow:focus-visible {
+    outline: 2px solid var(--color-indigo-600);
+    outline-offset: 2px;
+}
+/* Dimmed rather than hidden at the ends: a control that disappears moves the one
+   beside it, and the reader loses the target they were aiming at. */
+.ff-prompts__arrow:disabled {
+    opacity: 0.35;
+    box-shadow: none;
+    cursor: default;
+}
+.ff-prompts__arrow > * {
+    height: 1rem;
+    width: 1rem;
+}
+
+/* scroll-snap so a swipe or a flick lands on a card edge rather than halfway between
+   two, and so the arrows and the gesture agree on where "one along" is. */
+.ff-prompts__track {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-padding-left: 1rem;
+    padding: 1.5rem 1rem;
+    /* The scrollbar is redundant next to the arrows and the dots, and on macOS it
+       overlaps the copy button while it is fading out. */
+    scrollbar-width: none;
+}
+.ff-prompts__track::-webkit-scrollbar {
+    display: none;
+}
+.ff-prompts__track:focus {
+    outline: none;
+}
+.ff-prompts__track:focus-visible {
+    outline: 2px solid var(--color-indigo-600);
+    outline-offset: -2px;
+}
+
+/* 85% rather than 100%: the sliver of the next card is what tells a reader there is
+   one, before they have found the arrows. Nine stacked paragraphs got scrolled past;
+   an edge that is visibly cut off gets clicked. */
+.ff-prompts__card {
+    display: flex;
+    flex: none;
+    width: 85%;
+    flex-direction: column;
+    scroll-snap-align: start;
+    border: 1px solid var(--color-gray-200);
+    border-radius: 0.5rem;
+    background-color: var(--color-gray-50);
+    padding: 1.25rem;
+}
+.ff-prompts__label {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.75rem;
+    color: var(--color-gray-900);
+}
+/* The prompt verbatim, in the mono face, because it is a thing to be copied rather
+   than read as prose. */
+.ff-prompts__text {
+    margin: 0.5rem 0 0;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+    color: var(--color-gray-600);
+}
+/* The card's action strip, divided off the prompt with a hairline that runs the
+   full width of the card. The negative inline margins take the rule out past the
+   card's 1.25rem padding to its edges, and the padding goes back on the row so the
+   button stays inside the measure.
+
+   mt-auto pins the strip to the bottom so it lines up across cards however unevenly
+   the prompts above them wrap. */
+.ff-prompts__foot {
+    margin-top: auto;
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+    display: flex;
+    align-items: center;
+    border-top: 1px solid var(--color-gray-200);
+    padding: 0.875rem 1.25rem 0;
+}
+
+/* Quiet by design: the bordered Try it out on the widget's bar is the page's onward
+   step, and a second bordered button per card would compete with it nine times over.
+   The icon swaps to a tick on a successful copy, so the label and the mark agree. */
+.ff-prompts__copy {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    border-radius: 0.25rem;
+    padding: 0.375rem 0.5rem;
+    margin-left: -0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: var(--color-gray-600);
+    transition: color 0.15s, background-color 0.15s;
+}
+.ff-prompts__copy:hover {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-900);
+}
+.ff-prompts__copy:focus {
+    outline: none;
+}
+.ff-prompts__copy:focus-visible {
+    outline: 2px solid var(--color-indigo-600);
+    outline-offset: 2px;
+}
+.ff-prompts__copy > *:first-child {
+    height: 0.875rem;
+    width: 0.875rem;
+    flex: none;
+}
+
+/* The widget's bar, holding the position readout. */
+.ff-prompts__bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    border-top: 1px solid var(--color-indigo-100);
+    padding: 0.75rem 1rem;
+}
+
+/* Dots as the position readout and as a jump target. Nine is few enough to show them
+   all; a "3 / 9" counter would say where you are without offering to move you. */
+.ff-prompts__dots {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+.ff-prompts__dot {
+    height: 0.5rem;
+    width: 0.5rem;
+    flex: none;
+    border-radius: 9999px;
+    background-color: var(--color-gray-300);
+    transition: background-color 0.15s, transform 0.15s;
+}
+.ff-prompts__dot:hover {
+    background-color: var(--color-gray-400);
+}
+.ff-prompts__dot--active,
+.ff-prompts__dot--active:hover {
+    background-color: var(--color-indigo-600);
+    transform: scale(1.25);
+}
+.ff-prompts__dot:focus {
+    outline: none;
+}
+.ff-prompts__dot:focus-visible {
+    outline: 2px solid var(--color-indigo-600);
+    outline-offset: 3px;
+}
+
+/* Two across once the component itself is wide enough that a single card would run to
+   an uncomfortable measure. 42rem is set by the prompts themselves: the longest is
+   ~340 characters, and at ~46rem of card the mono text reaches a 100-character line.
+   Below this the cards stay one at a time, which is what a phone gets. */
+@container (min-width: 42rem) {
+    .ff-prompts__card {
+        width: calc(50% - 0.5rem);
+    }
+}
+
+/* Nothing animates for a reader who asked for that. The snap stays, since it is
+   layout rather than motion; only the smooth scroll and the dot's scale go. */
+@media (prefers-reduced-motion: reduce) {
+    .ff-prompts__track {
+        scroll-behavior: auto;
+    }
+    .ff-prompts__dot--active,
+    .ff-prompts__dot--active:hover {
+        transform: none;
+    }
+}