Under the Snow
AI3 min

Astro MCP（Model Context Protocol）によるAI開発環境の構築

contents9
  1. 01はじめに
  2. 02Astro MCPサーバーの概要
  3. 03CodexでのAstro MCP接続設定
  4. 04Claude CodeでのAstro MCP接続設定
  5. 05実用的な活用方法
  6. 06トラブルシューティング
  7. 07セキュリティ考慮事項
  8. 08まとめ
  9. 09参考文献

Astro MCP Setup - AI Development Environment

はじめに

Astro公式が提供するModel Context Protocol（MCP）サーバーを使うと、AI開発ツールからAstroプロジェクトの最新ドキュメントを参照しやすくなります。この記事では、CodexとClaude CodeでAstro MCPサーバーに接続する方法を整理します。

Astro MCPサーバーの概要

Astro MCPサーバー（https://mcp.docs.astro.build/mcp）は、kapa.aiのAPIを活用してAstroドキュメントのインデックスを維持する無料のオープンソースサービスです。このサーバーを導入すると、AIツールが古い情報に基づいた推奨事項を提示するリスクを減らせます。

主要機能

  • リアルタイムでのAstro公式ドキュメントへのアクセス
  • 複数のAI開発ツール・エディターとの互換性
  • HTTPおよびローカルプロキシによる多様な統合方法
  • 最新のAstro APIと機能に関する正確な情報提供

CodexでのAstro MCP接続設定

CodexエディターでAstro MCPサーバーに接続するための設定手順を説明します。

1. MCP設定ファイルの作成

Codexプロジェクトのルートディレクトリに.codex/mcp-config.jsonファイルを作成します：

{
  "mcpServers": {
    "astro-docs": {
      "command": "npx",
      "args": ["@astrojs/mcp-server"],
      "env": {
        "ASTRO_MCP_SERVER_URL": "https://mcp.docs.astro.build/mcp"
      }
    }
  }
}

2. 依存関係のインストール

Astro MCP クライアントパッケージをプロジェクトにインストールします：

npm install @astrojs/mcp-server

3. Codex設定の更新

Codex設定ファイル（.codex/settings.json）にMCP設定を追加します：

{
  "mcp": {
    "enabled": true,
    "configPath": ".codex/mcp-config.json",
    "autoConnect": true
  },
  "ai": {
    "contextSources": ["mcp:astro-docs"],
    "preferLatestDocs": true
  }
}

Claude CodeでのAstro MCP接続設定

Claude Code CLIでAstro MCPサーバーを利用する設定方法を解説します。

1. Claude Code設定ディレクトリの準備

Claude Codeの設定ディレクトリを作成し、MCP設定ファイルを配置します：

mkdir -p ~/.config/claude-code

2. MCP設定ファイルの作成

~/.config/claude-code/claude_desktop_config.jsonにMCP設定を記述します：

{
  "mcpServers": {
    "astro": {
      "command": "node",
      "args": ["-e", "
        const http = require('http');
        const url = require('url');
        
        const server = http.createServer((req, res) => {
          const parsed = url.parse(req.url, true);
          
          if (parsed.pathname === '/mcp') {
            const proxyReq = http.request({
              hostname: 'mcp.docs.astro.build',
              path: '/mcp',
              method: req.method,
              headers: req.headers
            }, (proxyRes) => {
              res.writeHead(proxyRes.statusCode, proxyRes.headers);
              proxyRes.pipe(res);
            });
            
            req.pipe(proxyReq);
          } else {
            res.writeHead(404);
            res.end();
          }
        });
        
        server.listen(3001, () => {
          console.log('Astro MCP proxy running on port 3001');
        });
      "],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

3. 環境変数の設定

Claude Codeセッション用の環境変数を設定します：

export CLAUDE_MCP_CONFIG_PATH="~/.config/claude-code/claude_desktop_config.json"
export CLAUDE_MCP_ENABLED="true"

4. 接続の確認

Claude Codeセッション内でMCP接続を確認します：

claude mcp list

正常に設定されている場合、以下のような出力が表示されます：

astro - node [...] (configured)

詳細な情報を確認する場合は：

claude mcp get astro

実用的な活用方法

Astro プロジェクト初期化時の活用

新しいAstroプロジェクトを作成する際、MCPサーバーを通じて最新のテンプレートと推奨設定を取得できます：

# Claude CodeでAstro MCPを利用したプロジェクト作成
claude-code create astro-project --template modern --with-mcp

コンポーネント開発での活用

Astroコンポーネントを開発する際、MCPサーバーが提供する最新のAPI情報を参照できます。なるほど、これにより古いドキュメントに基づいた実装を避けることが可能になります。

---
// MCP経由で最新のAstro.propsの使用方法を確認
interface Props {
  title: string;
  description?: string;
}

const { title, description = '' } = Astro.props;
---

<div class="component">
  <h2>{title}</h2>
  {description && <p>{description}</p>}
</div>

トラブルシューティング

接続エラーの対処

MCP接続でエラーが発生した場合の診断手順：

  1. ネットワーク接続の確認

    curl -I https://mcp.docs.astro.build/mcp

  2. 設定ファイルの構文確認

    node -e "console.log(JSON.parse(require('fs').readFileSync('.codex/mcp-config.json', 'utf8')))"

  3. ポート競合の確認

    netstat -an | grep 3001

パフォーマンス最適化

MCPサーバーの応答速度を向上させるための設定：

{
  "mcp": {
    "caching": {
      "enabled": true,
      "ttl": 300000,
      "maxEntries": 1000
    },
    "requestTimeout": 10000,
    "retryAttempts": 3
  }
}

セキュリティ考慮事項

APIキーの管理

MCPサーバーへの接続に認証が必要な場合、環境変数での管理を推奨します：

# .env.local
ASTRO_MCP_API_KEY=your_api_key_here
ASTRO_MCP_ENDPOINT=https://mcp.docs.astro.build/mcp

ネットワーク制限の設定

企業環境では、MCPサーバーへのアクセスを制限する場合があります：

{
  "mcp": {
    "allowedHosts": [
      "mcp.docs.astro.build",
      "*.astro.build"
    ],
    "useProxy": true,
    "proxyUrl": "http://corporate-proxy:8080"
  }
}

まとめ

Astro MCPサーバーを導入すると、AI開発ツールからAstroのドキュメントを参照しやすくなります。古い情報に基づく提案を減らし、コード生成や相談の精度を上げる助けになります。

CodexとClaude CodeでのMCP接続設定は、一度構築すれば継続的に最新情報を参照しやすくなる環境改善です。Astroエコシステムの変化に合わせて、AI支援開発環境も少しずつ整ってきています。

参考文献

#Astro#MCP#Codex#Claude#開発環境
shareTwitterFacebook