> 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/lwc-components/build-with-ai/using-the-ai-assistant.md).

# Using the AI Assistant

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

You don't invoke skills or MCP tools yourself. Describe the outcome in plain language while working in your LWC, and the `avonni-lwc-components` skill activates and looks up the real component API through the MCP server.

## The right skill activates for you

| You're working on…                                                 | Skill that activates           |
| ------------------------------------------------------------------ | ------------------------------ |
| Avonni components in LWC code (HTML/JS/CSS)                        | `avonni-lwc-components`        |
| Avonni Flow Screen Components in a screen flow                     | `avonni-flow-components`       |
| An Avonni Dynamic Component                                        | `avonni-dynamic-components`    |
| Avonni components on a Digital Experience site page                | `avonni-experience-components` |
| A use case spanning flows, Dynamic Components, or Experience pages | `avonni-architect`             |

{% hint style="info" %}
**One difference from the other packages:** `avonni-lwc-components` is a direct workflow. You invoke it on your own code, and it is not coordinated by `avonni-architect`. Mention `avonni-*` components or reference one in your markup, and it activates.
{% endhint %}

## Prompt ideas

Copy any of these, adapt the objects and components to your project, and send.

{% tabs %}
{% tab title="🆕 Compose UI" %}

> Add an Avonni Data Table of Cases to my component, with sorting, inline editing, and a search bar.

> Add an Avatar Group showing the account team members to my header.

> Build the KPI row with an Avonni Metric per value, laid out with the Layout component.

**What happens:** the skill looks up each component's real attributes, events, and slots through the MCP server, then writes the `avonni-*` markup in your HTML template and the supporting code in your JavaScript.
{% endtab %}

{% tab title="⚡ Wire events" %}

> Handle the Data Table's row action event and navigate to the record.

> When the Combobox selection changes, filter the List below it.

**What happens:** the skill checks the real event names and payloads, then writes the handlers in your JavaScript.
{% endtab %}

{% tab title="🎨 Style with hooks" %}

> Restyle the Card to match our brand: rounded corners and a light gray header.

> Apply our primary color to the Badge using its styling hooks.

**What happens:** the skill fetches the component's styling hooks through the MCP server and writes them into your CSS file, instead of guessing class names.
{% endtab %}

{% tab title="🧬 Types and utilities" %}

> Show me the type definition for the Data Table columns attribute, and generate a valid columns array for Case records.

> What utility functions ship with the library, and what do they do?

**What happens:** the skill uses the `lwc` toolset's exclusive tools (type definitions and utility function documentation) to produce code that matches the exact expected shapes.
{% endtab %}
{% endtabs %}

## What to expect

A typical session runs in three steps:

{% stepper %}
{% step %}

### Lookup

The assistant queries the MCP server for the components involved, with their attributes, events, slots, styling hooks, and types.
{% endstep %}

{% step %}

### Plan

It proposes an approach and may ask clarifying questions about your data and the behavior you want.
{% endstep %}

{% step %}

### Generate

It edits your component's HTML, JavaScript, and CSS. Review the diff, then deploy with your usual process.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Nothing is deployed to your org: the skill edits local files and stops there. See Limitations & FAQ.
{% 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/lwc-components/build-with-ai/using-the-ai-assistant.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.