はじめに
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-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支援開発環境も少しずつ整ってきています。