セットアップ

Avonni Skillsをインストールし、Avonni MCPサーバーをAIアシスタントに接続します。

🚧 早期アクセス。 Build with AI は段階的に展開され、リリースごとに改善されています。わかりにくい点、足りない点、壊れている点はありますか？ お知らせください: あなたのフィードバックが、次に改善する内容を直接形作ります。

接続するものは2つあります: Avonni Skills と Avonni MCPサーバー。まず必要条件をそろえ、その後でクライアントを選んでください。

要件

スキルはお使いのマシンにファイルを書き込み、Salesforce組織に対して動作するため、Claudeデスクトップアプリを含むすべてのクライアントには同じ基盤が必要です:

• Node.js 18以上。 スキルはローカルスクリプトを実行します。Node.js がなければ、まったく実行できません。
• Salesforce CLI、お使いの組織に認証済みであること。 これが組織対応の手順（オブジェクトとフィールドのドキュメント検索、コンポーネントバージョンの照会、サイトコンテンツの取得と保存）を支え、アシスタントが生成したものをデプロイする方法でもあります。組織を接続するには、次を実行します:

sf org login web

まずこれを行ってください。 Node.js と認証済みの Salesforce CLI がなければ、スキルも MCP サーバーも扱う対象がありません。アシスタントはドキュメントを読むことはできますが、お使いの組織で使えるものを生成したり保存したりはできません。

クライアントを選択してください

🖥️ Claude Code（デスクトップアプリまたはターミナル）

1. スキルをインストールする

プロジェクト ディレクトリから（デスクトップアプリでは、先にプロジェクトフォルダを開いてから）、次を実行します:

npx skills add avonni/skills

これにより、5つのスキルすべてがプロジェクトの設定に自動的にダウンロード・インストールされます。

2. MCPサーバーを接続する

サーバーはホスト済みです。ローカルにインストールしたり実行したりするものはありません。次を実行します:

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

設定はこれで完了です。

⌨️ Cursor、VS Code、GitHub Copilot

1. スキルをインストールする

プロジェクト ディレクトリから、次を実行します:

npx skills add avonni/skills

これにより、5つのスキルすべてがプロジェクトの設定に自動的にダウンロード・インストールされます。

2. MCPサーバーを接続する

JSON設定エントリを追加します。たとえば、 .cursor/mcp.json または .vscode/mcp.json:

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

正確なファイル名と配置場所は、お使いのアシスタントのドキュメントで確認してください。エントリの形式はどこでも同じで、名前と URL です。

スキルセットの内容

5つのスキルはすべて公開 avonni/skills リポジトリにあります:

• avonni-experience-components、Experience Siteページ上の Avonni コンポーネント用
• avonni-architect、完全なユースケースを計画して構築するコーディネーター
• avonni-flow-components、画面フロー内の Avonni Flow Screen Components 用
• avonni-dynamic-components、Lightningページ上の Dynamic Components 用
• avonni-lwc-components、LWCコード内の Avonni コンポーネント用

セットには avonni-architect を含めておいてください

ビジネス成果（「ケース一覧とケース作成用フローを備えたサポートポータルページ」など）を説明すると、アーキテクトがアーキテクチャを設計し、依存関係の順序に従って適切なスキルを実行するので、すべての要素が互いに正しく接続されます。これを行うには、ほかのスキルも一緒にインストールされている必要があります。

設定を確認する

アシスタントに次のように尋ねてください: 「利用可能な Avonni experience コンポーネントを一覧表示してください。」

MCP サーバー経由で取得した実際のコンポーネント一覧を返し、記憶に基づく一般的な回答でないなら、接続は正常です。

ツールセットを絞り込む（任意）

既定では、サーバーは4つすべての Avonni パッケージ（LWC, Dynamic, Flow, Experience）のツールを公開します。Experience Siteページだけを作成する場合は、次をURLに追加します。 ?toolsets= クエリパラメータをURLに追加して、アシスタントのツール一覧を最小限に保ちます:

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

パッケージを再度追加するには、カンマ区切りの一覧を使用します。たとえば ?toolsets=experience,flow.

ツールセットを絞り込むと、除外したパッケージのコンポーネントはアシスタントから見えなくなります。参照: 制限事項とFAQ.