> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/build-with-ai.md).

# Build with AI

{% hint style="warning" %}
🚧 **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.
{% endhint %}

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.

This page is the short version of how it works, what you need, and where to go next.

## How it works

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

<table><thead><tr><th width="215"></th><th></th></tr></thead><tbody><tr><td>🧠 <strong>Avonni MCP server</strong></td><td>A hosted documentation service at <code>https://mcp.avonnicomponents.com</code>. 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.</td></tr><tr><td>🛠️ <strong>Avonni Skills</strong></td><td>Step-by-step workflows from the public <a href="https://github.com/avonni/skills">avonni/skills</a> 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.</td></tr></tbody></table>

{% hint style="success" %}
**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.
{% endhint %}

## 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**

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.

## 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:

<table><thead><tr><th width="260"></th><th></th></tr></thead><tbody><tr><td>✍️ <strong>The assistant writes a thin layer</strong></td><td>A prompt produces configuration around finished components. A full data table is about 30 lines of configuration, not a codebase.</td></tr><tr><td>🛡️ <strong>Avonni maintains the deep layer</strong></td><td>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.</td></tr><tr><td>🧩 <strong>Everything stays consistent</strong></td><td>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.</td></tr></tbody></table>

{% hint style="success" %}
**Speed on day one is what makes AI exciting. A thin, maintainable layer is what makes it sustainable. This setup gives you both.**
{% endhint %}

## Which assistant should you use?

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

<table><thead><tr><th width="230"></th><th width="180"></th><th></th></tr></thead><tbody><tr><td>💬 <strong>Claude desktop app</strong><br>(included with Claude Pro)</td><td>Best for non-developers</td><td>A normal desktop app. Paste any setup command into the chat and Claude runs it for you: you never open a terminal yourself.</td></tr><tr><td>⌨️ <strong>Cursor, VS Code, GitHub Copilot</strong></td><td>Best if you already use them</td><td>Skills install with one command, and the MCP server goes in as a small JSON entry in your editor config.</td></tr><tr><td>⚡ <strong>Gemini CLI</strong></td><td>Works, least tested</td><td>A chat that runs in a terminal window. Daily use is plain language like the others, but setup and troubleshooting are manual. See <a href="#using-gemini-instead">Using Gemini instead?</a></td></tr></tbody></table>

{% hint style="info" %}
**One thing is the same everywhere:** the Node.js and Salesforce CLI foundation in step 1 below. That is the real setup cost, not the assistant you pick.
{% endhint %}

## Get set up in about 10 minutes

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

{% hint style="info" %}
**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: 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.
{% endhint %}

{% stepper %}
{% step %}

### 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**](https://nodejs.org/en/download) (version 18 or later). Download, run the installer, accept the defaults.
2. Install the [**Salesforce CLI**](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm), then connect it to your Salesforce org:

```bash
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.
{% endstep %}

{% step %}

### 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**: open a terminal in the folder (see [Using Gemini instead?](#using-gemini-instead) below).
  {% endstep %}

{% step %}

### Install the Avonni Skills

One command installs all five skills into the open project:

```bash
npx skills add avonni/skills
```

Run it in the terminal, or paste it into the Claude chat and ask Claude to run it. The installer detects your assistant (Claude Code, Cursor, Gemini CLI, and more) and puts the skills in the right place.
{% endstep %}

{% step %}

### Connect the Avonni MCP server

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

* **Claude desktop app or Claude Code**: run this command (or paste it into the chat, same as step 3):

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

* **Cursor, VS Code, GitHub Copilot**: add `https://mcp.avonnicomponents.com` as an MCP server in your editor's JSON config (for example `.cursor/mcp.json`).
* **Gemini CLI**: see [Using Gemini instead?](#using-gemini-instead) below.
  {% endstep %}

{% step %}

### Test it, then build

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

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

{% hint style="info" %}
**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.
{% endhint %}

## Using Gemini instead?

Everything above is standards-based: the Avonni MCP server is standard MCP, and the Avonni Skills use the open Agent Skills format. **Gemini CLI**, Google's terminal assistant, supports both, so you can build with Avonni using Gemini.

{% hint style="info" %}
**What "CLI" means here:** Gemini CLI is a chat that runs inside a terminal window. Once it's set up, you talk to it in plain language exactly like any other assistant. The terminal part is the setup and the occasional fix, not your daily work.
{% endhint %}

Here is the Gemini version of steps 2 to 5 (step 1, the foundation, stays identical):

{% stepper %}
{% step %}

### Install Gemini CLI and open your project

Install the CLI (recent versions include Agent Skills support, so stay up to date), then start it from your project folder:

```bash
npm install -g @google/gemini-cli
cd your-project-folder
gemini
```

{% endstep %}

{% step %}

### Install the Avonni Skills

Same command as everyone else, from your project folder:

```bash
npx skills add avonni/skills
```

The installer detects Gemini CLI and places the skills in its skills directory. Inside a Gemini session, check with `/skills list` (run `/skills reload` if you just added them). If the skills don't appear, trust the folder first with `/trust` and restart the session: Gemini only loads workspace skills from trusted folders.
{% endstep %}

{% step %}

### Connect the Avonni MCP server

Add the server to your project's `.gemini/settings.json` (create the file if needed):

```json
{
    "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.
{% endstep %}

{% step %}

### Test it, then build

Same test as everyone else: *"List the available Avonni components."* A real component list means you're ready.
{% endstep %}
{% endstepper %}

### What about Gemini in VS Code?

Gemini's VS Code extension runs on the same Gemini engine as the CLI, so the steps above apply there too. It does not unlock anything extra for Avonni, though: you would be adding a developer editor on top of a terminal tool. If you want Gemini, the CLI is the shorter path. If you want the least setup overall, the Claude desktop app is shorter still.

{% hint style="warning" %}
**Where we stand today.** Agent Skills support in Gemini CLI is recent, and this is the path we have tested least: it should work, and if anything misbehaves we want to hear about it. For a non-developer starting from scratch, we still recommend the Claude desktop app, where the setup commands can be pasted into the chat instead of typed in a terminal.
{% endhint %}

## Go deeper by product

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

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>⚡ <strong>Dynamic Components</strong></td><td>Build components for Lightning pages from prompts.</td><td><a href="https://docs.avonnicomponents.com/dynamic-components/build-with-ai/overview">https://docs.avonnicomponents.com/dynamic-components/build-with-ai/overview</a></td></tr><tr><td>🔀 <strong>Flow Screen Components</strong></td><td>Build screen flows around Avonni components from prompts.</td><td><a href="https://docs.avonnicomponents.com/flow/build-with-ai/overview">https://docs.avonnicomponents.com/flow/build-with-ai/overview</a></td></tr><tr><td>🖥️ <strong>Experience Sites Components</strong></td><td>Add and configure Avonni components on portal pages from prompts.</td><td><a href="https://docs.avonnicomponents.com/experience-cloud/build-with-ai/overview">https://docs.avonnicomponents.com/experience-cloud/build-with-ai/overview</a></td></tr><tr><td>🧩 <strong>LWC Components</strong></td><td>Write avonni-* markup and code in your own LWCs from prompts.</td><td><a href="https://docs.avonnicomponents.com/lwc-components/build-with-ai/overview">https://docs.avonnicomponents.com/lwc-components/build-with-ai/overview</a></td></tr></tbody></table>

## 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`](https://docs.avonnicomponents.com/llms.txt) (or the whole corpus at [`llms-full.txt`](https://docs.avonnicomponents.com/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`.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/build-with-ai.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.