AIツールでAstroサイトを構築する

AI対応エディターやエージェント型コーディングツールは、一般にAstroのコアAPIや概念をよく理解しています。ただし、一部のツールは古いAPIを使ったり、最新機能やフレームワークの最近の変更を把握していない場合があります。

このガイドでは、AIツールに最新のAstro知識を提供する方法と、AIの支援でAstroサイトを構築する際のベストプラクティスを解説します。

コンテキストファイル

Astroはllms.txtとllms-full.txtを提供しています。これは、AIでの利用に最適化した形式でドキュメント全文を収録した静的ファイルで、簡素化されたMarkdownとして提供されます。https://docs.astro.buildをドキュメントソースとして指定すると、これらのファイルを自動検出できるAIツールもあります。

これらのファイルは最小限かつ解析しやすい一方で、コンテキストに直接読み込むとトークン消費が大きく、最新状態の維持には定期的な更新が必要です。他の手段で最新ドキュメントにアクセスできないときのフォールバックとして適しています。MCPサーバーはリアルタイム検索で全文に効率よくアクセスできるため、利用可能な場合はそちらを優先してください。

Astro Docs MCPサーバー

Astro Docs MCP（Model Context Protocol）サーバーを使うと、AIツールが常に最新のAstroドキュメントへリアルタイムにアクセスできます。これにより古い推奨事項を避け、現行のベストプラクティスに沿った理解を促せます。

:::tip[MCPとは]Model Context Protocolは、AIツールが外部ツールやデータソースにアクセスするための標準化プロトコルです。:::

静的データで学習されたAIモデルと異なり、MCPサーバーは最新のAstroドキュメントへのアクセスを提供します。サーバーは無料・オープンソースで、リモート実行されるためローカルインストールは不要です。

Astro Docs MCPサーバーはkapa.aiのAPIを使って、Astroドキュメントの最新インデックスを維持しています。

サーバー情報

Name: Astro Docs
URL: https://mcp.docs.astro.build/mcp
Transport: Streamable HTTP

インストール

設定手順はAI開発ツールによって異なります。ツールによっては、MCPサーバーをコネクタ、アダプター、拡張機能、プラグインなどと呼ぶ場合があります。

手動設定

多くのツールはMCPサーバー向けの共通JSON設定形式に対応しています。選んだツールに特定の手順がない場合でも、次の設定をMCP設定に追加することでAstro Docs MCPサーバーを登録できる場合があります。

Streamable HTTP
ローカルプロキシ

 {
   "mcpServers": {
     "Astro docs": {
       "type": "http",
       "url": "https://mcp.docs.astro.build/mcp"
     }
   }
 }

 {
   "mcpServers": {
     "Astro docs": {
       "type": "stdio",
       "command": "npx",
       "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
     }
   }
 }

Claude Code CLI

Claude Codeはコマンドラインで動作するエージェント型コーディングツールです。Astro Docs MCPサーバーを有効化すると、コード生成時に最新ドキュメントへアクセスできます。

インストール（有効化）は次のコマンドで行います。

claude mcp add --transport http astro-docs https://mcp.docs.astro.build/mcp

Claude CodeでのMCPサーバー利用について詳しく見る

Claude Code GitHub Action

Claude CodeはGitHub Actionも提供しており、GitHubイベントに応じてコマンドを実行できます。Astro Docs MCPサーバーを有効化すると、コメントへの回答やAstroコード生成時に最新ドキュメントへアクセスできます。

ワークフローでAstro Docs MCPサーバーを利用するには、次の設定を追加します。

# ...ワークフロー設定の残りの部分
- uses: anthropics/claude-code-action@beta
  with:
    anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
    mcp_config: |
      {
        "mcpServers": {
          "astro-docs": {
            "type": "http",
            "url": "https://mcp.docs.astro.build/mcp"
          }
        }
      }
    allowed_tools: "mcp__astro-docs__search_astro_docs"

Claude Code GitHub ActionでのMCP利用について詳しく見る

Codex CLI

Codex CLIはAstroのコード生成の間にAstro Docs MCPサーバーからドキュメントにアクセスできるコマンドラインを用いたAIコーディングツールです。

MCPサーバーは、グローバルレベルでは~/.codex/config.tomlファイルで、またはプロジェクトルート内での.codex/config.tomlファイルで設定できます。

[mcp_servers.astro-docs]
command = "npx"
args = ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]

Codex CLIでのMCP利用について詳しく見る

Cursor

CursorはAIコードエディターです。Astro Docs MCPサーバーを追加すると、開発タスクで最新ドキュメントにアクセスできます。

以下のボタンからインストールします。

Cursorに追加

CursorでのMCPサーバー利用について詳しく見る

Visual Studio Code

Visual Studio CodeはCopilot Chat使用時にMCPサーバーをサポートします。Astro Docs MCPサーバーを追加すると、質問応答やコーディングタスクで最新ドキュメントにアクセスできます。

以下のボタンからインストールします。

VS Codeに追加

VS CodeでのMCPサーバー利用について詳しく見る

Warp

Warp（旧称Warp Terminal）は、複数のAIエージェントでのコーディングに特化したエージェント開発環境です。Astro Docs MCPサーバーを追加すると、回答やタスク実行時に最新ドキュメントへアクセスできます。

Warpの設定でAI > MCP Servers > Manage MCP Serversを開く。
「Add」をクリック。

次の設定を入力します。start_on_launchで起動時に有効化することも可能です。

{
  "mcpServers": {
    "Astro docs": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"],
      "env": {},
      "working_directory": null,
      "start_on_launch": true
    }
  }
}

「Save」をクリック。

WarpでのMCPサーバー利用について詳しく見る

Claude.ai / Claude Desktop

Claude.aiは汎用AIアシスタントです。Astro Docs MCPサーバーを追加すると、Astroの質問回答やコード生成で最新ドキュメントにアクセスできます。

Claude.aiのコネクタ設定を開く。
「Add custom connector」をクリック（見つからない場合は下へスクロール）。
サーバーURLとしてhttps://mcp.docs.astro.build/mcpを入力。
名前を「Astro docs」に設定。

Claude.aiでのMCP利用について詳しく見る

Windsurf

Windsurfはエディター用プラグインやスタンドアロンエディターとして使えるAIコーディングツールです。Astro Docs MCPサーバーを使って、タスク実行時にドキュメント参照ができます。

WindsurfはStreamable HTTPをサポートしていないため、ローカルプロキシ設定が必要です。

~/.codeium/windsurf/mcp_config.jsonを開く。

次の設定をWindsurfのMCP設定に追加します。

{
  "mcpServers": {
    "Astro docs": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
    }
  }
}

設定を保存してWindsurfを再起動。

WindsurfでのMCP利用について詳しく見る

Gemini CLI

Gemini CLIはコマンドラインのAIコーディングツールで、Astro Docs MCPサーバーを使いながらドキュメント参照とコード生成ができます。

MCPサーバーはグローバル設定~/.gemini/settings.jsonまたはプロジェクトルートの.gemini/settings.jsonで構成できます。

{
  "mcpServers": {
    "Astro docs": {
      "httpUrl": "https://mcp.docs.astro.build/mcp"
    }
  }
}

Gemini CLIでのMCP利用について詳しく見る

Google Antigravity

Google Antigravity はエージェント型開発プラットフォームです。

Connecting Custom MCP Servers guideに従い、~/.gemini/antigravity/mcp_config.jsonを開きます。

mcp_config.jsonに以下の設定を追加します:

{
  "mcpServers": {
    "astro-docs": {
      "serverUrl": "https://mcp.docs.astro.build/mcp"
    }
  }
}

ファイルを保存し、"Manage MCPs"タブで"Refresh"をクリックします。

Zed

ZedはAI機能使用時にMCPサーバーをサポートします。Astro Docs MCPサーバーを使って、タスク実行時にドキュメントへアクセスできます。

ZedはStreaming HTTPをサポートしていないため、ローカルプロキシ設定が必要です。

~/.config/zed/settings.jsonを開く。

次の設定をZedのMCP設定に追加します。

{
  "context_servers": {
    "Astro docs": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
    }
  }
}

設定を保存。

ZedでのMCP利用について詳しく見る

ChatGPT

具体的な手順はOpenAIのMCPドキュメントを参照してください。

Raycast

RaycastはMCPサーバーに接続してAI機能を強化できます。Astro Docs MCPサーバーを追加すると、質問応答時に最新ドキュメントへアクセスできます。

以下のボタンからインストールします。

Raycastに追加

RaycastでのMCP利用について詳しく見る

Opencode AI

Opencode AIは、オープンソースのターミナルベースAIコーディングツールです。Astro Docs MCPサーバーを利用してドキュメントを参照しながらAstroコードを生成できます。

MCPサーバーは、プロジェクトルートまたはグローバル設定ディレクトリ（例: ~/.config/opencode/opencode.json）にある、通常opencode.jsonという名前のOpencode設定ファイルで設定できます。

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "Astro docs": {
      "type": "remote",
      "url": "https://mcp.docs.astro.build/mcp",
      "enabled": true
    }
  }
}

Opencode AIでの利用について詳しく見る

GitHub Copilot Coding Agent

GitHub Copilot Coding Agentは、GitHub上で動作するCoding Agentとして利用できます。Astro Docs MCPサーバーを有効にすることで、回答の生成やコーディングタスクの実行時に最新のAstroドキュメントに参照できるようになります。

Astro Docs MCPサーバーでドキュメントに参照できるようにするには、リポジトリのCopilot Coding Agent設定（https://github.com/<your-org>/<your-repo>/settings/copilot/coding_agent）に以下を追加します:

{
  "mcpServers": {
    "astro-docs": {
      "type": "http",
      "url": "https://mcp.docs.astro.build/mcp",
      "tools": ["mcp__astro-docs__search_astro_docs"]
    }
  }
}

詳しい情報はMCPサーバーでGitHub Copilot Coding Agentを拡張するを参照してください。

使い方

設定後は、AIツールにAstroについて質問するだけで、最新ドキュメントから情報を取得できます。コーディングエージェントはタスク実行時にドキュメントを参照でき、チャットボットはAstroの機能・API・ベストプラクティスについて正確に回答できます。

:::note[注意]Astro Docs MCPサーバーは最新ドキュメントへのアクセスを提供しますが、解釈やコード生成はAIツールの責任です。AIは誤ることがあるため、生成コードは必ずレビューし、十分にテストしてください。:::

トラブルシューティング

問題が発生した場合は次を確認してください。

ツールがStreamable HTTPトランスポートをサポートしているか。
サーバーURLが正しいか: https://mcp.docs.astro.build/mcp。
ツールが適切にインターネットへアクセスできるか。
利用ツールのMCP連携ドキュメントを参照しているか。

それでも解決しない場合は、Astro Docs MCP ServerリポジトリでIssueを作成してください。

DiscordのAIサポート

AstroのMCPサーバーを支える同じ技術は、Astro Discordのチャットボットとしても利用できます。#support-aiチャンネルでAstroやプロジェクトコードについて自然言語で質問できます。会話は自動でスレッド化され、フォローアップの質問は無制限です。

チャットボットとの会話は公開で、他チャンネルと同様の言語・行動ルールが適用されます。 ただし、ボランティアのサポートメンバーが常時対応する場ではありません。コミュニティからの支援が必要な場合は、通常の#supportチャンネルでスレッドを作成してください。

AIでAstro開発を進めるヒント

テンプレートから始める: ゼロからではなく、既存のAstroテンプレートを使うか、npm create astro@latestのテンプレートオプションで開始します。
インテグレーションにはastro addを使う: 公式インテグレーション（例:astro add tailwind,astro add react）はastro addを使います。その他のパッケージはpackage.jsonを直接編集せず、好みのパッケージマネージャーのコマンドでインストールします。
現行APIを確認する: AIツールは古いパターンを提示することがあります。特にsessionsやactionsのような新機能、初期公開後に大きく変わった機能（content collectionsや、かつて実験的で現在は変更された機能など）は、最新ドキュメントを必ず確認してください。
プロジェクトルールを活用する: ツールが対応していれば、本ガイドのようなルールをプロジェクト規約として設定し、ベストプラクティスやコーディング規約を自動で徹底します。

貢献するコミュニティスポンサー