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ドキュメントへリアルタイムにアクセスできます。これにより古い推奨事項を避け、現行のベストプラクティスに沿った理解を促せます。

静的データで学習された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利用について詳しく見る

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利用について詳しく見る

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機能を強化できます。MCPなどのAI機能にはRaycast Proが必要です。Astro Docs MCPサーバーを追加すると、質問応答時に最新ドキュメントへアクセスできます。

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

Raycastに追加

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

使い方

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

トラブルシューティング

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

ツールが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や、かつて実験的で現在は変更された機能など）は、最新ドキュメントを必ず確認してください。
プロジェクトルールを活用する: ツールが対応していれば、本ガイドのようなルールをプロジェクト規約として設定し、ベストプラクティスやコーディング規約を自動で徹底します。

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