AI開発の新常識、コンテキストエンジニアリング入門：LLMの性能を最大化する3つの要素

import React from 'react';

const App = () => {
  const technologies = [
    {
      category: '計画 (Planning)',
      description: '複雑なタスクをサブゴールに分解し、過去の行動から学習する能力。',
      items: [
        { name: 'Chain of Thought (CoT)',
          summary: 'モデルに「段階的に考える」よう促し、複雑なタスクを単純なステップに分解するプロンプト手法。',
          source: 'https://arxiv.org/abs/2201.11903' },
        { name: 'Tree of Thoughts (ToT)',
          summary: 'CoTを拡張し、各ステップで複数の推論パスを木構造で探索することで、より網羅的な探索を可能にする。',
          source: 'https://arxiv.org/abs/2305.10601' },
        { name: 'ReAct',
          summary: '推論(Reasoning)と行動(Acting)をLLM内で交互に生成・統合し、外部ツールと連携して信頼性の高い問題解決を実現する。',
          source: 'https://arxiv.org/abs/2210.03629' },
        { name: 'Reflexion',
          summary: '失敗から学んだ「言語的な反省」を記憶し、後の試行でより良い意思決定を導く自己修正フレームワーク。',
          source: 'https://arxiv.org/abs/2303.11366' },
        { name: 'LLM+P',
          summary: 'LLMを使い自然言語の問題を形式言語(PDDL)に変換し、古典的なプランナーで最適解を探索する。',
          source: 'https://arxiv.org/abs/2304.11477' },
      ]
    },
    {
      category: '記憶 (Memory)',
      description: '過去の情報を保持・想起し、長期的な対話やタスクで一貫性を保つ能力。',
      items: [
        { name: 'Mem0',
          summary: 'AIエージェントに長期記憶能力を付与するインテリジェントなメモリレイヤー。トークン使用量を90%削減し、応答速度を91%向上させる。',
          source: 'https://github.com/mem0ai/mem0' },
        { name: 'Generative Agents',
          summary: '経験を自然言語で記録し、高次の「反省」へと統合する記憶アーキテクチャ。人間らしい行動シミュレーションを実現。',
          source: 'https://arxiv.org/abs/2304.03442' },
        { name: '近似最近傍 (ANN)',
          summary: '長期記憶への高速アクセスを実現するアルゴリズム群（LSH, ANNOY, HNSW, FAISSなど）。',
          source: 'https://lilianweng.github.io/posts/2023-06-23-agent/'
        }
      ]
    },
    {
      category: 'ツール利用 (Tool Use)',
      description: '外部API、計算機、データベースなどを利用し、LLMの機能を拡張する能力。',
      items: [
        { name: 'Toolformer',
          summary: '外部ツールのAPIをいつ、どのように呼び出すかをLLMが自己教師あり学習する手法。',
          source: 'https://arxiv.org/abs/2302.04761' },
        { name: 'HuggingGPT',
          summary: 'ChatGPTをタスクプランナーとして使い、HuggingFace上の多数の専門AIモデルから最適なものを選択・実行させる。',
          source: 'https://arxiv.org/abs/2303.17580' },
        { name: 'ChemCrow',
          summary: '化学分野に特化し、18種類の専門家設計ツールを駆使して有機合成などのタスクを実行するエージェント。',
          source: 'https://arxiv.org/abs/2304.05376' },
        { name: 'MRKL Systems',
          summary: 'LLM、外部知識源、推論モジュールを組み合わせたニューロシンボリックアーキテクチャ。',
          source: 'https://arxiv.org/abs/2205.00445' }
      ]
    }
  ];

  const caseStudies = [
    {
      name: 'Devin (Cognition Labs)',
      description: 'AIソフトウェアエンジニア。コードベースのコンテキストを活用し、複雑な開発タスクを自律的に実行する。DeepWiki MCPサーバーでコンテキストを高速取得。',
      source: 'https://www.cognition-labs.com/blog'
    },
    {
      name: 'Generative Agents (Stanford/Google)',
      description: '人間らしい行動をシミュレートする25体のエージェント群。記憶と反省のアーキテクチャを持ち、仮想の町で自律的な社会行動を生み出す。',
      source: 'https://arxiv.org/abs/2304.03442'
    },
    {
      name: 'BabyAGI',
      description: '自己構築型の自律エージェントフレームワーク。必要なツール（関数）を動的にロード、管理、生成し、タスクを遂行する。',
      source: 'https://github.com/yoheinakajima/babyagi'
    },
     {
      name: 'Claude (Anthropic)',
      description: '思考プロセスを`<thinking>`タグに記述し、次の対話ではコンテキストから除外する「拡張思考」により、トークン効率の高いコンテキスト分離を実現。',
      source: 'https://docs.anthropic.com/en/docs/build-with-claude/context-windows'
    }
  ];

  return (
    <div className="bg-gray-50 text-gray-800 font-sans p-4 md:p-8">
      <header className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-bold text-gray-900">コンテキストエンジニアリングの概要</h1>
        <p className="text-lg text-gray-600 mt-2">大規模言語モデル(LLM)の性能を最大化する技術</p>
        <p className="text-sm text-gray-500 mt-2">出典: <a href="https://www.philschmid.de/context-engineering" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">philschmid.de</a>, <a href="https://blog.langchain.com/the-rise-of-context-engineering/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">LangChain Blog</a></p>
      </header>

      <section className="mb-16">
        <h2 className="text-3xl font-bold text-center mb-8">コンテキストの構成要素</h2>
        <div className="relative w-full max-w-4xl mx-auto h-96 md:h-[500px]">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full border-4 border-blue-300 rounded-full flex items-center justify-center">
            <span className="font-bold text-blue-800 bg-blue-100 px-3 py-1 rounded-full">Context</span>
          </div>
          <div className="absolute top-[10%] left-[25%] w-40 h-40 bg-yellow-200 bg-opacity-70 rounded-full flex items-center justify-center text-center p-2 text-sm font-semibold text-yellow-800 shadow-lg">Instructions /<br/>System Prompt</div>
          <div className="absolute top-[15%] right-[20%] w-48 h-48 bg-pink-200 bg-opacity-70 rounded-full flex items-center justify-center text-center p-2 text-sm font-semibold text-pink-800 shadow-lg">Long-Term<br/>Memory</div>
          <div className="absolute top-[40%] left-[5%] w-52 h-52 bg-gray-300 bg-opacity-70 rounded-full flex items-center justify-center text-center p-2 text-sm font-semibold text-gray-800 shadow-lg">State / History<br/>(Short-term Memory)</div>
          <div className="absolute bottom-[20%] left-[20%] w-44 h-44 bg-purple-200 bg-opacity-70 rounded-full flex items-center justify-center text-center p-2 text-sm font-semibold text-purple-800 shadow-lg">User Prompts</div>
           <div className="absolute bottom-[5%] left-[45%] w-36 h-36 bg-cyan-200 bg-opacity-70 rounded-full flex items-center justify-center text-center p-2 text-sm font-semibold text-cyan-800 shadow-lg">Retrieved Info<br/>(RAG)</div>
          <div className="absolute bottom-[10%] right-[15%] w-52 h-52 bg-green-200 bg-opacity-70 rounded-full flex items-center justify-center text-center p-2 text-sm font-semibold text-green-800 shadow-lg">Available Tools /<br/>Structured Output</div>
        </div>
      </section>

      <section className="mb-16">
        <h2 className="text-3xl font-bold text-center mb-8">主要技術要素</h2>
        <div className="space-y-12">
          {technologies.map((tech, index) => (
            <div key={index} className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-2xl font-bold text-gray-800 mb-2">{tech.category}</h3>
              <p className="text-gray-600 mb-4">{tech.description}</p>
              <div className="overflow-x-auto">
                <table className="min-w-full bg-white border border-gray-200">
                  <thead className="bg-gray-100">
                    <tr>
                      <th className="py-2 px-4 border-b text-left text-sm font-semibold text-gray-600">技術名</th>
                      <th className="py-2 px-4 border-b text-left text-sm font-semibold text-gray-600">概要</th>
                    </tr>
                  </thead>
                  <tbody>
                    {tech.items.map((item, itemIndex) => (
                      <tr key={itemIndex} className="hover:bg-gray-50">
                        <td className="py-2 px-4 border-b text-sm text-gray-700 font-medium"><a href={item.source} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">{item.name}</a></td>
                        <td className="py-2 px-4 border-b text-sm text-gray-600">{item.summary}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="mb-16">
        <h2 className="text-3xl font-bold text-center mb-8">実践的な応用例</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {caseStudies.map((study, index) => (
            <div key={index} className="bg-white p-6 rounded-lg shadow-lg flex flex-col">
              <h3 className="text-xl font-bold text-gray-800 mb-3">{study.name}</h3>
              <p className="text-gray-600 text-sm flex-grow">{study.description}</p>
              <a href={study.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-700 underline text-sm mt-4 self-start">出典を見る</a>
            </div>
          ))}
        </div>
      </section>

      <section>
        <h2 className="text-3xl font-bold text-center mb-8">直面する課題</h2>
        <div className="max-w-3xl mx-auto bg-white p-6 rounded-lg shadow-md">
          <ul className="space-y-4 list-disc list-inside text-gray-700">
            <li>
              <strong className="font-semibold text-gray-900">Lost in the Middle:</strong>
              <span> LLMは長いコンテキストの中間に配置された情報を見失いやすい。関連情報は冒頭か末尾に配置するのが効果的。 (出典: <a href="https://arxiv.org/abs/2307.03172" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">arXiv:2307.03172</a>)</span>
            </li>
            <li>
              <strong className="font-semibold text-gray-900">有限なコンテキスト長:</strong>
              <span> 長期記憶のためのベクトルストアは有効だが、完全なアテンションほどの表現力はなく、情報ロスが発生する可能性がある。</span>
            </li>
            <li>
              <strong className="font-semibold text-gray-900">長期計画の困難さ:</strong>
              <span> LLMは予期せぬエラーに直面した際に計画を柔軟に調整することに苦労する場合がある。</span>
            </li>
             <li>
              <strong className="font-semibold text-gray-900">自然言語インターフェースの信頼性:</strong>
              <span> LLMと外部ツール間のインターフェースはLLMの出力に依存するが、不安定であったりフォーマットエラーを起こしたりすることがあり、堅牢なエラーハンドリングが求められる。</span>
            </li>
          </ul>
        </div>
      </section>
    </div>
  );
};

export default App;