Fluent Commerce Docs

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

Content in this track:

Getting Started with Fluent AI Skills

AI Assisted UI Component Building

Configuring and Extending Fluent UI Using Fluent Builder MCP Server

End Of Track

Content in this track: Getting Started with Fluent AI Skills

How-to Guide

Extend

Changed on:

31 Mar 2026

Key Points

[Warning: empty required content area]

Steps

Prerequisites

Requirement	How to Install	Verification
Node.js 20+	nodejs.org	`node --version`
Fluent CLI 2.0+	`npm install -g @fluentcommerce/cli`	`fluent --version`
Claude Code	`npm install -g @anthropic-ai/claude-code`	`claude --version`
A Fluent Commerce account	Contact your Fluent account team	You'll need: account ID, API base URL, username, password, client secret

Other AI Tools

This guide also works with Cursor, Copilot, or other AI tools apart from Claude Code. However, Claude Code has the deepest integration (slash commands, agents, MCP), so these instructions use it as the example.

For Windows Users

All commands in this guide use Unix shell syntax (works in Git Bash, WSL, and PowerShell). For PowerShell, replace `\` line continuations with ``` and `export VAR=val` with `$env:VAR="val"`. Paths like `~/.fluentcommerce/` map to `C:\Users\<you>\.fluentcommerce\` on Windows.

Step 1 - Create a Fluent CLI profile

A profile is a named connection to your Fluent account stored securely in `~/.fluentcommerce/`.

1fluent profile create MY_PROFILE \
2  --id my-account-id \
3  --username admin@example.com \
4  --password "your-password" \
5  --client-secret "your-client-secret" \
6  --base-url "https://my-account-id.sandbox.api.fluentcommerce.com"

Your Fluent account team provides the account ID, API base URL, and credentials. The `--client-secret` is required for API authentication.Verify the profile and find your retailer ref:

1fluent profile retailers MY_PROFILE

Step 2 - Create a workspace and install skills

A workspace is just an empty directory where all your Fluent development work lives. You can name it anything.Run the following command to set up the workspace, and all necessary skills into Claude Code.

1mkdir my-fluent-workspace && cd my-fluent-workspace
2git init    # recommended — tracks your work and enables .gitignore
3
4npx @fluentcommerce/ai-skills install --profile MY_PROFILE --profile-retailer "My Retailer"

This command should:

Installs all 65 skills into Claude Code (marketplace plugin, or file-copy fallback)
Creates `.mcp.json` in the current folder and connects three MCP servers: `fluent-mcp` (CLI), `fluent-mcp-extn` (45 tools), `chrome-devtools` (browser)
Creates `CLAUDE.md` in the current folder, which are workspace instructions for safety protocols and deployment procedures
Checks prerequisites and report any issues

After running, your folder should contain the following:

1my-fluent-workspace/
2├── .mcp.json      <- MCP server config (tells Claude Code how to reach Fluent APIs)
3└── CLAUDE.md      <- Workspace instructions (tells Claude Code how to work with Fluent)

What's global vs what's local:

Installed where	What it is	Persists across workspaces?
Global (`~/.claude/`)	65 skills — domain knowledge, slash commands, agents	Yes — available in every workspace
Local (this folder)	`.mcp.json` — MCP server config pointing to your Fluent account	No — one per workspace
Local (this folder)	`CLAUDE.md` — workspace instructions (safety protocols, conventions)	No — one per workspace
Local (this folder)	`accounts/` — workflows, features, source code (created in Step 3)	No — one per workspace

You can have multiple workspaces (e.g., one per client) each with different profiles and retailers. Skills are shared; everything else is workspace-specific.

Step 4 - Verifying the Installation

Run the following command to verify the installation.

1npx @fluentcommerce/ai-skills status

It should show which skill groups are installed and their install method (marketplace or file-copy). If something is missing, re-run

1npx @fluentcommerce/ai-skills install --profile MY_PROFILE --profile-retailer "My Retailer"

To verify MCP servers are actually reachable (run inside Claude Code chat, not in terminal):

1"Test my MCP connection"

Note

If Claude Code was already running, restart it. MCP servers only connect at startup.

Step 5 - Open Claude Code and connect

Launch Claude Code in your workspace folder:

1claude

Then type this slash command in the Claude Code chat:

1/fluent-connect --profile MY_PROFILE --retailer "My Retailer"

Slash commands like `/fluent-connect` are typed in the AI chat, not in a terminal. Claude Code recognizes them and runs the corresponding skill.This creates the full `accounts/` directory tree, downloads all workflows from your Fluent account, scans any source repos you've placed, decompiles deployed JARs, and builds a full picture of what's deployed.

Workspace directory layout

1<project-root>/                       <- any directory where you run the installer
2+-- .mcp.json                         <- MCP server config (auto-generated, gitignored)
3+-- CLAUDE.md                         <- AI workspace instructions (auto-generated)
4+-- knowledge/                        <- Domain knowledge: partner conventions, client rules
5|
6+-- accounts/
7    +-- MY_PROFILE/
8        |
9        +-- SOURCE/                   <- All implementation source code
10        |   +-- backend/              <- Java plugins: source repos, reference JARs, decompiled
11        |   |   +-- fc-plugin-custom/
12        |   |   |   +-- pom.xml
13        |   |   |   +-- resources/module.json
14        |   |   |   +-- src/main/java/...
15        |   |   +-- .decompiled/      <- Auto-generated from JAR decompilation
16        |   |
17        |   +-- frontend/             <- Mystique SDK component projects
18        |       +-- mystique-appeasement/
19        |           +-- package.json
20        |           +-- src/index.tsx
21        |
22        +-- workflows/
23        |   +-- My Retailer/          <- Downloaded workflow JSONs (one per workflow)
24        |       +-- ORDER__HD.json
25        |       +-- workflow-context.json
26        |
27        +-- features/                 <- One subdir per feature
28        |   +-- return-order/
29        |       +-- spec.md           <- Business requirements
30        |       +-- plan.md           <- Implementation plan
31        |       +-- architecture.md   <- Reverse-engineered doc
32        |       +-- status.json       <- Lifecycle tracker
33        |       +-- assets/           <- Screenshots, recordings, evidence
34        |
35        +-- reports/                  <- Ephemeral: build/, pre-deploy/, e2e-test/
36        +-- analysis/                 <- Persistent: code/, modules/, topology/
37        +-- tasks/                    <- Operational plans (non-feature work)
38        +-- sessions/                 <- Audit trail exports

Where to put your code

What you have	Where it goes
Java plugin repo (pom.xml + src/)	Clone or copy into `accounts/MY_PROFILE/SOURCE/backend/`
Module JAR or reference module (module.json + JAR)	Copy into `accounts/MY_PROFILE/SOURCE/backend/` — auto-decompiled on connect
Mystique SDK project (package.json + TypeScript)	Clone or copy into `accounts/MY_PROFILE/SOURCE/frontend/`

You can either clone from a Git repository or copy the source folder directly:

1cd accounts/MY_PROFILE/SOURCE/backend
2git clone <your-repo-url>

Copying from a source folder

1cp -r /path/to/fc-plugin-custom accounts/MY_PROFILE/SOURCE/backend/

The workspace `.gitignore` excludes `accounts/`, so cloned repos keep their own `.git` independently.Adding a JAR (no source):

1cp fc-plugin-custom-1.2.3.jar accounts/MY_PROFILE/SOURCE/backend/

Downloading workflows (if not using /fluent-connect):

1fluent workflow download -p MY_PROFILE -r "My Retailer" -w all \
2  -o accounts/MY_PROFILE/workflows/"My Retailer"/

Step 6 - Set credentials for browser UI testing (optional)

Needed for `/fluent-ui-test`, `/fluent-ui-record`, and `/fluent-mystique-preview` to log into OMS/Store apps. Add them to your shell profile (`~/.bashrc`, `~/.zshrc`, or PowerShell `$PROFILE`):

1export FLUENT_USERNAME=your-username
2export FLUENT_PASSWORD=your-password

Profile-based auth handles all Fluent API calls automatically. These are only needed for browser automation.

Step 7. Pick your starting path

Different people need different starting points. Find your persona and jump in:

Persona	Your first session	Section
🚀 New Starter — just joined, need context	Map the implementation, then explore features	Start here ↓ then §4
🔨 Builder — ready to implement	Gather requirements, plan, build	Jump to §5
🔍 Investigator — debugging an issue	Trace the stuck order, check events	Jump to §4
📋 Reviewer — auditing before go-live	Run RFL assessment, map implementation	Jump to §6

Step 8. Enabling skill observability (optional)

Want to see which skills ran, audit routing accuracy, or check skill authoring quality? `/fluent-skill-observability` has four sub-commands:

Sub-command	What it does	Requires setup?
`quality`	Static analysis of SKILL.md authoring (scores 10 dimensions)	No — works immediately
`trace show`	Shows which skills fired this session	Yes — needs trace data (see below)
`trace analyze`	Cross-session routing accuracy report	Yes — needs 10+ trace records
`feedback dashboard`	Per-skill success/failure rates and learnings	Yes — accumulates over sessions

Zero-config check — run this right away in Claude Code:
`/fluent-skill-observability quality workflow-builder`

Or audit all installed skills at once: `/fluent-skill-observability quality` (no argument).To enable trace capture, ask Claude Code to set up hooks:
`/fluent-skill-observability trace hook-setup`

This generates a PostToolUse hook config for `.claude/settings.json`. Once active, every skill invocation is logged to `accounts/<PROFILE>/traces/skill-trace.jsonl`. After a few sessions, `trace analyze` and `feedback dashboard` produce meaningful reports.Tracing is opt-in and lightweight. Without hook setup, skills still work normally — you just don't get execution telemetry.

Content in this track:

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

End Of Track

Getting Started with Fluent AI Skills

Getting Started with Fluent AI Skills

Key Points

Steps

Prerequisites

Step 1 - Create a Fluent CLI profile

Step 2 - Create a workspace and install skills

Step 4 - Verifying the Installation

Step 5 - Open Claude Code and connect

Workspace directory layout

Where to put your code

Copying from a source folder

Step 6 - Set credentials for browser UI testing (optional)

Step 7. Pick your starting path

Step 8. Enabling skill observability (optional)

Related content

Fluent Commerce AI Skills

Fluent MCP Server Extension

Knowledge Tracks Related To This Topic

Building Blocks

Browse By Type

Helpful Resources

Quick Links