> 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/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](/dynamic-components/resources/contact-support.md): your feedback directly shapes what we improve next. {% endhint %} Describe what you want in plain language, and your AI coding assistant (Claude Code, Cursor, or GitHub Copilot) writes working `avonni-*` markup and code directly in your Lightning Web Components. Two tools make that possible:
🧠 Avonni MCP serverA hosted documentation service that gives the assistant accurate, always up-to-date knowledge of every avonni-* component: attributes, events, slots, styling hooks, type definitions, and utility functions.
🛠️ Avonni SkillsA step-by-step workflow that teaches the assistant how to add and configure avonni-* components in your component's HTML, JavaScript, and CSS.
{% 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 attribute names, guess at event payloads, and produce markup that fails at runtime. 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 documentation for every `avonni-*` component, plus type definitions and utility function documentation, available only for this library. | No more invented attributes or event names. The assistant looks up the real API instead of guessing. | | **Avonni Skills** | *Process.* The `avonni-lwc-components` workflow for editing your component's HTML, JavaScript, and CSS, with resolution rules for attributes, events, types, slots, and styling hooks. | The assistant writes markup and handlers that match the real component API, in the right files. | *** ## Lightweight code, zero maintenance debt Ask an assistant for a data table built from scratch and it will happily generate hundreds or thousands of lines of custom JavaScript. Impressive on day one. Then every one of those lines is yours to debug, re-test at each Salesforce release, and explain to the next person. **Maintaining a codebase the AI wrote six months ago is nobody's favorite project.** Building on this library changes what the assistant writes: | | 🤖 AI from scratch | ✨ AI + Avonni LWC | | -------------------------------------------- | ------------------------------------------------- | --------------------------------------------- | | A data table with sorting and inline editing | Hundreds to thousands of lines of custom code | About 30 lines of markup and configuration | | Where the complexity lives | In your codebase | In the managed package | | Who maintains it | You | Avonni, with every release | | When Salesforce updates | Re-test and patch your custom code | Update the package; your markup keeps working | | Evolving it later | The assistant digs through its own generated code | Change a few attributes, or ask for them | The complex machinery (rendering, sorting, drag and drop, accessibility, edge cases) lives inside the packaged `avonni-*` components: tested, versioned, and updated by Avonni. What lands in your component stays small enough to read in one sitting, which also makes it easy for the assistant to update reliably later. {% hint style="info" %} The skill edits your component's files directly (HTML template, JavaScript, CSS) and deploys nothing: you review the changes and ship them with your usual process. {% endhint %} *** ## Knowledge the other packages don't get The `lwc` toolset of the MCP server exposes two capabilities reserved for this library: **type definitions** (ask for the exact shape of a complex attribute, like the Data Table's columns) and **utility function documentation** (the public helper functions that ship with the package). Your assistant uses both to generate code that compiles and runs. Set it up in minutes *** ## 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/lwc-components/build-with-ai/overview.md?ask=&goal= ``` `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.