Skip to content

W-22512509-Add-descriptive-UI-to-docs-CP #645

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Crispy-Salesforce wants to merge 2 commits into
base: MS2026-05-ACB-1-19
Choose a base branch
from
+16 −1
Open

W-22512509-Add-descriptive-UI-to-docs-CP #645

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d641eb5
W-22512509-Add-descriptive-UI-to-docs-CP
Crispy-Salesforce May 15, 2026
ac3dcbd
W-22512509-Fix-hover-icon-description-CP
Crispy-Salesforce May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion modules/ROOT/pages/vibes-get-started.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,22 @@ MuleSoft Vibes attempts to perform the actions outlined in the plan by using the

You can switch between modes depending on whether you prefer to review the plan before execution or allow MuleSoft Vibes to act directly.

[[vibes-descriptive-ui]]
== Descriptive UI in MuleSoft Vibes

Descriptive UI is the default canvas experience in MuleSoft Vibes starting with Anypoint Code Builder v1.19.0. It modernizes flow development with a vertical, recipe-style layout that makes integrations easier to read and update.

The canvas uses AI to generate human-readable descriptions for each component in your flow.
For example, instead of decoding a technical component first, you can understand what that step does in business terms.

Visual indentation highlights branching and nested logic, such as choice routers and error handling paths, so you can scan complex flows faster. This structure helps you understand overall flow behavior before opening detailed configuration panels.

You can build and refine flows through agent-led and direct UI interactions. Use natural language commands in MuleSoft Vibes to add, modify, delete, and reorder components, or hover over the canvas to reveal inline *+* controls for quick edits.

Descriptions are generated on demand with your approval, which helps you document legacy and newly created flows without interrupting development.

If you prefer the previous experience, you can switch back to the *Classic* canvas view at any time from canvas controls or Anypoint Code Builder settings.


=== How MuleSoft Vibes Generates Code

Expand All @@ -50,7 +66,6 @@ To ensure the best results:

For more information about how MuleSoft AI generation pipelines work, see the https://blogs.mulesoft.com/automation/how-mulesoft-turns-generative-output-into-value/[MuleSoft research blog].


== Provide MuleSoft Vibes with Context

You can improve the accuracy of MuleSoft Vibes output by providing additional context files or inputs.
Expand Down