2025年最新オープンソースAIエージェント徹底解説と活用法

import React from 'react';

const categories = [
  { 
    name: 'ブラウザ自動化エージェント', 
    companies: ['browser-use'] 
  },
  { 
    name: '自律型AIエージェント', 
    companies: ['AutoGPT', 'Dify'] 
  },
  { 
    name: 'ワークフロー自動化', 
    companies: ['n8n'] 
  },
  { 
    name: '会話型AIエージェント', 
    companies: ['Rasa', 'BotPress'] 
  }
];

const logos = {
  'browser-use': 'https://github.com/browser-use.png',
  'AutoGPT': 'https://github.com/Significant-Gravitas.png',
  'Dify': 'https://github.com/langgenius.png',
  'n8n': 'https://github.com/n8n-io.png',
  'Rasa': 'https://github.com/RasaHQ.png',
  'BotPress': 'https://github.com/botpress.png'
};

const entityDetails = {
  'browser-use': {
    description: 'AIによるブラウザ操作の自動化を民主化する革新的なツール',
    features: ['マルチLLM対応', '簡単導入', '高度なタスク実行', 'Web UI/Desktop App'],
    github: 'https://github.com/browser-use/browser-use'
  },
  'AutoGPT': {
    description: '自己完結型の自律エージェント構築に焦点を当てたプラットフォーム',
    features: ['目標分解', 'インターネットアクセス', '永続的メモリ', 'モジュール型'],
    github: 'https://github.com/Significant-Gravitas/AutoGPT'
  },
  'Dify': {
    description: 'ビジュアルなドラッグ&ドロップエージェントビルダー',
    features: ['数百のLLMサポート', 'RAG・ReAct内蔵', 'ノーコード開発', 'エンタープライズ機能'],
    github: 'https://github.com/langgenius/dify'
  },
  'n8n': {
    description: 'AIネイティブなワークフロー自動化プラットフォーム',
    features: ['400+統合', 'ビジュアルビルディング', 'カスタムコード', 'オープンソース'],
    github: 'https://github.com/n8n-io/n8n'
  },
  'Rasa': {
    description: 'オープンソースの会話型AIフレームワーク',
    features: ['CALMアーキテクチャ', 'オンプレミス展開', 'NLU機能', '多チャンネル対応'],
    github: 'https://github.com/RasaHQ/rasa'
  },
  'BotPress': {
    description: 'GPT/LLMエージェント構築・デプロイのオープンソースハブ',
    features: ['ビジュアルフロービルダー', 'カスタム統合', '分析ダッシュボード', 'Botpress Hub'],
    github: 'https://github.com/botpress/botpress'
  }
};

export default function Chaosmap() {
  return (
    <div className="p-8 bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-4xl font-bold mb-2 text-center text-gray-800">
          オープンソースAIエージェント カオスマップ
        </h1>
        <p className="text-lg text-center text-gray-600 mb-8">
          調査結果から抽出した主要なオープンソースAIエージェントプラットフォーム
        </p>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {categories.map((category) => (
            <div key={category.name} className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
              <h2 className="text-xl font-semibold mb-4 text-center text-indigo-700 border-b border-indigo-200 pb-2">
                {category.name}
              </h2>
              <div className="space-y-4">
                {category.companies.map((company) => (
                  <div key={company} className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors duration-200">
                    <div className="flex items-center mb-3">
                      {logos[company] ? (
                        <img
                          src={logos[company]}
                          alt={`${company} logo`}
                          width={32}
                          height={32}
                          className="mr-3 rounded-full"
                        />
                      ) : (
                        <div className="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full mr-3 flex items-center justify-center">
                          <span className="text-white text-sm font-bold">
                            {company.charAt(0)}
                          </span>
                        </div>
                      )}
                      <span className="font-semibold text-gray-800">{company}</span>
                    </div>
                    
                    {entityDetails[company] && (
                      <div className="space-y-2">
                        <p className="text-sm text-gray-600 leading-relaxed">
                          {entityDetails[company].description}
                        </p>
                        <div className="flex flex-wrap gap-1">
                          {entityDetails[company].features.slice(0, 2).map((feature, index) => (
                            <span key={index} className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
  {feature}
                            </span>
                          ))}
                        </div>
                        <a 
                          href={entityDetails[company].github}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-flex items-center text-xs text-indigo-600 hover:text-indigo-800 font-medium mt-2"
                        >
                          <svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
                          </svg>
                          GitHub
                        </a>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        
        <div className="mt-12 bg-white rounded-xl shadow-lg p-6">
          <h3 className="text-2xl font-bold mb-4 text-gray-800">調査結果サマリー</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="text-lg font-semibold mb-3 text-indigo-700">主要な発見</h4>
              <ul className="space-y-2 text-sm text-gray-600">
                <li className="flex items-start">
                  <span className="text-indigo-500 mr-2">•</span>
                  browser-useは自然言語でのブラウザ操作自動化を実現
                </li>
                <li className="flex items-start">
                  <span className="text-indigo-500 mr-2">•</span>
                  AutoGPTは自律型エージェント開発のパイオニア
                </li>
                <li className="flex items-start">
                  <span className="text-indigo-500 mr-2">•</span>
                  Difyはノーコードでのエージェント構築を可能に
                </li>
                <li className="flex items-start">
                  <span className="text-indigo-500 mr-2">•</span>
                  n8nは400以上のサービス統合を提供
                </li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-semibold mb-3 text-indigo-700">技術トレンド</h4>
              <ul className="space-y-2 text-sm text-gray-600">
                <li className="flex items-start">
                  <span className="text-green-500 mr-2">•</span>
                  マルチLLM対応が標準化
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-2">•</span>
                  ビジュアル開発環境の充実
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-2">•</span>
                  エンタープライズ機能の強化
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-2">•</span>
                  活発なオープンソースコミュニティ
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <div className="mt-6 text-center text-sm text-gray-500">
          <p>
            出典: 
            <a href="https://github.com/browser-use/browser-use" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 mx-1">
              browser-use
            </a>
            <a href="https://github.com/Significant-Gravitas/AutoGPT" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 mx-1">
              AutoGPT
            </a>
            <a href="https://github.com/langgenius/dify" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 mx-1">
              Dify
            </a>
            <a href="https://github.com/n8n-io/n8n" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 mx-1">
              n8n
            </a>
            <a href="https://github.com/RasaHQ/rasa" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 mx-1">
              Rasa
            </a>
            <a href="https://github.com/botpress/botpress" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 mx-1">
              BotPress
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}