Build with AI

Build Avonni components by describing what you want in plain language: one MCP server, one skill set, four Salesforce surfaces.

🚧 Early access. Build with AI is rolling out gradually and improving with every release. Something unclear, missing, or broken? Tell us: your feedback directly shapes what we improve next.

You can now build with Avonni by describing what you want in plain language. An AI assistant such as Claude, Cursor, or GitHub Copilot creates real, working Avonni components: on Lightning pages, in screen flows, on Experience Sites, and in your own LWC code.

How it works

Avonni ships two things that turn a general-purpose AI assistant into an Avonni specialist:

🧠 Avonni MCP server	A hosted documentation service at https://mcp.avonnicomponents.com. It gives the assistant accurate, always up-to-date knowledge of every component: properties, interactions, and styling hooks, refreshed with each release. Nothing to install or run.
🛠️ Avonni Skills	Step-by-step workflows from the public avonni/skills repository. They teach the assistant how to create and update each kind of Avonni artifact, and how to verify every detail against the MCP server before writing it.

The skills tell the assistant what to do; the MCP server tells it what's true. Using one without the other gives worse results. Install both.

Your sentence goes in, a real Avonni component comes out. The Skills supply the method and the MCP server supplies the facts, which is why both are installed.

What building looks like

You describe the outcome; the assistant looks up the real components and builds. A few examples, one per surface:

"Create an Avonni Dynamic Component for the Account record page: a Data Table of the account's open Cases with inline editing." — Lightning pages

"Create a screen flow where the user picks an appointment date on an Avonni Date Picker, then confirms on a summary screen." — Screen flows

"Add an Avonni Kanban of Cases grouped by status to my customer portal page." — Experience Sites

"Add an Avonni Data Table of Cases to my component, with sorting and inline editing." — Your own LWC code

What a prompt of this kind produces: a Data Table of an account's related records, running on the Account record page, with sortable columns, stage badges and formatted currency.

For complete use cases that span several artifacts (a page component plus the flow it launches, for example), the avonni-architect skill plans the pieces and builds them in the right order.

Get set up in about 10 minutes

Five steps, one time. After that, you just describe what you want.

First, pick your assistant. All of them build the same thing with the same Avonni components. What changes is how much plumbing you touch:

💬 Claude desktop app (included with Claude Pro)	Best for non-developers	A normal desktop app. Paste any setup command into the chat and Claude runs it for you: you never open a terminal yourself.
⌨️ Cursor, VS Code, GitHub Copilot	Best if you already use them	Skills install with one command, and the MCP server goes in as a small JSON entry in your editor config.
⚡ Gemini CLI	Works, least tested	A chat that runs in a terminal window. Daily use is plain language like the others, but setup and troubleshooting are manual. Follow the Gemini CLI tab in each step below.

Not a developer? Step 1 is for everyone: without Node.js and a connected Salesforce CLI, no assistant can build, save, or deploy anything. The good news is that both install like any desktop app (download, run the installer, done). After that you never need a terminal: paste any command on this page, including sf org login web, into the Claude desktop app's chat, and Claude runs it for you. You just approve.

1

Get the foundation ready

Two installs power everything. Without them, the assistant can read documentation but cannot build or save anything.

1. Install Node.js (version 18 or later). Download, run the installer, accept the defaults.
2. Install the Salesforce CLI, then connect it to your Salesforce org:

sf org login web

This opens a browser window where you log in to Salesforce as usual. That's it: the CLI now acts on your behalf.

2

Open a project folder

The assistant works inside a folder on your computer, where it saves the files it creates. Any folder works: create an empty one ("Avonni AI" on your Desktop is fine) and open it in your tool.

• Claude desktop app or Claude Code: open the folder as your project.
• Cursor, VS Code: File, then Open Folder.
• Gemini CLI: install it with npm install -g @google/gemini-cli, then run gemini from inside the folder.

3

Install the Avonni Skills

One command installs all five skills into the open project:

npx skills add avonni/skills

The installer detects your assistant (Claude Code, Cursor, Gemini CLI, and more) and puts the skills in the right place.

Claude

Run it in the terminal, or paste it into the Claude chat and ask Claude to run it for you.

Cursor, VS Code, Copilot

Run it in your editor's integrated terminal, from the project folder you opened in step 2.

Gemini CLI

Run it from your project folder. Inside a Gemini session, check the result with /skills list, and run /skills reload if you just added them.

If the skills do not appear, trust the folder first with /trust and restart the session: Gemini only loads workspace skills from trusted folders.

4

Connect the Avonni MCP server

The server is hosted by Avonni: nothing to install, you just point your assistant at it.

Claude

Run this command, or paste it into the chat the same way as step 3:

claude mcp add --transport http avonni https://mcp.avonnicomponents.com

Cursor, VS Code, Copilot

Add https://mcp.avonnicomponents.com as an MCP server in your editor's JSON config, for example .cursor/mcp.json.

Gemini CLI

Add the server to your project's .gemini/settings.json, creating the file if needed:

{
    "mcpServers": {
        "avonni": {
            "httpUrl": "https://mcp.avonnicomponents.com"
        }
    }
}

Restart Gemini, then run /mcp in the session to confirm the server is connected and its tools are listed.

Gemini's VS Code extension runs the same engine as the CLI, so these steps apply there too. It unlocks nothing extra for Avonni, so if you want Gemini, the CLI is the shorter path. This is also the path we have tested least: if anything misbehaves, we want to hear about it.

5

Test it, then build

Ask your assistant: "List the available Avonni components."

What a connected assistant answers: one catalog per Salesforce surface.

A real component list means everything is connected. Now describe your first component, like the examples above, and watch it build.

Nothing is deployed automatically. The assistant writes files locally; you review them and deploy with your usual process. Your org is never touched without you.

Why this beats AI code from scratch

An AI assistant can build almost anything. The question nobody asks in the demo is: who maintains it afterwards? Code generated from scratch means hundreds or thousands of lines that are now yours: yours to debug, yours to evolve, yours to re-test at every Salesforce release. Building with Avonni components flips that equation:

✍️ The assistant writes a thin layer	A prompt produces configuration around finished components. A full data table is about 30 lines of configuration, not a codebase.
🛡️ Avonni maintains the deep layer	The components carrying the complexity are packaged, tested, and updated with every release. When Salesforce changes, you update the package; your AI-written layer keeps working.
🧩 Everything stays consistent	Pages, flows, portals, and code share one component family, so what you build with AI matches what your team built before, and what they'll build next.

Speed on day one is what makes AI exciting. A thin, maintainable layer is what makes it sustainable. This setup gives you both.

Go deeper by product

Each documentation hub has a complete Build with AI section: setup details, prompt libraries, and limitations, written for that surface.

⚡ Dynamic Components

Build components for Lightning pages from prompts.

🔀 Flow Screen Components

Build screen flows around Avonni components from prompts.

🖥️ Experience Sites Components

Add and configure Avonni components on portal pages from prompts.

🧩 LWC Components

Write avonni-* markup and code in your own LWCs from prompts.

For AI agents

This documentation is itself machine-readable: append .md to any page URL for clean Markdown, read the full index at llms.txt (or the whole corpus at llms-full.txt), and ask any page a question with GET <page>.md?ask=<question>. The structured component catalog lives on the MCP server at https://mcp.avonnicomponents.com.