From d641eb530e51949182b30e2953922ece26aa522d Mon Sep 17 00:00:00 2001 From: Cristian Date: Fri, 15 May 2026 17:14:36 -0300 Subject: [PATCH 1/2] W-22512509-Add-descriptive-UI-to-docs-CP --- modules/ROOT/pages/vibes-get-started.adoc | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/modules/ROOT/pages/vibes-get-started.adoc b/modules/ROOT/pages/vibes-get-started.adoc index 7fe83f778..2bd6ff22c 100644 --- a/modules/ROOT/pages/vibes-get-started.adoc +++ b/modules/ROOT/pages/vibes-get-started.adoc @@ -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 use the inline *+* controls on the canvas 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 @@ -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. From ac3dcbd8a81ccef7167e66f9d430b489d741c02f Mon Sep 17 00:00:00 2001 From: Cristian Pose <101070178+Crispy-Salesforce@users.noreply.github.com> Date: Fri, 15 May 2026 17:30:08 -0300 Subject: [PATCH 2/2] W-22512509-Fix-hover-icon-description-CP W-22512509-Fix-hover-icon-description-CP --- modules/ROOT/pages/vibes-get-started.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/vibes-get-started.adoc b/modules/ROOT/pages/vibes-get-started.adoc index 2bd6ff22c..89c39265e 100644 --- a/modules/ROOT/pages/vibes-get-started.adoc +++ b/modules/ROOT/pages/vibes-get-started.adoc @@ -40,7 +40,7 @@ For example, instead of decoding a technical component first, you can understand 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 use the inline *+* controls on the canvas for quick edits. +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.