MCPサーバーの統合

docStaticには、AIアシスタントがドキュメントにアクセスして内容を理解できるようにする、統合型のModel Context Protocol（MCP）サーバーが組み込まれています。これにより、コンテンツの編集、検索、分析においてインテリジェントな支援が提供されます。

概要

MCPサーバーは、TinaCMSのGraphQLエンドポイントを介してAIアシスタントをdocStaticのドキュメントに直接接続し、以下の機能を実現します。

自然言語クエリを使用したドキュメントコンテンツの検索
パスや条件に基づく特定のドキュメントの取得
MDXコンポーネントの使用パターンの分析
ドキュメントの構造およびメタデータを理解する
実際のコンテンツに基づいたコンテキストに応じた支援を提供する

前提条件

Node.js 22.0 以降（docStatic 本体が要求するバージョンと同じ）
実行中の docStatic 開発サーバー（npm run dev）
[localhost](http://localhost:4001/graphql) で利用可能な TinaCMS GraphQL エンドポイント

セットアップ

1. MCP サーバーの依存関係をインストールする

docStatic のメインディレクトリから：

npm run mcp:install

これにより、必要な MCP サーバーの依存関係が mcp-server サブディレクトリにインストールされます。

2. MCP サーバーをビルドする

npm run mcp:build

これにより、TypeScript 製の MCP サーバーコードが JavaScript にコンパイルされます。

3. docStatic 開発サーバーの起動

MCP サーバーを動作させるには、docStatic サイトが稼働している必要があります：

npm run dev

これにより、以下が起動します：

[http://localhost:3000](http://localhost:3000`) での Docusaurus
[localhost](http://localhost:3000/admin) での TinaCMS 管理画面
[localhost](http://localhost:4001/graphql) での GraphQL エンドポイント

4. MCP サーバーの実行

別のターミナルで：

npm run mcp:start

変更時に自動再起動する開発環境の場合：

npm run mcp:dev

利用可能なツール

MCPサーバーは、AIアシスタントが利用できるいくつかのツールを提供しています：

ドキュメント検索

`search_documents`: キーワード検索を使用してドキュメントを検索します
`get_document`: パス指定で特定のドキュメントを取得します
`list_all_documents`: すべてのドキュメントのメタデータを取得します

コンテンツ分析

`get_documents_by_tag`: タクソノミータグでドキュメントをフィルタリングします
`analyze_mdx_components`: ドキュメントで使用されている MDX コンポーネントを特定します
`check_server_status`: GraphQL への接続を確認します

Claude Desktop での設定

Claude DesktopでMCPサーバーを使用するには、Claude DesktopのMCP設定に以下の設定を追加してください：

{
  "mcpServers": {
    "docstatic": {
      "command": "node",
      "args": ["/absolute/path/to/docstatic/mcp-server/dist/server.js"],
      "cwd": "/absolute/path/to/docstatic"
    }
  }
}

パス要件

/absolute/path/to/docstatic を、docStatic プロジェクトディレクトリへのフルパスに置き換えてください。args のパスと cwd のパスは、どちらも絶対パスである必要があります。

開発用コマンド

コマンド説明npm run mcp:installMCPサーバーの依存関係をインストールnpm run mcp:buildTypeScriptをJavaScriptにビルドnpm run mcp:startコンパイル済みのMCPサーバーを起動npm run mcp:dev開発モードでビルドおよび起動

トラブルシューティング

よくある問題

「GraphQL サーバーが実行されていません」

メインディレクトリで npm run dev が実行されていることを確認してください
[localhost](http://localhost:4001/graphql) にアクセスできることを確認してください
TinaCMS が完全に起動していることを確認してください

「接続が拒否されました」

開発サーバーが実行されていることを確認してください
ポート 4001 が利用可能かどうかを確認してください
ファイアウォールの設定によって接続がブロックされていないことを確認してください

「ドキュメントが見つかりません」

/docs/installation.mdx ではなく、installation.mdx のような相対パスを使用してください
docs/ ディレクトリにドキュメントが存在することを確認してください
ファイルに適切な MDX フロントマターが設定されているか確認してください

接続性のテスト

GraphQL エンドポイントを直接テストします：

curl -X POST http://localhost:4001/graphql \
  -H "Content-Type: application/json" \
  -d '{"query":"{ __typename }"}'

期待される応答：

{"data":{"__typename":"Query"}}

MCP サーバーのログの確認

MCP サーバーは stderr にログを出力します。Claude Desktop を使用している場合は、Claude Desktop のログで MCP サーバーからのエラーメッセージを確認してください。

ドキュメント作成ワークフローにおけるメリット

MCP との統合により、AI アシスタントは以下のことが可能になります：

コンテンツ構造を理解する - 完全なタクソノミーとドキュメント階層にアクセス
正確な提案を行う - 実際のドキュメント作成パターンに基づいた推奨事項を提供
一貫性の確保を支援 - 類似したコンテンツやコンポーネントを使用すべき箇所を特定
編集作業の効率化 - 関連コンテンツを迅速に見つけ、改善案を提案
パターンの分析 - 頻繁に使用されるコンポーネントやコンテンツの不足箇所を特定

アーキテクチャ

docStatic Project
├── docs/               # Your MDX documentation files
├── mcp-server/         # MCP server implementation
│   ├── src/server.ts   # Main server logic
│   ├── package.json    # MCP-specific dependencies
│   └── dist/           # Compiled JavaScript
└── tina/               # TinaCMS configuration
    └── config.jsx      # GraphQL schema definition

MCPサーバーは、AIアシスタントとdocStaticコンテンツ間の橋渡し役として機能し、既存のTinaCMS GraphQL APIを通じてドキュメントへの構造化されたアクセスを提供します。

次のステップ

MCPサーバーの設定完了後：

AIアシスタントとの連携をテストする
ドキュメント検索機能を試す
コンテンツ分析ツールを使用して、ドキュメントのパターンを把握する
コンテンツの作成および編集ワークフローにおいて、AIアシスタントを活用する

MCPサーバーの実装に関する詳細については、MCPサーバーの実装詳細のページをご覧ください。

概要​

前提条件​

セットアップ​

1. MCP サーバーの依存関係をインストールする​

2. MCP サーバーをビルドする​

3. docStatic 開発サーバーの起動​

4. MCP サーバーの実行​

利用可能なツール​

ドキュメント検索​

コンテンツ分析​

Claude Desktop での設定​

開発用コマンド​

トラブルシューティング​

よくある問題​

接続性のテスト​

MCP サーバーのログの確認​

ドキュメント作成ワークフローにおけるメリット​

アーキテクチャ​

次のステップ​

概要