> 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/flow/build-with-ai/setup.md).

# Setup

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

Two things to connect: the **Avonni Skills** and the **Avonni MCP server**. One set of requirements first, then pick your client.

## Requirements

The skills write files on your machine and work against your Salesforce org, so every client needs the same foundation, including the Claude desktop app:

* [**Node.js**](https://nodejs.org/en/download) **18 or later.** The skills run local scripts; without Node.js they cannot run at all.
* [**Salesforce CLI**](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm)**, authenticated to your org.** It powers the org-aware steps (object and field documentation lookup, component-version queries, saving a flow) and it is how you deploy what the assistant produces. Connect your org with:

```bash
sf org login web
```

{% hint style="warning" %}
**Do this first.** Without Node.js and an authenticated Salesforce CLI, the skills and the MCP server have nothing to work with: the assistant can read documentation, but it cannot generate or save anything usable in your org.
{% endhint %}

## Choose your client

{% tabs %}
{% tab title="🖥️ Claude Code (desktop app or terminal)" %}
**1. Install the skills**

From your project directory (in the desktop app, open your project folder first), run:

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

This downloads and installs all five skills into your project's configuration automatically.

**2. Connect the MCP server**

The server is hosted: there is nothing to install or run locally. Run:

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

That's the whole setup.
{% endtab %}

{% tab title="⌨️ Cursor, VS Code, GitHub Copilot" %}
**1. Install the skills**

From your project directory, run:

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

This downloads and installs all five skills into your project's configuration automatically.

**2. Connect the MCP server**

Add a JSON config entry, for example in `.cursor/mcp.json` or `.vscode/mcp.json`:

```json
{
    "mcpServers": {
        "avonni": {
            "url": "https://mcp.avonnicomponents.com"
        }
    }
}
```

Check your assistant's documentation for the exact file name and location. The shape of the entry stays the same everywhere: a name and a URL.
{% endtab %}
{% endtabs %}

## What's in the skill set

All five skills live in the public [avonni/skills](https://github.com/avonni/skills) repository:

* `avonni-flow-components`, for Avonni Flow Screen Components in screen flows
* `avonni-architect`, the coordinator that plans and builds complete use cases
* `avonni-dynamic-components`, for Dynamic Components on Lightning Pages
* `avonni-experience-components`, for Avonni components on Experience site pages
* `avonni-lwc-components`, for Avonni components in LWC code

{% hint style="success" %}

#### **Keep avonni-architect in the set**

Describe a business outcome ("a screen flow for booking appointments, launched from a button on the record page") and the architect plans the architecture, then runs the right skills in dependency order so every piece is wired to the others correctly. It needs the other skills installed alongside it to do its work.
{% endhint %}

## Verify the setup

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

If it responds with a real component list fetched through the MCP server rather than a generic answer from memory, the connection works.

## Filter the toolsets (optional)

By default the server exposes tools for all four Avonni packages (`lwc`, `dynamic`, `flow`, `experience`). If you only build screen flows, append a `?toolsets=` query parameter to the URL to keep the assistant's tool list minimal:

```
https://mcp.avonnicomponents.com?toolsets=flow
```

Add packages back with a comma-separated list, for example `?toolsets=flow,dynamic`.

{% hint style="info" %}
If you filter the toolsets, components from the excluded packages become invisible to the assistant. See [Limitations & FAQ](/flow/build-with-ai/limitations-and-faq.md).
{% endhint %}


---

# 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/flow/build-with-ai/setup.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.