LWC Drop-in Components

Lightning Web Components

FlowMason ships six LWC components ready to drop onto any Salesforce page. No Apex, no boilerplate — configure them in Lightning App Builder and go.

Component overview

Component	What it does	Where to use it
`c-fm-ai-summary`	AI-generated record summary card, with auto-run or on-demand modes	Record pages, App pages, Home pages
`c-fm-ai-chat`	Conversational AI panel with record context injection	Record pages
`c-fm-pipeline-builder`	The full Pipeline Studio visual canvas	Standalone tab or Lightning app
`c-fm-debug-viewer`	Replay a completed debug run, step through stage snapshots	Embedded in Studio or standalone
`c-fm-config-editor`	Admin UI for editing `FM_Config__mdt` values	Admin pages (requires permission)
`c-fm-provider-admin`	Manage LLM provider records and API keys	Admin pages (requires permission)

c-fm-ai-summary

The workhorse component. Drop it onto a record page and it generates a bullet-point summary of whatever record the user is viewing — Account, Case, Opportunity, or any custom object. No configuration required to get started.

Adding it to a record page

Open any record page (Account, Case, etc.) and click the gear icon → Edit Page
In the left panel under Custom, find FlowMason AI Summary
Drag it onto the page — the right column is a good default spot
In the properties panel, configure Card Title, optional Prompt, and whether to Require click to generate
Save → Activate (assign to App, Record Type, or Profile)

HTML — component markup

<!-- Drop onto any record page in Lightning App Builder -->
<c-fm-ai-summary
  title="AI Summary"
  prompt="Summarize this account for the AE in 3 bullets."
  provider="anthropic"
  max-tokens="400"
  require-click="false">
</c-fm-ai-summary>

<!-- On App/Home pages, supply recordId explicitly -->
<c-fm-ai-summary
  record-id="001000000000001"
  title="Pipeline Health"
  require-click="true">
</c-fm-ai-summary>

LWC — property reference

// c-fm-ai-summary — Page Builder properties:
// title           : string  — Card title (default: "AI Summary")
// prompt          : string  — Override the default summarization prompt
// provider        : string  — Override the active LLM provider
// max-tokens      : number  — Max output tokens (default: 400)
// require-click   : boolean — false = auto-run on load (default), true = wait for button

// c-fm-ai-chat — Page Builder properties:
// title           : string  — Panel title (default: "Ask AI")
// system-prompt   : string  — System context for the conversation
// provider        : string  — Provider override
// max-history     : number  — Messages to keep in context (default: 20)

On Record Pages, recordId is auto-populated from the page context — you don't set it. On App or Home pages, supply it explicitly via the Page Builder property.

Listening for events

If you're embedding c-fm-ai-summary inside a parent LWC, you can listen to its lifecycle events:

JavaScript — event handlers

// Listen for events from c-fm-ai-summary in a parent component
// Event: fmsummaryloaded — fired when the summary completes successfully
// Event: fmsummaryerror  — fired when the LLM call fails

// In your LWC JavaScript:
handleSummaryLoaded(event) {
    const { summary, model, inputTokens, outputTokens } = event.detail;
    console.log('Summary:', summary);
    console.log('Model used:', model);
}

handleSummaryError(event) {
    const { errorMessage } = event.detail;
    this.showToast('Error', errorMessage, 'error');
}

c-fm-ai-chat

An embedded conversational AI panel that automatically injects the current record as context. The user types questions and the LLM responds with record-aware answers — no copy-paste of record data required.

HTML — component markup

<!-- Conversational AI panel — record context is injected automatically -->
<c-fm-ai-chat
  title="Ask AI"
  system-prompt="You are a Salesforce CRM expert. Answer questions about this record."
  provider="anthropic"
  max-history="20">
</c-fm-ai-chat>

Coming soon: c-fm-ai-chat is on the primitive roadmap and will ship in a future release. Sign up at /contact to be notified.

Admin components

These three components are for admins and power users — they're protected by custom permissions so end users can't access them.

HTML — admin components

<!-- Pipeline Studio — the visual pipeline authoring canvas -->
<!-- Add to a Lightning app page or standalone tab -->
<c-fm-pipeline-builder></c-fm-pipeline-builder>

<!-- Debug Viewer — replay mode for completed debug runs -->
<c-fm-debug-viewer execution-id="a0b000000000001"></c-fm-debug-viewer>

<!-- Config Editor — admin UI for FM_Config__mdt -->
<!-- Requires FlowMason_Config_Admin custom permission -->
<c-fm-config-editor></c-fm-config-editor>

<!-- Provider Admin — manage LLM provider records -->
<!-- Requires FlowMason_Provider_Admin custom permission -->
<c-fm-provider-admin></c-fm-provider-admin>

Component	Required permission
`c-fm-pipeline-builder`	`FlowMason_Full_Access`
`c-fm-debug-viewer`	`FlowMason_Full_Access`
`c-fm-config-editor`	`FlowMason_Config_Admin`
`c-fm-provider-admin`	`FlowMason_Provider_Admin`

Styling with CSS variables

FlowMason components expose CSS custom properties so you can align them with your org's design system without modifying component internals. Set these on :root or scope them to individual component elements.

CSS — theme variables

/* Override FlowMason Studio CSS variables in your org theme */
:root {
    --fm-brand-color: #0176D3;       /* Primary accent */
    --fm-brand-dark:  #032D60;       /* Hover/active state */
    --fm-card-radius: 12px;          /* Component border radius */
    --fm-font-mono:   'JetBrains Mono', monospace;  /* Code font */
}

/* Or scope to a specific component instance */
c-fm-ai-summary {
    --fm-card-bg: #f9fafb;
    --fm-card-border: #e2e8f0;
}

Shadow DOM note: LWC uses shadow DOM, which means external CSS selectors can't pierce component boundaries. Always use the published CSS custom properties (--fm-*) for theming. Direct class overrides from a parent stylesheet won't work.

Troubleshooting

Component doesn't appear in the App Builder palette

The running admin user needs FlowMason_Full_Access assigned. Refresh App Builder after assigning the permission set.

Summary shows "error" instead of content on page load

Check the browser console for the error detail. Most commonly it's a missing API key (errorMessage: HTTP 401) or an inactive provider config. See Provider Configuration.

recordId is undefined on an App page

App and Home pages don't have a page-level record context. Set record-id explicitly in the Page Builder property panel.

What's next

Pipeline Studio

Build multi-step AI pipelines visually with c-fm-pipeline-builder.

Governance & Audit

Track cost, audit LLM calls, and enforce FLS from the admin components.