AIを使ってMakeswiftのサイトページ構成を自動で把握する方法

Makeswift MCPを使用することで、AIがすべてのページ、メタデータ、および登録されているReactコンポーネントをすべて取得します。プロジェクトのアーキテクチャを構造化されたマップとして即座に把握できます。

1. 01

   サイトのマップ作成

   エージェントはまずプロジェクト全体をスキャンして、何が存在するかを確認します。これにより、利用可能なすべてのURLのベースラインを構築します。

   list_pages
2. 02

   特定ページの調査

   リストを取得した後、エージェントは個々のページを詳しく調査してメタデータを取得します。これにより、監査に必要な詳細情報が得られます。

   get_page
3. 03

   コンポーネントのカタログ化

   エージェントはReactコンポーネントのライブラリを確認します。これにより、どのカスタム要素がすぐに使用できるかがわかります。

   list_components
4. 04

   調査結果の要約

   エージェントはページリスト、メタデータ、コンポーネント一覧を一つのレポートにまとめます。その後、不足している要素について質問できます。

   list_pagesget_pagelist_components

Makeswift Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_gCRWdgFcRDDIyuI0UxSfv5t997CkYnetwkrUotHK/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — Makeswift capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "makeswift-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_gCRWdgFcRDDIyuI0UxSfv5t997CkYnetwkrUotHK/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

リンク先からアカウントを連携してください。認証情報は暗号化されて保持され、すぐにプロジェクトのデータについてAIと対話できるようになります。

• 01

  AIはページを編集できますか？

  いいえ。AIができるのはページデータとコンポーネントリストの読み取りのみです。視覚的な変更はすべて、Makeswiftエディタでご自身で行う必要があります。

• 02

  AIはコンポーネントを削除できますか？

  いいえ。提供されているツールは、AIが情報をリスト化したり取得したりすることのみを許可しています。プロジェクトを削除したり変更したりする権限はありません。

• 03

  AIはプライベートなアセットまで見えますか？

  AIが見ることができるのは、ページのメタデータやコンポーネント名など、Makeswiftのツールを通じて公開されているデータのみです。

• 04

  AIはどのようにして存在するページを把握するのですか？

  list_pagesツールを使用して、プロジェクトの完全なディレクトリを取得します。

• 05

  特定のコンポーネントのプロパティについて質問できますか？

  はい。AIがlist_componentsを使用して利用可能な要素を確認した後、特定の要素の詳細を説明させたり、探し出させたりすることが可能です。

• Makeswiftについて他に質問がありますか？ Makeswift Connectorの全機能を見る