Describe what you need. Your AI builds it with real components.

Avonni Agent Skills teach Claude, Cursor or Copilot how to build for your Lightning pages, screen flows and Experience sites, from the real Avonni catalog. No code to write. Set up once, in about 10 minutes.

Set up in 10 minutesRequest a Demo
Claude logo
Claude
Cursor logo
Cursor
GitHub Copilot logo
GitHub Copilot
Salesforce logo
Agentforce Vibes
Agent Skills installed
Catalog connected

Works in

Claude desktop app

Paste the setup in the chat and Claude does the rest. You never open a terminal.

Best for non-developers

Claude ⌄Avonni MCP server connected
Add a Kanban of open Cases to the Account page, grouped by Status.
✦
I'll check the real Avonni catalog before building anything.
Avonni MCPlist_componentsdynamic✓
Avonni MCPget_component_docsdcKanban✓
Skillavonni-dynamic-components✓
✦
Done. A Kanban of open Cases in four columns, drag and drop updates the status.
Account_Cases_Kanban.jsonforce-app/main/default/avonni
Nothing has been deployed. Review the file, then deploy it or open it in the Component Builder.
Reply to Claude…

Works in

Claude Code

The same skills and server, for developers who live in the terminal.

claude — ~/salesforce/avonni-org
✻ Welcome to Claude Code!/help for help, /status for your current setupcwd: ~/salesforce/avonni-org
Add a Kanban of open Cases to the Account page, grouped by Status.
⏺ I'll check the real Avonni catalog before building anything.
⏺ avonni - list_components (MCP)(toolset: "dynamic")
105 components ✓
⏺ avonni - get_component_docs (MCP)(name: "dcKanban")
Attributes and interactions loaded ✓
⏺ Skill(avonni-dynamic-components)
⏺ Write(force-app/main/default/avonni/Account_Cases_Kanban.json)
Wrote 38 lines ✓
⏺ Done. A Kanban of open Cases in four columns, drag and drop updates the status. Nothing is deployed until you say so.
Try "deploy it to the scratch org"
? for shortcuts

Works in

Cursor

Skills install with one command. The server is one entry in your editor settings.

Account_Cases_Kanban.json — avonni-org — Cursor
EXPLORER
⌄ avonni-org
⌄ force-app
⌄ main/default
⌄ avonni
Account_Cases_Kanban.json
› classes
› lwc
sfdx-project.json
Account_Cases_Kanban.jsonsfdx-project.json
1{
2  "component": {
3    "name": "dcKanban",
4    "title": "Open Cases",
5    "groupFieldName": "{{Record.Status}}",
6    "cardAttributes": {
7      "title": "{{Record.Subject}}",
8      "dueDate": "{{Record.CreatedDate}}"
9    }
10  },
11  "query": { "objectApiName": "Case", "filter": "IsClosed = false" }
12}
Agent ⌘I
Add a Kanban of open Cases to the
Account page, grouped by Status.
I'll check the real Avonni catalog before building anything.
MCP list_components✓
MCP get_component_docs✓
Skill avonni-dynamic-components✓
Created Account_Cases_Kanban.json✓
Done. Nothing is deployed until you say so.
AcceptReject
Ask anything (⌘L)

Works in

GitHub Copilot and VS Code

Same setup as Cursor, in the editor your developers already have open.

Account_Cases_Kanban.json — avonni-org — Visual Studio Code
EXPLORER
⌄ AVONNI-ORG
⌄ force-app
⌄ main/default
⌄ avonni
Account_Cases_Kanban.json
› classes
› lwc
Account_Cases_Kanban.jsonsfdx-project.json
1{
2  "component": {
3    "name": "dcKanban",
4    "title": "Open Cases",
5    "groupFieldName": "{{Record.Status}}",
6    "cardAttributes": {
7      "title": "{{Record.Subject}}",
8      "dueDate": "{{Record.CreatedDate}}"
9    }
10  },
11  "query": { "objectApiName": "Case", "filter": "IsClosed = false" }
12}
GitHub Copilot
Add a Kanban of open Cases to the
Account page, grouped by Status.
I'll check the real Avonni catalog before building anything.
MCP list_components✓
MCP get_component_docs✓
Skill avonni-dynamic-components✓
Created Account_Cases_Kanban.json✓
Done. Nothing is deployed until you say so.
KeepUndo
Ask CopilotAgent ▾
⎇ mainavonni-orgCopilot ✓

Works in

Agentforce Vibes

Connect the server and Vibes builds Salesforce UI against the real Avonni docs.

Account_Cases_Kanban.json — avonni-org — Agentforce Vibes
Account_Cases_Kanban.jsonsfdx-project.json
1{
2  "component": {
3    "name": "dcKanban",
4    "title": "Open Cases",
5    "groupFieldName": "{{Record.Status}}",
6    "cardAttributes": {
7      "title": "{{Record.Subject}}",
8      "dueDate": "{{Record.CreatedDate}}"
9    }
10  },
11  "query": { "objectApiName": "Case", "filter": "IsClosed = false" }
12}
Agentforce VibesAgent
Add a Kanban of open Cases to the
Account page, grouped by Status.
I'll check the real Avonni catalog before building anything.
MCP list_components✓
MCP get_component_docs✓
Skill avonni-dynamic-components✓
Created Account_Cases_Kanban.json✓
Done. Nothing is deployed until you say so.
AcceptReject
Ask Agentforce Vibes
avonni-org (scratch org)Avonni MCP · 9 tools

Works in

Gemini CLI

Works too. It is the path we have tested least.

gemini — ~/salesforce/avonni-org
Tips: ask questions, edit files, or run commands. /help for more.
Add a Kanban of open Cases to the Account page, grouped by Status.
I'll check the real Avonni catalog before building anything.
list_components (avonni MCP) toolset: dynamic  ✓ 105 components
get_component_docs (avonni MCP) dcKanban  ✓
ReadFile .gemini/skills/avonni-dynamic-components/SKILL.md  ✓
WriteFile force-app/main/default/avonni/Account_Cases_Kanban.json  ✓
Done. A Kanban of open Cases in four columns, drag and drop updates the status. Nothing is deployed until you say so.
Type your message or @path/to/file
~/salesforce/avonni-orgavonni MCP · 9 tools

Same request, same result, in every tool. Nothing is deployed until you say so.

How it works

Real components, not a guess at them

It builds from the real Avonni catalog

Before it writes anything, your assistant checks which Avonni components exist and how they are configured. No made-up settings, no components that only look right.

Interactions and branding included

Open a flow, navigate to a record, show a toast: the same interactions you pick in the builder are available to your AI, and so are your colors and styles.

You can open and tweak what it builds

What your AI produces is a normal Avonni component. Open it in the Component Builder, adjust the columns or the colors, and save. No developer needed.

An AI assistant listing the available Avonni components, one catalog per Salesforce surface
Claude desktop app setting three Avonni interactions on a Cases board, Update Record, Refresh Query and Show Toast, with the brand color palette
The Avonni Component Builder showing the Related Opportunities component
Four surfaces

Every place you build, covered

Lightning Record Page enhanced with Avonni Dynamic Components
Lightning pages

85+ Dynamic Components for record pages and app pages: data tables, Kanban boards, maps, charts, calendars.

Learn more →
Salesforce screen flow showing an Avonni data table
Screen flows

70+ Flow Screen Components: date pickers, data tables, maps and signatures inside your guided processes.

Learn more →
Experience Cloud site page built with Avonni components
Experience sites

40+ Experience Cloud Components for portals and customer sites, in your site's theme.

Learn more →
A Kanban written from scratch, five files, next to the same Kanban with Avonni, one file of 38 lines
Your developers' code

55+ LWC Components for the code your team writes. One line for a whole Kanban, not a thousand.

Learn more →

A use case that spans several surfaces? The architect skill plans the pieces and builds them in order.

Compatibility

Works in the AI tools your team already uses

Pick your assistant. They all build the same thing, with the same Avonni components.

Claude desktop app

Paste the setup in the chat and Claude does the rest. You never open a terminal.

Best for non-developers

Claude Code

The same skills and server, for developers who live in the terminal.

Cursor

Skills install with one command. The server is one entry in your editor settings.

GitHub Copilot and VS Code

Same setup as Cursor, in the editor your developers already have open.

Agentforce Vibes

Connect the server and Vibes builds Salesforce UI against the real Avonni docs.

Gemini CLI

Works too. It is the path we have tested least.

Any other tool that speaks MCP can connect to the server as well.

a·von·ni (noun): the vocabulary your AI builds UI with.
Get started

Set up once, in about 10 minutes

01

Pick your assistant

Claude desktop app if you are not a developer. Cursor, VS Code or Copilot if you already use them.

02

Connect Avonni

One setup command installs the five skills and connects the hosted server. In Claude, paste it in the chat and Claude runs it for you.

03

Describe what you want

Review the result, then deploy it your usual way. Nothing reaches your org without you.

“Add an Avonni Kanban of Cases grouped by status to my customer portal page.”

You need Node.js and the Salesforce CLI connected to your org. The guide walks you through both. Full setup guide →

Ready to build with your AI?

Start free.

Install Avonni from AppExchange and describe your first component today.

Start free

See it live.

Tell us what you are building and we will show you the AI setup on a real org.

Request a Demo

Read the guide.

Setup details, example prompts and limitations, written for each surface.

Open the guide

Questions, answered

Do I need to be a developer?
+
What exactly do I install?
+
Which AI tools work?
+
Does it change my org without me?
+
Why not let the AI build everything from scratch?
+
For developers: what is under the hood?
+