DEV Community: Ateina

Canvas Apps Authoring MCP: Testing what it can do

Ateina — Sun, 19 Apr 2026 15:08:38 +0000

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 💚

What else to check if you want to start:

GitHub - Canvas Apps Plugin
MS Docs - Create and edit canvas apps with AI code generation tools (preview)
Editing Canvas Power Apps with GitHub Copilot
(new release) From Idea to App in Minutes: What the Canvas Apps MCP Plugin Means for Real Projects

Power Pages Client API: Building with $pages.webAPI and $pages.agent

Ateina — Mon, 13 Apr 2026 14:13:35 +0000

Power Pages is my most recent obsession, so I went to try the Client API as soon as I had some time.

Goal is to enhance Bibliotheca with currently reading list, form to add a book and agent to get recommendations and Client API will be used for this.

I know that Sapiens has the Hail Mary cover. Life's too short for 100% correct mock data. Dune is correct, this is all I care about.

Initialize Client API

With the teeny tiny $pages variable, we get access to forms/lists modifications, Dataverse records, user authentication and more 👀

To start we need Microsoft.Dynamic365.Portal.onPagesClientApiReady function, and it could be used in two ways:

Callback-based API readiness

Choose to support older browsers or legacy scripts, event-driven patterns

Microsoft.Dynamic365.Portal.onPagesClientApiReady(($pages) => { ... });

Promise/await-based API readiness

Choose for modern environments or if you are already using async/await in the solution

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();

Work with Dataverse through Client API

With WebApi in Client API we can:

createRecord
retrieveRecord
retrieveMultipleRecords

To prepare for webapi, in addition to table permissions, we need to add site settings:

Webapi/<table name>/enabled
Webapi/<table name>/fields

retrieveMultipleRecords method

First method to use - retrieveMultipleRecords:

$pages.webAPI.retrieveMultipleRecords(entitySetName: string, options?: string): Promise<object>

Note the entitySetName: my muscle memory went for logical name and I fought with the API for quite some time before realizing

As I want to show my 3 books in progress, I'll need:

$filter to get only current user's books with "Reading" status
$expand to pull in book details from the related Books table
{{ user.id }} via Liquid in a hidden input: <input type="hidden" id="contactId" value="{{ user.id }}" />. Would be nice by the way to have it in $pages.user, in addition to signIn/signOut, just saying.

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();
let books = await $pages.webAPI.retrieveMultipleRecords(
'adrbp_userbookstatuses', 
`$select=adrbp_name&
$expand=adrbp_Book($select=adrbp_name,adrbp_author,adrbp_bookimageurl)&
$filter=adrbp_status eq 000000000 and _adrbp_user_value eq ${userId}&
$top=3`);

let container = document.getElementById('books-list');
books.value.forEach((book) => {
    let card = document.createElement('div');
    card.className = 'book-card';
    card.innerHTML = cardInnerHTML(
      book.adrbp_Book.adrbp_bookimageurl, 
      book.adrbp_Book.adrbp_name, 
      book.adrbp_Book.adrbp_author
    );
    container.appendChild(card);
});
function cardInnerHTML(imageUrl, title, author) {  
    return `<img src="${imageUrl}" alt="${title}" class="book-card-image">  
                <div class="book-card-details">  
                <span class="book-card-title">${title}</span>  
                <span class="book-card-author">${author}</span>  
            </div>`  
}

I'm definitely spoiled by years with React and Sass 🌚

But here's what we got:

createRecord method

Library has to grow, and for this we need "Add book" option. So to create record in the table - createRecord:

$pages.webAPI.createRecord(entitySetName: string, data: object): Promise<object>
// Returns: A Promise that resolves to the created record or operation result.

This is a different table, don't forget to add webapi site settings

Simplified form layout:

<form id="add-book-form" class="addbook-form" novalidate>
    <div class="form-group">
        <label for="book-title" class="form-label">
          Title 
          <span class="required">*</span>
        </label>
        <input type="text" id="book-title" class="form-input" required />
    </div>
    <!-- Author (required), Genre, Year, ISBN, Cover URL, Description -->
    <button type="submit" id="add-book-submit" class="btn-submit">Add Book</button>
</form>

In actual code we need target table and object we want to create: await $pages.webAPI.createRecord('adrbp_books', record);

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();

// --- Form setup ---
const form = document.getElementById('add-book-form');

// --- Genre dropdown (choice column values) ---
const genreSelect = document.getElementById('book-genre');
const GENRE_OPTIONS = [
    { value: 455810000, label: 'Fiction' },
    // ... other genres
];
genreSelect.innerHTML = '<option value="">Select a genre...</option>';
GENRE_OPTIONS.forEach(({ value, label }) => {
    const el = document.createElement('option');
    el.value = value;
    el.textContent = label;
    genreSelect.appendChild(el);
});

// --- Submit handler ---
form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const title = document.getElementById('book-title').value.trim();
    const author = document.getElementById('book-author').value.trim();
    if (!title || !author) {
        showMessage('Title and Author are required.', 'error');
        return;
    }

    const record = {
        adrbp_name: title,
        adrbp_author: author,
    };
    const genre = document.getElementById('book-genre').value.trim();
    if (genre) record.adrbp_genre = parseInt(genre);

    try {
        await $pages.webAPI.createRecord('adrbp_books', record);
        showMessage('Book added to the library!', 'success');
        form.reset();
    } catch (err) {
        showMessage('Failed to add book. Please try again.', 'error');
    }
});

So finally, library will get new books added 💫

Ask the Librarian

Another Client API player: $pages.agent. With it we can call our special Librarian agent for book recommendations. This one is a really simple anonymous agent with public access. This baby agent will just suggest a few books, it has no idea about Dataverse tables content. A real agent would have Microsoft authentication and a more complex flow, but $pages.agent doesn't care about the complexity on the Copilot side, it only needs the agent schema name.

But first, agent should be configured on website (after some struggle with permissions and licenses in order to publish agent at all, maybe this link will save you some time).

In Power Pages -> Set up -> Agents -> Add your agent

To send something to the agent we need:

$pages.agent.SendActivity(
    agentSchemaName: string,
    inputActivity: object,
    responseSubscriber: function,
    errorSubscriber: function
);

Here we trigger an agent and get response:

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();

const magicBtn = document.getElementById('magic-button');
const agentResponse = document.getElementById('agent-response');

magicBtn.addEventListener('click', () => {
    agentResponse.textContent = 'Finding your next read...';

    const inputActivity = { 
        text: 'recommend 3 books, return only the titles separated by commas' 
    };
    const responseSubscriber = (activity) => {
        if (activity.text) {
            const books = activity.text.split(',').map(b => b.trim()).filter(Boolean);
            agentResponse.innerHTML = books.map(b => `<p>${b}</p>`).join('');
        }
    };
    const errorSubscriber = (error) => {
        agentResponse.textContent = 'Something went wrong. Please try again.';
        console.error('Agent error:', error);
    };
    $pages.agent.SendActivity(
        'bibliotheca_agent', 
        inputActivity, 
        responseSubscriber, 
        errorSubscriber
    );
});

Now ✨magic button✨ can do some magic, trigger agent and get list of books

Wrapping Up

Waiting for release (fingers crossed, GA in July 2026) and more methods for each operation (I need my D and U, full CRUD). Anyway, love this update, not flashy, but smth that makes development more focused on the final goal.

References

Power Pages Web Templates: Working with Liquid and FetchXML

Ateina — Mon, 30 Mar 2026 19:58:55 +0000

As someone in love with SPFx web parts, Power Pages web templates felt like something I'd want to try.

What we're building:

Analytical dashboard tiles for a book tracking application. Each tile will:

Connect to Dataverse using FetchXML
Accept a status code as a parameter
Display a count of books matching that status for the current user

App overview (drawing, table schema)

My 5-year-old Procreate license is finally seeing some action:

Obviously, there's no way to improve this perfection, so let's move on to the database schema.

Table Structure

This solution uses the following table structure:

We only need the User Book Status table for our dashboard:

Which books the user has
What status each book is in (Read, Reading, Want to Read, etc.)
The link to the user (Contact)

Creating a Web Template

Quick setup: Power Pages Management → Web Templates → New Web Template. Name it, connect to your site, set MIME type to application/json

Done with the basics, we can move to the actual web template building 😈

FetchXML Block

First things first, create table permissions for each table you'll use. Go to Power Pages Management → Table Permissions, add your table, set the scope and assign roles. Without this, FetchXML will return nothing, even if you're god and emperor in your environment.

Fetching Book Status

Here is the FetchXML logic used to retrieve the book count:

{% assign status_value = status | default: '455810000' %}
{% assign color = card_color | default: '#4ade80' %}

{% fetchxml books %}
    <fetch aggregate="true">
    <entity name="adrbp_userbookstatus">
        <attribute name="adrbp_userbookstatusid" alias="bookcount" aggregate="count" />
        <filter type="and">
            <condition attribute="adrbp_status" operator="eq" value="{{ status_value }}" />
            <condition attribute="adrbp_user" operator="eq" value="{{ user.id }}" />
        </filter>
    </entity>
</fetch>
{% endfetchxml %}

We set table User Book Status, configured to return count and filtering by current user and dynamic status.

Now you can pass parameters:

{% include "Dashboard Stat" status: '455810000' title: "Read" secondary_title: "Finished books" card_color: "#b6d7a8" card_icon: "✅" %}

We can play with fetchxml code a little, but with some limitations.

What you can pass as parameters:

condition values (current config)

<condition attribute="adrbp_status" operator="eq" value="{{ status_value }}" />

optional conditions (on/off) Note: if you've set a default value with | default:, the variable will never be empty, so the {% if %} check won't work as expected. Remove the default to make this approach work.

<filter type="and">
    <condition attribute="adrbp_user" operator="eq" value="{{ user.id }}" />
    {% if status %}
        <condition attribute="adrbp_status" operator="eq" value="{{ status }}" />
    {% endif %}
</filter>

comparison logic via {% if %} blocks

{% if filter_type == 'active' %}
  <condition attribute="adrbp_status" operator="ne" value="455810004" />
{% elsif filter_type == 'inactive' %}
  <condition attribute="adrbp_status" operator="eq" value="455810004" />
{% endif %}

Layout

HTML Structure

The HTML block is straightforward - we use Liquid variables (in double curly brackets) to insert dynamic values, and CSS custom properties to pass colors to our styles.

<div class="stat-card" style="--card-color: {{ color }};">
    <div class="stat-content">
        <div class="stat-title">{{ title }}</div>
        <div class="stat-value">{{ books.results.entities[0].bookcount }}</div>
        <div class="stat-subtitle">{{ secondary_title }}</div>
    </div>
    <div class="stat-icon">
        {{ card_icon }}
    </div>
</div>

As I wanted a different color for each card, I passed inline style="--card-color: {{ color }};" to feed each card's unique color into CSS.

CSS Styling

The CSS classes need to be defined in your site's styles. You can add them with any of these options:

Custom CSS file (Styling workspace)
Page-specific styles
Global CSS file

.stat-card {
    padding: 20px;
    border-radius: 12px;
    /* …… */
}

.stat-icon {
    background-color: color-mix(in srgb, var(--card-color) 20%, white);
    padding: 12px;
    /* …… */
}

/* ... other styles ... */

The --card-color custom property sets each card’s unique color, and lets us create color variations (like the lighter icon background) from that same base color.

Manifest

Manifest is a JSON object which represents component configuration.

{% manifest %}  
{  
 "type": "Functional",  
 "displayName": "Display Name",  
 "tables": ["table1_logical_name", "table2_logical_name"],  
 "params": [...]  
}  
{% endmanifest %}

Notes:

The type can be either Functional or Layout. Use Functional for custom components (like our book card). Use Layout only for page templates and structural elements.
The tables property is developer-defined in the manifest, not user-configurable. Unlike params, users cannot change which tables the component connects to.
Parameters are always strings. You can convert them to boolean, decimal, integer or string (maybe you just love converting strings to strings) using Liquid Type filters. {% assign items_count = count | integer %}

So this is what our component's manifest ends up looking like:

{% manifest %}
{
    "type": "Functional",
    "displayName": "Book Status Card",
    "description": "Shows books by status",
    "tables": ["adrbp_userbookstatus"],
    "params": [
        {
        "id": "title",
        "displayName": "Title"
        },
        {
        "id": "secondary_title",
        "displayName": "Secondary Title"
        },
        {
        "id": "status",
        "displayName": "Status",
        "description": "Status to filter"
        },
        {
        "id": "card_color",
        "displayName": "Card Color",
        "description": "Card color, use hex in a format #xxxxxx"
        },
        {
        "id": "card_icon",
        "displayName": "Card Icon",
        "description": "Card icon"
        }
    ]
}
{% endmanifest %}

And now, how it looks when you try to update web template’s config in UI:

Putting It All Together

Once our web template is ready, we can add it to a page like this:

{% include "Dashboard Stat" status: '455810000' title: "Read" secondary_title: "Finished books" card_color: "#b6d7a8" card_icon: "✅" %}

{% include "Dashboard Stat" status: '455810001' title: "Reading" secondary_title: "Currently reading" card_color: "#a8d7c0" card_icon: "📖" %}

{% include "Dashboard Stat" status: '455810002' title: "Want to Read" secondary_title: "On your wishlist" card_color: "#f5c6a8" card_icon: "⭐" %}

{% include "Dashboard Stat" status: '455810004' title: "Dropped" secondary_title: "Set aside" card_color: "#f48fb1" card_icon: "🚫" %}

Each {% include %} creates a reusable card with different data, so it is clean and easy to maintain.

Final Result

And here's our book app home page - no difference from the initial design: