Fluent Commerce Logo
Help & Feedback

Content in this track:

Intro to Fluent AI Skills

1

Getting Started with Fluent AI Skills

2

Fluent Skills Personas

3

AI Assisted UI Component Building

4

Configuring and Extending Fluent UI Using Fluent Builder MCP Server

5

End Of Track

6

Configuring and Extending Fluent UI Using Fluent Builder MCP Server

How-to Guide
Extend

Author:

Dave Miller

Changed on:

6 Mar 2026

Key Points

  • Component implementation can be difficult, as it requires coding knowledge 
  • Learn how to customize, add and create a new UI component using AI accelerated tooling

Prerequisites

Getting started with the Fluent Builder MCP server

Steps

Step arrow right iconAlso ensure you have

  • A sandbox environment
  • Any IDE

Step arrow right iconConnect Claude to the Builder MCP server

Follow the guide included above to set up your connection to the Fluent MCP server.

Step arrow right iconTest the connection

Ask Claude to describe what is in the Order section of the OMS app. It should return with information about the page, such as settings, navigation links, etc.

Customizing and Changing Existing Components in the Manifest

Step arrow right iconAdd a 'Retailer name' column to the Order List using prompts

Example prompt: `Can you add a column to the order list showing the retailer name`Claude will:
  • Identify the correct manifest fragment
  • Check whether the required data field is already being fetched
  • Update the manifest to add the new column without modifying the GraphQL query if the data is already available

Step arrow right iconCheck the updated Orders page

Refresh the Orders page, and a Retailer (Name) column should now be present, with a list of retailer names populated in it.No alt provided

Step arrow right iconCreate a dashboard tile above the table to display the order count

Example prompt: `Add a dashboard tile above the table showing the order count`
Claude will:
  • Reference the component library to identify the most suitable component (e.g. a tile metric component)
  • Use already-fetched data where possible (e.g. `orders.edges.length`)
  • Insert the component into the correct position in the manifest

Step arrow right iconRefresh the Orders page again

You should see a dashboard tile above the order list showing the total number of orders.No alt provided

Creating New UI Components

Step arrow right iconCreate a component that shows a Google Map on a card

Example prompt: `Write me a mystique component that shows a Google Map on a card. Assume the data input is a connection of orders. Show an icon for the fulfillment collection address of each order and zoom accordingly.`Claude will:
  • Consult the component skill to understand best practices and available building blocks
  • Decide on the implementation approach (e.g. wrapping a Google Maps library inside your native card component)
  • Generate the full component code
  • Write unit tests for the component
  • Execute those tests automatically

Step arrow right iconImplement the component to the Order page

Example prompt: `Add the component to the top of the Order fragment`Claude will update the manifest and confirm the new structure.

Step arrow right iconHost the local component

As the new component hasn't yet been packaged into a module, host the local component, then refresh your browser to see the newly created component rendering live with real data.

Step arrow right iconRefresh the Orders page

The map component should now be visible at the top of the page.No alt provided

Related content

Fluent Builder MCP Server
Edited 56 days ago
Except as otherwise stated in the Extend Knowledge Content site policy, the content on this page is licensed under the Creative Commons Attribution 4.0 Licence, and any code samples that appear on this page are licensed under the Apache 2.0 Licence, unless any code sample forms part of the Fluent Order Management Platform code. Neither of these licences apply to any content on any other page that can be reached via a link on this page unless otherwise specified on that other page. If you wish to use any of the Extend Knowledge Content, you must do so in compliance with the licenses referred to above and the Extend Knowledge Content site policy, including attribution in the manner set out on this page. 
Dave Miller

Dave Miller

Knowledge Tracks Related To This Topic

AI Assisted Fluent Development
  • Intro to Fluent AI Skills
  • Getting Started with Fluent AI Skills
  • Fluent Skills Personas
  • AI Assisted UI Component Building
  • Configuring and Extending Fluent UI Using Fluent Builder MCP Server
    • Building Blocks
    Building Blocks
    Packages & Modules
    All UI Components
    Workflows
    Settings
    Interface Contracts
    All Rules
    Browse By Type
    All Types
    Knowledge Tracks
    Courses
    Extend Knowledge
    Glossary
    All How-to Guides
    Sitemap
    Topics
    Use Cases
    Test
    Helpful Resources
    Platform Limits
    Support Policy
    Service Level Agreement (SLA) - Enterprise
    Deprecation Policy
    Extend Knowledge Content – Terms and Conditions
    System and Organization Controls (SOC) 3 Report
    Data Privacy Addendum
    Security Policy
    Quick Links
    For Partners
    Customer Resources
    Webinars and Events
    Certifications
    Training Resources
    Knowledge Tracks
    Builders Portal
    Product Update Newsletter
    Industry Blogs & Events Newsletter
    Trust Center Portal

    Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.

    Fluent Logo