Experience Cloud components that carry your brand

Describe the portal page. Your AI assistant builds it.

Tell Claude, Cursor or Copilot what your customers should see. It reads the real Experience Cloud Components catalog through the Avonni MCP server and edits your site page with documented settings only, ready to review before you deploy.

Shown in VS Code with Copilot

One prompt. One portal section.

The avonni-experience-components skill checks every component against the real catalog, edits the page, then validates it. Nothing is deployed or published until you say so.

Works with Claude, Cursor, Copilot, Gemini and Agentforce

content.json — customer-portal — Visual Studio Code

EXPLORER

⌄ digitalExperiences

⌄ Customer_Portal1

⌄ sfdc_cms__view

⌄ home

content.json

› my_orders

› support

content.json_meta.json

41{
42  "attributes": {
43    "title": "My orders",
44    "caption": "Open orders",
45    "readOnly": true,
46    "searchEngineAttributes": {
47      "position": "right"
48    },
49    "paginationAttributes": {
50      "showPagination": true
51    }
52  }
53}

GitHub Copilot

Add a table of the customer's orders
to the portal home, with status badges.

I'll check the real Experience Cloud catalog before editing the page.

MCP list_components✓

MCP get_component_docs✓

Skill avonni-experience-components✓

Ran validate-view.mjs✓

Done. Nothing is deployed or published until you say so.

KeepUndo

Ask CopilotAgent ▾

⎇ maincustomer-portalCopilot ✓