AI Agent's Can't Access the "People Friendly" Labels appearing in canvas UI
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3551315. -->
Reported by: [afoster](https://www.drupal.org/user/594458)
Related to !526
>>>
<h3 id="overview">Overview</h3>
<p>When using AI chat to update content on the canvas, the Canvas Template Agent creates a list of components it can choose from as an input in decision-making. To see what is available to the agent visit: <a href="https://v2025demo.ddev.site/admin/config/ai/explorers/tools_explorer?tool=canvas_ai%3Aget_component_context">https://v2025demo.ddev.site/admin/config/ai/explorers/tools_explorer?tool=canvas_ai%3Aget_component_context</a><br>
and select "run Function".</p>
<p>This outputs yaml data like this (example truncated to show "section" component from Mercury)</p>
<pre>sdc.mercury.section:<br> id: sdc.mercury.section<br> name: Section<br> description: 'A section for components in a column. This can set in between 1 to 4 columns in different ratios. Note that the main slot is where the columns can be set. Header and footer always is 100% width. ALWAYS PUT THE COMPONENTS IN THE main_slot '<br> group: Layout<br> props:<br> columns:<br> name: 'Content layout'<br> description: 'No description available'<br> type: string<br> width:<br> name: 'Section width'<br> description: 'No description available'<br> type: string<br> default: 'hg:lg:max-w-full'<br> enum:<br> - 'hg:lg:max-w-full'<br> - 'hg:lg:max-w-9/10'<br> - 'hg:lg:max-w-8/10'<br> - 'hg:lg:max-w-3/4'<br> - 'hg:lg:max-w-1/2'<br> margin_block_start:</pre><p>In the Canvas UI, the "section width" property values in the select list are "100%, 90%, 80%, 75%, 50%". </p>
<p>These people-friendly UI labels do not appear to the Agent; They only see the values. </p>
<p>If I write a prompt with things I want to happen with specific properties, I'll use the labels I can see on the screen. </p>
<p>"Resize the width of all the sections currently set to 100% to 75%". Currently, the LLM must interpret what I type and guess which values are the closest. </p>
<h3 id="proposed-resolution">Proposed resolution</h3>
<p>Update the Get Component Context (canvas_ai) function to show both the value and labels for components available to Canvas. </p>
<pre>- label: '100%'<br> value: 'hg:lg:max-w-full'<br>- label: '90%'<br> value: 'hg:lg:max-w-9/10'<br>- label: '80%'<br> value: 'hg:lg:max-w-8/10'<br>- label: '75%'<br> value: 'hg:lg:max-w-3/4'<br>- label: '50%'<br> value: 'hg:lg:max-w-1/2'</pre><h3 id="ui-changes">User interface changes</h3>
<p>None.</p>
issue