> 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/experience-cloud-ja/aide/overview.md).

# 概要

AIアシスタントを Avonni MCP サーバーに接続し、Avonni Skills をインストールして、平易な言語のプロンプトから Experience Site ページ上の Avonni コンポーネントを作成・更新します。

{% hint style="warning" %}
🚧 **早期アクセス。** Build with AI は段階的に展開され、リリースごとに改善されています。わかりにくい点、足りない点、壊れている点はありますか？ [お知らせください](/experience-cloud/experience-cloud-ja/herupu/how-do-i-contact-support.md): あなたのフィードバックが、次に改善する内容を直接形作ります。
{% endhint %}

やりたいことを平易な言葉で伝えるだけで、AI アシスタント（Claude、Cursor、または GitHub Copilot）が、Experience Site のページに実際に動作する Avonni コンポーネントを追加します。これを可能にする 2 つのツールがあります。

<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 サーバー</strong></td><td>アシスタントに、44種類すべての Experience Cloud コンポーネントについて、プロパティ、相互作用、スタイリングまで含めた、正確で常に最新の知識を提供するホスティング済みのドキュメントサービス。</td><td></td></tr><tr><td><strong>🛠️ Avonni Skills</strong></td><td>サイトページへの Avonni コンポーネントの追加方法と、正しく設定する方法をアシスタントに教える、ステップごとのワークフロー。</td><td></td></tr></tbody></table>

{% hint style="success" %}
**要するに、skills はエージェントに何をすべきかを伝え、MCP は何が真実かを伝えます。** 片方だけを使っても結果は悪くなります。両方インストールしてください。
{% endhint %}

## なぜ両方必要なのか

AI アシスタントは公開データで学習しているため、Avonni に関する知識は不完全で古くなっています。放っておくと、プロパティ名を捏造したり、相互作用の種類を推測したり、Experience Builder が拒否するページ内容を生成したりします。見た目はそれらしくても、実際には動きません。

この 2 つのツールは問題の異なる半分を解決します。

|                   | 提供するもの                                                                                         | 解決するもの                                                 |
| ----------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| **Avonni MCP**    | *知識。* 正確なコンポーネントのドキュメント、相互作用、スタイリングを `Experience` パッケージに加え、 `Dynamic`, `Flow`、および `LWC` パッケージ。 | もうプロパティ名や相互作用名を捏造することはありません。アシスタントは推測ではなく、実際の設定を参照します。 |
| **Avonni Skills** | *プロセス。* 各 Avonni アーティファクト種別の作成・更新のためのワークフローに加え、 `avonni-architect`、複数アーティファクトのユースケースを調整する      | アシスタントは有効なページ内容を生成し、場当たり的に進めるのではなく、正しい手順に従います。         |

## 今日の高速さ、明日の保守性

AI アシスタントは、ポータル機能をカスタムコードとして高速に構築することもできます。違いはデモの後に現れます。 **カスタムコードは永続的な保守責任があり、顧客向けサイトではそのリスクは公開されます。** Avonni コンポーネントはその罠を回避します。

<table><thead><tr><th width="280"></th><th></th></tr></thead><tbody><tr><td>✍️ <strong>コードではなく設定</strong></td><td>プロンプトから、どのコンポーネントを使うか、どのデータを使うか、どの相互作用を使うかといったページ内容が生成されます。サイトのブランドはデザイン・トークンを通して反映されます。顧客の目の前で実行されるカスタム JavaScript はありません。</td></tr><tr><td>🛡️ <strong>複雑さの保守は Avonni の役割</strong></td><td>Data Table、Kanban、Calendar などはすべてマネージドパッケージ内にあり、テスト済みで、バージョン管理され、リリースごとに更新されます。パッケージを更新すれば、AI が作成したものは動き続けます。</td></tr><tr><td>🧩 <strong>サイトのビルダーは引き続き主導権を握る</strong></td><td>AI が構築するのは通常の Experience Builder ページであり、チームが手動で設定しているものと同じコンポーネントを使用します。誰でも開いて理解し、発展させることができます。</td></tr></tbody></table>

## アシスタントが生成するもの

この `avonni-experience-components` skill は、サイトページのコンテンツファイルで動作します。ページに Avonni コンポーネントを追加し、そのデータ、外観、相互作用を設定します。デプロイはまだ行われません。ファイルを確認し、通常の手順でデプロイしたあと、Experience Builder でページを開いて結果を確認し、サイトを公開します。

## 単一のコンポーネントから完全なユースケースまで

実際の要件は、1つのアーティファクトだけで終わることはめったにありません。 `avonni-architect` skill は、ビジネス成果を計画へと落とし込み、依存関係の順序に従って適切なスキルを呼び出すため、すべての要素が互いに正しく結び付けられます。

{% hint style="info" %}
**例：** *「サポートポータルのページにケース一覧を追加して、ボタンから開くケース作成用の画面フローも追加して。」* アーキテクトはまずフローを作成し、その後、ボタンでそのフローを開くように配線したコンポーネントをページに追加します。
{% endhint %}

<a class="button primary" data-icon="plug">数分でセットアップ</a>

## このセクションで


---

# 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/experience-cloud-ja/aide/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.

🧠 Avonni MCP サーバー	アシスタントに、44種類すべての Experience Cloud コンポーネントについて、プロパティ、相互作用、スタイリングまで含めた、正確で常に最新の知識を提供するホスティング済みのドキュメントサービス。
🛠️ Avonni Skills	サイトページへの Avonni コンポーネントの追加方法と、正しく設定する方法をアシスタントに教える、ステップごとのワークフロー。

✍️ コードではなく設定	プロンプトから、どのコンポーネントを使うか、どのデータを使うか、どの相互作用を使うかといったページ内容が生成されます。サイトのブランドはデザイン・トークンを通して反映されます。顧客の目の前で実行されるカスタム JavaScript はありません。
🛡️ 複雑さの保守は Avonni の役割	Data Table、Kanban、Calendar などはすべてマネージドパッケージ内にあり、テスト済みで、バージョン管理され、リリースごとに更新されます。パッケージを更新すれば、AI が作成したものは動き続けます。
🧩 サイトのビルダーは引き続き主導権を握る	AI が構築するのは通常の Experience Builder ページであり、チームが手動で設定しているものと同じコンポーネントを使用します。誰でも開いて理解し、発展させることができます。