blog: connect your industrial AI agent to FlowFuse by dimitrieh · Pull Request #5671 · FlowFuse/website

dimitrieh · 2026-08-24T11:33:27Z

Description

A how-to blog post for the 3.0 third-party agent feature, sitting between the /ai page and the documentation in depth. Copy now follows the reviewed doc, authored by @dimitrieh, and the slug moves to industrial-ai-agent.

It leads with the policy angle rather than the capability: teams under approved-AI-only rules were prompting an external tool for flow JSON and hand-importing it, so the AI was already doing the work through the clipboard. Then the mechanism, what you grant, and the conversation with IT. The connect widget now closes the post, after a new starter-prompts carousel, with a link down to it from where it used to interrupt the argument.

Adds ::prompt-carousel (nuxt/components/content/PromptCarousel.vue) for the nine starter prompts, in components/content/ so /ai and the docs page can reuse it rather than re-copying nine paragraphs. Two shared-component changes come with it: each connect step is a card while the picker is stacked, and the step number now sits on its heading's line in both layouts. Those also affect the changelog entry and the docs page.

No image: in the frontmatter yet, matching the handful of 2026 posts that also omit it, so the build is fine. An Art Request is still needed before this publishes.

One open item for review: Joyce's comment on the doc asked for the connector-directory news to get its own section to build on later. It is currently a titled note inside "The conversation with IT" rather than a section of its own.

Related Issue(s)

FlowFuse/flowfuse#8192

#5612 (blog post deliverable, sub-issue of https://github.com/FlowFuse/engineering/issues/272)

Depends on

Links to /docs/user/expert/third-party-agents/, which lands with FlowFuse/flowfuse#8241. A link check against that path fails until it merges. Pairs with #5670 for the /ai page and the changelog.

Rebased onto main to pick up #5719, which is what keeps the picker's brand marks at 16px in prose. #5714 was my duplicate of that fix and is closed; the commit adding it here is reverted in this branch.

CI fix: #5735. The link checker fails here on a bad anchor that has nothing to do with this branch, /integrations/node-red-contrib-counter#bugs--feature-request, and main is red with the same error. Our heading slugger collapsed runs of whitespace into one hyphen where GitHub hyphenates each space, so a README heading with punctuation between two words lost a hyphen and its own table-of-contents link pointed at an id that did not exist. This PR goes green once that merges.

Checklist

I have read the contribution guidelines
I have considered the performance impact of these changes
Suitable unit/system level tests have been added and they pass
Documentation has been updated
For blog PRs, an Art Request has been created (instructions)

netlify · 2026-08-24T11:58:38Z

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	`c453663`
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/6a985d468afd9a0009b03b5f
😎 Deploy Preview	https://deploy-preview-5671--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 63 (🟢 up 14 from production) Accessibility: 96 (no change from production) Best Practices: 100 (no change from production) SEO: 85 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

dimitrieh · 2026-08-31T09:37:20Z

Thanks @sumitshinde-84 🙏

The post named ChatGPT and Claude but reached Gemini only as a CLI, and left local models out, so the approved-agent set did not match the page that leads this. It now covers the same set in the same order, with coding agents as the trailing clause, and links /ai for the per-agent path. Also missing against the page's governance section: the address itself, the requirement being MCP over HTTP, that RBAC still bounds the agent to what your own account reaches, and that actions land in the audit log marked via MCP. Adds that most agents ask before they act, and that the prompt is the agent's rather than ours. Agent, not assistant, in the policy paragraph.

Co-authored-by: sumit shinde ( Roni ) <110285294+sumitshinde-84@users.noreply.github.com>

…t picker Replaces the Worked example section with the shared agent-setup-tabs component, so the blog, changelog and third-party-agents docs show the same three steps instead of a hand-copied Copilot Studio walkthrough that would drift. Trims the policy and granting sections, and folds the clipboard line into the opening paragraph.

Co-authored-by: Dimitrie Hoekstra <hi@dimitr.ie>

Without the closing ::, the MDC block ran to the end of the document and absorbed every section after it, so granting, canvas, IT and where-to-start stopped rendering as sections.

The batched review suggestion left the 'Configure your AI agent' step text without its closing quote, so the frontmatter stopped parsing. Four of the five howto step anchors pointed at headings that do not exist: how-the-connection-works and what-youre-granting never matched, and worked-example-connecting-microsoft-copilot referred to a section that is gone. They now point at real headings. The step url is rendered as canonical#url, so it can only be an on-page anchor, and the AI page is referenced from the step text instead.

Nine starter prompts stepped through sideways rather than listed. Stacked, they are a wall of near-identical paragraphs a reader scrolls past; one or two at a time, with the next card's edge showing, is something they read and copy. Lives in components/content/ so markdown reaches it as ::prompt-carousel and other surfaces can use it directly, the same arrangement AgentSetupTabs uses: /ai and the third-party-agents docs page want the same openers, and copying nine paragraphs into three surfaces is how they drift apart. Position is read back from the scroll offset rather than held as an index, and which cards are showing is a set rather than one number. Nine cards do not divide by the two that fit a desktop prose column, so at the far end the track shows the last two together and can go no further; tracked as a single index, the last dot never lit and the next arrow never disabled.

The picker's marks were rendering at their intrinsic size on every surface that puts it in prose, so the ChatGPT glyph came out 780px square and the card ran to 1833px tall. Only /ai looked right, because /ai has no .prose wrapper. .ff-agent-tab img exists so that utility classes could not be beaten by prose, but at 0-1-1 it still loses to the site's own .prose:not(.prose-natural-size-images) img at 0-2-1, which puts width:100% and height:auto back. As flex items in an auto-width button the 100% resolves against nothing, so each mark falls back to its own file's dimensions. Matching that specificity and sitting later in the file takes it back. Fixes the blog post, the changelog entry and the docs page in one go.

Brings the post in line with the reviewed doc. Dimitrie Hoekstra as author. Slug moves to industrial-ai-agent, which is what the doc specifies and what the metadata is written around; nothing linked to the old one. Content changes of substance: a comparison table for what changes with an integrated agent, the granting section says what editing rights actually permit, and Where to start splits Cloud from self-hosted with the Team Broker note the self-hosted path needs. The separate Connect your own agent heading folds into the section above it, where the picker already sat. The FAQ and the meta description are the reviewed versions. Ends on the starter prompts carousel. Still needs an Art Request before it publishes.

The card gets an action strip divided off the prompt, holding the copy control on its own. The onward action goes once on the widget's bar, bottom right beside the position dots: the prompts all run against the same platform, so one per card would be nine copies of the same next step competing with each other. Try it out comes from CtaSignUp rather than a hand-written link, so the label, the destination and the cta-sign-up event stay fixed per destination and only position varies, keeping it in the same PostHog series as every other Try it out on the site. Its footprint is trimmed here rather than through props, since those metrics are deliberately fixed in CtaButton.

… section The picker was interrupting the argument halfway through to offer setup steps to a reader who had not yet been told what they were granting. It now closes the post, after the starter prompts, and the point where it used to sit links down to it instead. The connector-directory news becomes its own Coming soon section in a note, rather than a closing sentence on The conversation with IT, which is what Joyce asked for on the doc. ::note is the existing callout markup and already renders in blog posts via ::product-update-note; the handbook's guide still points blog pages at the 11ty {% note %} shortcode, which no post has used since the Nuxt migration took src/blog/**/*.md away from eleventy.

This reverts commit 942f543. Superseded on main by #5719, which fixed the same thing more generally: the offending .prose:not(.prose-natural-size-images) img rule now sits inside @layer components, and an unlayered rule beats any layered one whatever its specificity, so .ff-agent-tab img wins on its own and every other component whose unlayered styles that rule was outranking is fixed too, not just this one. The picker only looked broken here because this branch predates that change.

Stacked in a prose column, the three steps were a single column of headings with only whitespace between them, so 02 read as a continuation of 01 rather than the next thing to do. Each step now carries a border, a tint and its own padding, and the panel gap drops from 2rem to 1rem because the border is doing the separating the whitespace was. Only while stacked. Three across the columns already separate themselves, so the wide container query strips the card treatment rather than nesting three boxes inside a box. Applies to every surface that stacks the picker: this post, the changelog entry and the docs page.

The connect widget's step number and heading now share a line, in both the stacked and the three-across layout, with the number set at the heading's own size, face and weight so the two read as one line of text and only the colour separates them. The prompt cards drop their numbers: the dots already say which of the nine you are on, so a number on the card repeated it. Coming soon goes back to being a plain note inside The conversation with IT rather than its own section, with Coming soon as a heading inside the note. That needs the leading strong promoted to a block, because Callout's slot is mdc-unwrap="p" and strips the paragraphs, which ran the heading straight into the body text. Also drops the closing marketplace sentence, which the note above now says.

…CTA fill the column The coming soon note goes back to a plain ::note with the title as its leading bold text. That is what the built-in gives without help: Callout's slot is mdc-unwrap="p", so the icon and the title share a line by default. Promoting the title to a block, as the previous commit did, is what pushed the icon onto a line of its own, and the custom class it needed is gone with it. The prompt carousel loses its Try it out. The connect steps at the end of the post carry the same CTA, and the post's own CTA card follows them, so a third one beside the position dots was the same next step asked three times. BlogPostCta drops 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 ran the full measure. Now 704px like the rest. Applies to every post carrying a cta block, which is most of them.

…e callouts Step 03 describes what happens once you are connected, which teams the agent may act on and whether it may edit. A sign-up button under that was answering a question the step does not ask, and on the blog post it was the third copy of the same next step on one screen. Gone for every client and every surface. That leaves the signup prop and the Expert tab's noStep3Cta flag with nothing to gate, so both go too rather than sitting there as dead switches. The Expert tab keeps its own step 01 sign-up, which is a different CTA for a different step. The docs page in FlowFuse/flowfuse still passes :signup="false"; it is inert now and worth removing there. Separately: .prose pins --tw-prose-bold to gray-500 and Tailwind Typography's strong rule reads that token, so bold text inside a callout rendered grey against the callout's own colour, two colours in one sentence. Extended the callout theme in app.config the same way its own [&_code]: rule works, rather than overriding it from the stylesheet. Fixes the handbook's callouts too.

github-actions Bot deployed to Preview August 24, 2026 11:58 View deployment

dimitrieh mentioned this pull request Aug 24, 2026

/ai: one agent picker in the hero, Expert first #5670

Closed

5 tasks

dimitrieh requested review from Steve-Mcl, andypalmi and cstns August 24, 2026 15:43

github-actions Bot deployed to Preview August 24, 2026 16:06 View deployment

dimitrieh requested a review from sumitshinde-84 August 26, 2026 10:20

dimitrieh commented Aug 26, 2026

View reviewed changes