【2025年最新】ChatGPT・Claude・GeminiのMCPツール対応状況とプラン比較

import React from 'react';

const MCPComparison = () => {
  const platformData = [
    {
      id: 'chatgpt',
      name: 'ChatGPT (OpenAI)',
      logo: 'https://cdn.openai.com/API/images/platform-opengraph.png',
      mcpConcept: '「コネクター」機能を通じてMCPに対応',
      mcpDescription: 'ChatGPTは「コネクター」機能の一部として、Model Context Protocol (MCP) に準拠したカスタムコネクターを追加できます。これにより、サードパーティのアプリや独自のデータソースと連携します。',
      tools: [
        'Custom Connectors (MCP)', 'Box', 'Canva', 'Dropbox', 'GitHub', 'Gmail', 'Google Calendar', 'Google Drive', 'HubSpot', 'Linear', 'Microsoft OneDrive', 'Microsoft Outlook', 'Microsoft SharePoint', 'Microsoft Teams', 'Notion'
      ],
      plans: [
        {
          name: 'Plus',
          price: '$20/月',
          mcpSupport: '一部利用可 (深層調査のみ)',
          note: 'カスタムコネクター(MCP)は利用不可。',
          sourceUrl: 'https://help.openai.com/en/articles/11487775-connectors-in-chatgpt'
        },
        {
          name: 'Pro',
          price: '$200/月',
          mcpSupport: '✓ フルサポート',
          note: 'カスタムコネクター(MCP)を含む全てのコネクター機能が利用可能。',
          sourceUrl: 'https://www.datastudios.org/post/chatgpt-vs-claude-vs-gemini-full-report-and-comparison-of-features-performance-integrations-pric'
        },
        {
          name: 'Team, Enterprise, Edu',
          price: '個別見積',
          mcpSupport: '✓ フルサポート',
          note: 'カスタムコネクター(MCP)を含む全てのコネクター機能が利用可能。',
          sourceUrl: 'https://help.openai.com/en/articles/11487775-connectors-in-chatgpt'
        }
      ],
      source: 'https://help.openai.com/en/articles/11487775-connectors-in-chatgpt'
    },
    {
      id: 'claude',
      name: 'Claude (Anthropic)',
      logo: 'https://cdn.sanity.io/images/4zrzovbb/website/1aef864f9b246c740fe3cef6e1068f2220995d5e-2400x1260.png',
      mcpConcept: '「Integrations」機能としてMCPをネイティブサポート',
      mcpDescription: 'MCPの開発元であるAnthropicは、Claudeに「Integrations」という形でMCPを標準搭載。Web・デスクトップアプリで多数の公式パートナーツールと連携できます。',
      tools: [
        'Asana', 'Atlassian (Jira, Confluence)', 'Canva', 'Cloudflare', 'S&P Global Market Intelligence', 'HubSpot', 'Intercom', 'Invideo AI', 'Linear', 'monday.com', 'Notion', 'PayPal', 'Plaid', 'Sentry.io', 'Square', 'Stripe', 'Workato', 'Zapier'
      ],
      plans: [
        {
          name: 'Free',
          price: '無料',
          mcpSupport: '一部利用可 (ローカルサーバー)',
          note: 'Claudeデスクトップアプリ経由でのローカルMCPサーバー接続をサポート。',
          sourceUrl: 'https://www.anthropic.com/news/model-context-protocol'
        },
        {
          name: 'Pro',
          price: '$18-20/月',
          mcpSupport: '✓ フルサポート',
          note: 'リモートMCPサーバーと連携する「Integrations」機能が利用可能。',
          sourceUrl: 'https://www.anthropic.com/news/integrations'
        },
        {
          name: 'Team, Max, Enterprise',
          price: '$25~200/月',
          mcpSupport: '✓ フルサポート',
          note: 'Proプランと同様に「Integrations」機能が利用可能。',
          sourceUrl: 'https://www.anthropic.com/news/integrations'
        }
      ],
      source: 'https://www.anthropic.com/partners/mcp'
    },
    {
      id: 'gemini',
      name: 'Gemini (Google)',
      logo: 'https://www.gstatic.com/devrel-devsite/prod/v7f9e36f6d186549b8ffe909dedf2851d752c55d39aba6c518bdd33de03ff1b45/developers/images/opengraph/google-blue.png',
      mcpConcept: '「Gemini Code Assist」内でMCPサーバーと連携',
      mcpDescription: '主に開発者向けツール「Gemini Code Assist」内で、MCPサーバーに接続し外部ツールを呼び出す形で対応。Google製のMCPサーバーも提供されています。',
      tools: [
        'GitHub', 'GitLab', 'Cloudflare', 'Google Analytics MCP server', 'Google Maps Platform Code Assist toolkit', 'ファイル検索/読み書き', 'ターミナルコマンド'
      ],
      plans: [
        {
          name: 'Code Assist for individuals',
          price: '無料',
          mcpSupport: '✓ フルサポート',
          note: 'IDE内でMCPサーバーと連携するエージェントモードを利用可能。',
          sourceUrl: 'https://developers.google.com/gemini-code-assist/docs/overview'
        },
        {
          name: 'Code Assist Standard/Enterprise',
          price: 'Google Cloud有料プラン',
          mcpSupport: '✓ フルサポート',
          note: 'エンタープライズ向けの高度なセキュリティとプライベートリポジトリ連携。',
          sourceUrl: 'https://developers.google.com/gemini-code-assist/docs/overview'
        },
        {
          name: 'Advanced',
          price: '$19.99/月',
          mcpSupport: '限定的',
          note: 'Webサービス上での明確なMCP連携機能はドキュメントに記載なし。',
          sourceUrl: 'https://www.datastudios.org/post/chatgpt-vs-claude-vs-gemini-full-report-and-comparison-of-features-performance-integrations-pric'
        }
      ],
      source: 'https://developers.google.com/gemini-code-assist/docs/overview'
    }
  ];

  return (
    <div className="bg-gray-900 text-white min-h-screen p-8 font-sans">
      <div className="max-w-7xl mx-auto">
        <header className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">ChatGPT・Claude・GeminiのMCPツール対応比較</h1>
          <p className="text-lg text-gray-400">各AIプラットフォームのModel Context Protocol (MCP) 対応ツールと有料プランを徹底解剖</p>
        </header>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {platformData.map((platform) => (
            <div key={platform.id} className="bg-gray-800 rounded-2xl shadow-lg border border-gray-700 overflow-hidden flex flex-col transform hover:scale-105 transition-transform duration-300">
              <div className="p-6">
                <h2 className="text-2xl font-bold mb-3 text-white">{platform.name}</h2>
                <p className="text-sm font-semibold text-purple-400 mb-2">{platform.mcpConcept}</p>
                <p className="text-sm text-gray-400 mb-4 h-24 overflow-auto">{platform.mcpDescription}</p>
              </div>

              <div className="p-6 bg-gray-800/50 flex-grow">
                <h3 className="text-lg font-semibold mb-3 text-white border-b border-gray-600 pb-2">公式対応MCPツール/コネクター</h3>
                <div className="flex flex-wrap gap-2">
                  {platform.tools.map((tool, index) => (
                    <span key={index} className="bg-gray-700 text-gray-300 text-xs font-medium px-2.5 py-1 rounded-full">{tool}</span>
                  ))}
                </div>
              </div>

              <div className="p-6 flex-grow">
                <h3 className="text-lg font-semibold mb-3 text-white border-b border-gray-600 pb-2">利用プランとMCP対応</h3>
                <div className="overflow-x-auto">
                  <table className="w-full text-sm text-left text-gray-300">
                    <thead className="text-xs text-gray-400 uppercase bg-gray-700">
                      <tr>
                        <th scope="col" className="px-4 py-3">プラン名</th>
                        <th scope="col" className="px-4 py-3">月額料金</th>
                        <th scope="col" className="px-4 py-3">MCP/コネクター利用</th>
                      </tr>
                    </thead>
                    <tbody>
                      {platform.plans.map((plan, index) => (
                        <tr key={index} className="border-b border-gray-700 hover:bg-gray-700/50">
                          <th scope="row" className="px-4 py-3 font-medium whitespace-nowrap">{plan.name}</th>
                          <td className="px-4 py-3">{plan.price}</td>
                          <td className="px-4 py-3">
                            <a href={plan.sourceUrl} target="_blank" rel="noopener noreferrer" className="hover:text-purple-400">
  {plan.mcpSupport}
                            </a>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
               <div className="px-6 py-4 bg-gray-900/50 text-right">
                 <a href={platform.source} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-400 hover:underline">
                    出典を確認 →
                 </a>
               </div>
            </div>
          ))}
        </div>

        <footer className="text-center mt-12 text-sm text-gray-500">
          <p>Model Context Protocol (MCP)は、AIモデルが外部ツールやデータソースと連携するためのオープン標準です。</p>
          <p>最終更新日: 2025-08-04</p>
        </footer>
      </div>
    </div>
  );
};

export default MCPComparison;