Canvas Apps Authoring MCP: Testing what it can do

#powerplatform #powerapps #claudecode #mcp

So Canvas Apps Authoring MCP is here in Preview. I have no doubt that it can generate something, but we need a timesaver, not more hours cleaning up after it. And I showed up with a list of demands >>>>>

My checklist

follow naming convention
use color/layout scheme from named formulas
see (and use) custom components
not main point, but add accessibility labels (the most ignored section of app checker)

Setup

On Power Platform side:
Canvas app with Coauthoring enabled (Settings > Updates > Coauthoring)

Local setup:
1) .NET SDK v10+
dotnet --version // check version
2) GitHub Copilot CLI or Claude Code

My choice is Claude Code, and my setup (or install from marketplace):
1) If wasn’t done before - Install Claude Code (one time)
npm install -g @anthropic-ai/claude-code

2) Clone the Power Platform skills repo (one time)
git clone https://github.com/microsoft/power-platform-skills.git

3) Launch Claude Code with the canvas-apps plugin
claude --plugin-dir ./power-platform-skills/plugins/canvas-apps

After everything's installed, /configure-canvas-mcp will help to connect to the app you will work on

What the MCP actually exposes

Skills:

/configure-canvas-mcp
/generate-canvas-app
/edit-canvas-app

I don’t see a lot of difference between generate and edit app, as you need to create some app anyway for /generate-canvas-app. So after the initial generation flow will be almost the same (or there is some hidden treasure I don't get yet). And I would like to prepare an app with some artefacts before adding components.

And for tools:

compile_canvas: validate YAML
sync_canvas: push/pull from the coauthoring session
get_accessibility_errors: check accessibility (okay, I see, my future favorite tool)
describe_control, list_controls, describe_api, list_apis, list_data_sources, get_data_source_schema

Test time

I'm building a Tea Collection app, just a table with items from Sharepoint and edit form.

Sharepoint List is ready:

I tried to prepare a canvas app with background and my custom Header, which was kind of a mistake, as the MCP got confused with the custom component and deleted it "to fix validation errors."

Also I added layout and theme to App.Formulas, which was not really helpful either. At first the generated components used these variables, but then it started to cry that it couldn't compile it, and replaced them with hardcoded values (but at least it used correct values):

fxAppColors = {
    Primary:      ColorValue("#556B2F"),    // Dark Olive Green - main brand color
    Secondary:    ColorValue("#A9A454"),    // Olive Green - complementary accent
    Accent:       ColorValue("#b07946"),    // Bourbon - warm highlight (buttons, links)
    Background:   ColorValue("#EFE4D4"),    // Quarter Spanish White - page/card background
    Dark:         ColorValue("#151618")     // Black Russian - text, headers, navbar
};

fxAppSpacing = {
    XS:  4,
    S:   8,
    M:   16,
    L:   24,
    XL:  32
};

So first prompt will go just to create a table from SP items:

As a result for a pretty vague prompt, this looks fine. So with a better description (adding filter, search, and proper margins), we get closer:

Test 2: Form to edit tea

Before the form I wanted to check one thing. I added a blank screen (just background), so MCP would use it as a base instead of creating its own. This one worked ✨

Then I went with a more precise description of what I want:

Prompt:   
Create a new screen for edit form.   
Form should have 2 containers.   
Left container should be 2/3 screen, with fields: Title, Brand, Type, Origin, Caffeine Level, Additions, Ratings, Loose.   
Right Container should be 1/3 of screen, fields: Notes, Opened date, In Stock.   
Add buttons: Back and Save.

I mixed up left and right a few times on prompt. Outside is safe only until I get a driving license

More detailed prompt gave a better result, who would know.

With a few more prompts to fix the blue color, move Loose and Rating fields in one line, update Save button logic with IfError, and move buttons to the footer, now it's something close to what I wanted:

Scorecard against the original checklist

Back to the checklist:
1) Naming convention
In general fine, but it's like it was written by someone who heard about it but didn't actually open the code readability page. So we got tog (not tgl), rec (should be shp), inp (should be txt).

2) Use named formulas
It is aware of them, knows values, but gets cranky working with them. Maybe a temp workaround is to generate the layout with hardcoded values and with the last prompt replace them with named formulas.

3) Custom components
No luck here yet, but it's early days

4) Accessibility labels
Not included during generation by default, but since get_accessibility_errors exists, it can be done at the end or included in the prompt.

Round 2: feeding findings into memory and retrying

Now that I know the blind spots, I added my findings into Claude Code's memory and tried again from scratch.

New prompt:  
Edit the existing HomeScreen. 
Add a gallery styled as a table showing items from SharePoint list "TeaCollection_SPList". 
Columns: Title, Brand, Origin, Rating, Loose, OpenedDate, InStock 
Layout: 
Top: empty container named conFunctionalBar (for future search/filter controls) 
Below: gallery table 
Styling: 
Use fxAppColors and fxAppSpacing from App.Formulas for all colors and spacing 
Add margins (left, right, bottom) using fxAppSpacing values 
Reference snippets/gallery.txt and snippets/gallery-header.txt for structure and theming. 
Add sorting to Title and Brand.

And then to add search and filters:

Edit conFunctionalBar:
- Left: search input for filtering gallery items. Reference snippets/search.txt
- Right: filter button to open/close filter panel. Reference snippets/filterButton.txt

Add filter panel (1/3 screen width, right side):
- Filters: Loose (toggle), In Stock (toggle), Rating (slider), Opened Date (date picker)
- Two buttons at the bottom: Apply and Clear
- Clear closes panel and resets filter values
- Apply closes panel and filters gallery items

When panel is open, the remaining 2/3 of the screen should have a semi-transparent overlay (blur/dim effect).

Where we ended:

Fabulous 💃

Verdict

Generated apps seem nice and usable, and most important functional. Custom components and formulas support is on my wishlist, so I'll come back to check closer to GA 💚