Setup

Install the Avonni Skills and connect the Avonni MCP server to your AI coding assistant.

🚧 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.

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 18 or later. The skills run local scripts; without Node.js they cannot run at all.
• Salesforce CLI, authenticated to your org. It powers the org-aware steps (object and field documentation lookup, component-version queries) and it is how you deploy what the assistant produces. Connect your org with:

sf org login web

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 anything usable in your org.

Choose your client

🖥️ Claude Code (desktop app or terminal)

1. Install the skills

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

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:

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

That's the whole setup.

⌨️ Cursor, VS Code, GitHub Copilot

1. Install the skills

From your project directory, run:

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:

{
    "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.

What's in the skill set

All five skills live in the public avonni/skills repository. For this library, the one that matters is:

• avonni-lwc-components, for avonni-* components in your LWC code (HTML, JavaScript, CSS)

The other four cover the rest of the Avonni line-up, useful when your project also touches them:

• avonni-flow-components, for Avonni Flow Screen Components in screen flows
• avonni-dynamic-components, for Dynamic Components on Lightning Pages
• avonni-experience-components, for Avonni components on Experience site pages
• avonni-architect, the coordinator for multi-artifact use cases across those three

Verify the setup

Ask your assistant: "List the available Avonni LWC 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 work in LWC code, append a ?toolsets= query parameter to the URL to keep the assistant's tool list minimal:

https://mcp.avonnicomponents.com?toolsets=lwc

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

If you filter the toolsets, components from the excluded packages become invisible to the assistant. See Limitations & FAQ.