はじめに
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ベストプラクティスにアクセスできます。
主要機能
- リアルタイムでの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-server3. 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-code2. 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接続でエラーが発生した場合の診断手順：
-
ネットワーク接続の確認
curl -I https://mcp.docs.astro.build/mcp -
設定ファイルの構文確認
node -e "console.log(JSON.parse(require('fs').readFileSync('.codex/mcp-config.json', 'utf8')))" -
ポート競合の確認
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支援開発環境も着実に成長していることがわかります。