> 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/experience-cloud/build-with-ai/overview.md).

# Overview

{% hint style="warning" %}
🚧 **Early access.** Build with AI is rolling out gradually and improving with every release. Something unclear, missing, or broken? [Tell us](/experience-cloud/help/how-do-i-contact-support.md): your feedback directly shapes what we improve next.
{% endhint %}

Describe what you want in plain language, and your AI assistant (Claude, Cursor, or GitHub Copilot) adds real, working Avonni components to your Experience Site pages. Two tools make that possible:

<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>🧠 Avonni MCP server</strong></td><td>A hosted documentation service that gives the assistant accurate, always up-to-date knowledge of all 44 Experience Cloud Components: their properties, interactions, and styling.</td><td></td></tr><tr><td><strong>🛠️ Avonni Skills</strong></td><td>Step-by-step workflows that teach the assistant how to add Avonni components to a site page and configure them correctly.</td><td></td></tr></tbody></table>

{% hint style="success" %}
**In short: skills tell the agent what to do; the MCP tells it what's true.** Using one without the other gives worse results. Install both.
{% endhint %}

## Why you need both

AI assistants are trained on public data, so their knowledge of Avonni is incomplete and out of date. Left on their own, they invent property names, guess at interaction types, and produce page content that Experience Builder rejects. The result looks plausible but doesn't work.

The two tools solve different halves of the problem:

|                   | What it provides                                                                                                                                       | What it fixes                                                                                                        |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
| **Avonni MCP**    | *Knowledge.* Accurate component documentation, interactions, and styling for the `experience` package, plus the `dynamic`, `flow`, and `lwc` packages. | No more invented properties or interaction names. The assistant looks up the real configuration instead of guessing. |
| **Avonni Skills** | *Process.* Workflows for creating and updating each Avonni artifact type, plus `avonni-architect`, which coordinates multi-artifact use cases.         | The assistant produces valid page content and follows the correct order of operations instead of improvising.        |

## Fast today, maintainable tomorrow

An AI assistant could also build your portal features as custom code, fast. The difference shows up after the demo: **custom code is yours to maintain forever, and on a customer-facing site, that risk is public.** Avonni components avoid the trap:

<table><thead><tr><th width="280"></th><th></th></tr></thead><tbody><tr><td>✍️ <strong>Configuration, not code</strong></td><td>A prompt produces page content: which components, which data, which interactions, with your site's branding through design tokens. No custom JavaScript running in front of your customers.</td></tr><tr><td>🛡️ <strong>The complexity is Avonni's to maintain</strong></td><td>Data Table, Kanban, Calendar, and the rest live in the managed package: tested, versioned, updated with every release. Update the package, and what the AI built keeps working.</td></tr><tr><td>🧩 <strong>Your site builders stay in control</strong></td><td>What the AI builds is a normal Experience Builder page, using the same components your team already configures by hand. Anyone can open it, understand it, and evolve it.</td></tr></tbody></table>

## What the assistant produces

The `avonni-experience-components` skill works on your site page's content file. It adds the Avonni component to the page and configures its data, appearance, and interactions. Nothing is deployed: you review the file, deploy it with your usual process, then open the page in Experience Builder to check the result and publish the site.

## From a single component to a complete use case

Real requirements rarely stop at one artifact. The `avonni-architect` skill turns a business outcome into a plan, then invokes the right skills in dependency order so every piece is wired to the others correctly.

{% hint style="info" %}
**Example:** *"Add a case list to my support portal page, and a screen flow for creating a case that opens from a button."* The architect builds the flow first, then adds the components to the page with the button wired to open that flow.
{% endhint %}

<a class="button primary" data-icon="plug">Set it up in minutes</a>

## In this section


---

# 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/experience-cloud/build-with-ai/overview.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.