import React from 'react';

const App = () => {
  const openaiApiCode = `import os
from openai import OpenAI

client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))

system_message = """
You are a professional researcher preparing a structured, data-driven report on behalf of a global health economics team. Your task is to analyze the health question the user poses.
Do:
- Focus on data-rich insights: include specific figures, trends, statistics, and measurable outcomes.
- When appropriate, summarize data in a way that could be turned into charts or tables.
- Prioritize reliable, up-to-date sources: peer-reviewed research, health organizations (e.g., WHO, CDC), etc.
- Include inline citations and return all source metadata.
Be analytical, avoid generalities, and ensure that each section supports data-backed reasoning.
"""
user_query = "Research the economic impact of semaglutide on global healthcare systems."
response = client.responses.create(
    model="o3-deep-research",
    input=[
        {
            "role": "developer",
            "content": [
                {
                    "type": "input_text",
                    "text": system_message,
                }
            ]
        },
        {
            "role": "user",
            "content": [
                {
                    "type": "input_text",
                    "text": user_query,
                }
            ]
        }
    ],
    reasoning={
        "summary": "auto"
    },
    tools=[
        {
            "type": "web_search_preview"
        },
        {
            "type": "code_interpreter"
        }
    ]
)

print(response.output[-1].content[0].text)

annotations = response.output[-1].content[0].annotations
for i, citation in enumerate(annotations):
    print(f"Citation {i+1}:")
    print(f" Title: {citation.title}")
    print(f" URL: {citation.url}")
    print(f" Location: chars {citation.start_index}–{citation.end_index}")`;

  const modelComparison = [
    {
      feature: "出力形式",
      chatgpt: "高度に構造化されたマルチソースレポート。SEO、コンテンツ戦略、学術タスクに最適",
      deepseek: "中程度 – 論理的な段階的推論。広範な調査よりも技術的なQ&Aに適している",
      grok: "中程度 – 速度と要約を優先。長文のSEO分析には深さが足りない"
    },
    {
      feature: "出力詳細",
      chatgpt: "表、リスト、分析を含む長文で洗練された応答",
      deepseek: "ほとんどが段落ベースで、いくつかの論理的構造を持つ",
      grok: "主要ポイントを先頭にまとめたエグゼクティブサマリー。簡潔なレポートに適している"
    },
    {
      feature: "主要ユースケース",
      chatgpt: "競合調査、トピック調査、キーワード調査、SEOトレンド分析",
      deepseek: "技術的な詳細分析、論理的な問題解決、学術的または数学ベースの検索クエリ",
      grok: "トレンド追跡、ブランドモニタリング、オーディエンス調査、時事問題やソーシャルセンチメントの迅速な把握"
    },
    {
      feature: "リアルタイムデータ",
      chatgpt: "はい – 調査中に最新のデータを取得し、SERP、トピック、バックリンクプロファイルの現在のスナップショットを提供する",
      deepseek: "いいえ – Web更新にアクセスできない静的モデル",
      grok: "はい – リアルタイムのWebおよびX（Twitter）コンテキスト。急速な変化の追跡に役立つ"
    },
    {
      feature: "データ分析サポート",
      chatgpt: "はい – アップロードされたCSV、PDF、または構造化コンテンツからのデータ分析をサポート",
      deepseek: "いいえ – ファイルアップロードはサポートされていない",
      grok: "制限あり – コードを受け入れ、データを手動で処理できるが、ファイルベースのワークフローには最適化されていない"
    },
    {
      feature: "ソースの引用",
      chatgpt: "はい – 全体を通してソースが参照される。出力には、参照されたドキュメントの引用または要約が含まれることが多い",
      deepseek: "部分的 – 推論や例は提供するが、自動的にソースを引用しない",
      grok: "はい – ソースリンクが含まれることが多いが、引用の品質と信頼性は異なる場合がある"
    }
  ];

  const o3ModelSpecs = [
    {
      item: "コンテキストウィンドウ",
      detail: "200,000トークン"
    },
    {
      item: "最大出力トークン",
      detail: "100,000トークン"
    },
    {
      item: "知識カットオフ",
      detail: "2024年6月1日（web_search_previewツールでリアルタイム情報アクセス可能）"
    },
    {
      item: "入力トークン料金",
      detail: "100万トークンあたり10.00ドル"
    },
    {
      item: "出力トークン料金",
      detail: "100万トークンあたり40.00ドル"
    }
  ];

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">OpenAI DeepResearchの活用のテクニック</h1>
      <p className="mb-4">OpenAIのDeepResearchは、大規模言語モデル（LLM）とエージェントフレームワークを組み合わせることで、人間が行うような複雑な情報収集、分析、推論を自動化するシステムです。<a href="https://medium.com/thedeephub/deepresearch-openai-google-opensource-step-towards-agi-8be08175b1bb" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[3]</a></p>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">1. DeepResearchの基本概念</h2>
        <ul className="list-disc list-inside ml-4">
          <li>複雑な調査の自動化: 金融分析、科学研究、政策立案、エンジニアリング分野での深層かつ広範な情報収集を自動化します。<a href="https://medium.com/thedeephub/deepresearch-openai-google-opensource-step-towards-agi-8be08175b1bb" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[3]</a></li>
          <li>ニッチ情報の特定: 従来の検索エンジンでは見つけにくい、特定の文脈に埋もれたニッチな情報を効率的に見つけ出します。<a href="https://medium.com/thedeephub/deepresearch-openai-google-opensource-step-towards-agi-8be08175b1bb" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[3]</a></li>
          <li>多段階の推論と計画: 自律的に多段階の調査計画を立て、実行し、リアルタイムで情報を精査し、探索経路を調整する能力を活用します。<a href="https://medium.com/thedeephub/deepresearch-openai-google-opensource-step-towards-agi-8be08175b1bb" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[3]</a></li>
          <li>データとファイルの統合分析: ユーザーがアップロードしたファイルをブラウズし、Pythonツールを用いてグラフを作成・反復することで、テキスト情報だけでなく、数値データや視覚データの分析も統合的に行えます。<a href="https://medium.com/thedeephub/deepresearch-openai-google-opensource-step-towards-agi-8be08175b1bb" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[3]</a></li>
          <li>情報の信頼性確保と検証: すべての出力は完全に文書化され、明確な引用と推論の要約が提供されるため、情報の出所を容易に参照し、検証できます。<a href="https://medium.com/thedeephub/deepresearch-openai-google-opensource-step-towards-agi-8be08175b1bb" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[3]</a></li>
        </ul>
      </section>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">2. ChatGPTインターフェースでの活用テクニック</h2>
        <ul className="list-disc list-inside ml-4">
          <li>利用開始: ChatGPTのメッセージコンポーザーで「deep research」を選択し、完了させたいタスクを具体的に記述します。<a href="https://help.openai.com/en/articles/10500283-deep-research-faq" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[18]</a></li>
          <li>クエリの具体化: 複数の情報源にわたる集約と統合が必要な、多段階で詳細な質問に対して真価を発揮します。<a href="https://help.openai.com/en/articles/10500283-deep-research-faq" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[18]</a></li>
          <li>コンテキストの追加: 質問に背景情報や追加のコンテキストを与えるために、ファイルやスプレッドシートを添付します。<a href="https://openai.com/index/introducing-deep-research/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[17]</a></li>
          <li>適切な使用シーンの選択: 深掘りした徹底的な調査に最適です。迅速な情報検索や簡単な事実確認には、標準チャットや「Search」機能が適しています。<a href="https://help.openai.com/en/articles/10500283-deep-research-faq" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[18]</a></li>
          <li>Agent Modeの活用: 2025年7月17日のアップデートにより、Deep ResearchはChatGPTエージェントの一部としてビジュアルブラウザにアクセスできるようになりました。コンポーザーのドロップダウンから「agent mode」を選択し、直接クエリを入力します。<a href="https://openai.com/index/introducing-deep-research/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[17]</a></li>
          <li>進行状況の確認と情報源の検証: Deep Researchがタスクを実行している間は、サイドバーに実行されたステップと使用されたソースの概要が表示されます。<a href="https://openai.com/index/introducing-deep-research/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[17]</a></li>
          <li>クエリの明確化への積極的な対応: DeepResearchは常にクエリの意図を明確にしようと質問を試みます。積極的に具体的に回答することで、精度の高い結果を導き出します。<a href="https://www.digitalbricks.ai/blog-posts/openais-deep-research-a-comprehensive-guide-with-real-world-examples" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[73]</a></li>
          <li>プロンプトの最適化: 調査開始前に、別のLLMを「プロンプトエンジニア」として活用し、DeepResearchに与えるプロンプトを事前に洗練させることが効果的です。<a href="https://www.datacamp.com/blog/deep-research-openai" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[0]</a></li>
        </ul>
      </section>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">3. Deep Research APIでの活用テクニック</h2>
        <ul className="list-disc list-inside ml-4">
          <li>適切なモデルの選択:
            <ul className="list-circle list-inside ml-4">
              <li><span className="font-bold">o3-deep-research-2025-06-26</span>: 最高品質の合成と詳細な分析が求められる、複雑なタスクや深い推論に最適です。<a href="https://apidog.com/blog/openai-deep-research-api/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[62]</a></li>
              <li><span className="font-bold">o4-mini-deep-research-2025-06-26</span>: より軽量で高速なモデルであり、レイテンシーに敏感なアプリケーションや、より直接的なリサーチタスクに適しています。<a href="https://apidog.com/blog/openai-deep-research-api/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[62]</a></li>
            </ul>
          </li>
          <li>APIを使い始めるための基本テクニック (Python SDK, 認証, リクエスト構築):
            <pre className="bg-gray-100 p-3 rounded-md text-sm whitespace-pre-wrap mt-2"><code className="language-python">{
              "language": "python",
              "code": `${openaiApiCode}`
            }</code></pre>
            <p className="text-xs text-gray-500 mt-1">出典: <a href="https://apidog.com/blog/openai-deep-research-api/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">A Developer's Guide to the OpenAI Deep Research API - Apidog</a></p>
          </li>
          <li>レポート、引用、中間ステップの活用: 生成された最終レポート、埋め込まれた引用メタデータ、およびエージェントの思考プロセス全体（Reasoning Steps, Web Search Calls, Code Execution）を検査することで、透明性と信頼性を確保します。<a href="https://apidog.com/blog/openai-deep-research-api/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[62]</a></li>
          <li>高度な応用戦略: Model Context Protocol (MCP)によるプライベートデータ連携: 社内のナレッジベース、データベース、またはその他の独自サービスをクエリするカスタムツールを構築し、エージェントの機能を拡張します。<a href="https://apidog.com/blog/openai-deep-research-api/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[62]</a></li>
          <li>エージェントとツールの最適なバランス: 単一のエージェントに多数のツールを持たせるよりも、ツールを少なくした複数のエージェントを協調させるアプローチが推奨されます。<a href="https://cobusgreyling.medium.com/openai-deep-research-ai-agent-architecture-7ac52b5f6a01" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[61]</a></li>
          <li>意図とコンテキストの明確化: 長期にわたるリサーチリクエストにおいて、ユーザーの意図とコンテキストを明確に確立することが極めて重要です。<a href="https://cobusgreyling.medium.com/openai-deep-research-ai-agent-architecture-7ac52b5f6a01" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[61]</a></li>
        </ul>
      </section>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">4. SEOにおけるDeep Researchの活用テクニック</h2>
        <ul className="list-disc list-inside ml-4">
          <li>競合分析: 競合他社のドメインオーソリティ、バックリンク、主要キーワード、コンテンツ戦略、オンページSEO、技術的要因などのSEO要素を比較分析する作業を自動化します。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>トピック調査: 業界のトレンドや新しいトピックに関する深い調査を依頼することで、関連性の高い、パフォーマンスの高いトピックやキーワード機会を発見できます。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>内部リンクとバックリンクの洞察: Screaming Frogなどのクローラーで内部リンクデータを、SE RankingのBacklink Checkerでバックリンクデータを収集し、Deep Researchに提供してクロス分析させます。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>バックリンクステータス監視: SE RankingのBacklink Monitoring Toolで準備したバックリンクデータをDeep Researchに提供し、「リンクが存在するか否か」を確認させることで、バックリンクの有効性を追跡する作業を効率化します。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>継続的なタスク: キーワード調査（トレンドキーワードの発見）、テクニカルSEOチェック（PageSpeed APIやScreaming Frogデータからの推奨事項生成）、コンテンツブリーフとアウトライン作成（H1, H2, H3見出しを含む詳細レポート）に活用できます。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
        </ul>
      </section>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">5. 自己改善型AIエージェントの構築</h2>
        <ul className="list-disc list-inside ml-4">
          <li>Reflexionエージェントの理解と構築: LangGraphを用いたReflexionエージェントを実装し、AIが構造化されたフィードバックに基づいて自身の応答を継続的に改善する能力を高めます。<a href="https://catalog.skills.network/catalog_item/7748" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[70]</a></li>
          <li>外部検証ツールの統合: 事実の正確性と研究に基づいた応答を強化するために、外部検証ツールを組み込みます。<a href="https://catalog.skills.network/catalog_item/7748" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[70]</a></li>
          <li>AI意思決定の最適化: グラフベースのワークフローと構造化された改善ループを使用して、AIの意思決定プロセスを最適化します。<a href="https://catalog.skills.network/catalog_item/7748" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[70]</a></li>
        </ul>
      </section>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">6. Deep Researchを最大限に活用するためのヒント</h2>
        <ul className="list-disc list-inside ml-4">
          <li>詳細なプロンプトから始める: 明確な指示とコンテキストを提供することで、最適なパフォーマンスを引き出します。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>より賢いプロンプトを作成する: 初期の出力に基づいてプロンプトを洗練させ、より具体的なデータを求めることで精度を向上させます。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>忍耐強く待つ: Deep Researchは複雑なタスクの場合、通常5〜15分、最長で30分かかることがあります。中断せずに完了するまで待ち、計画的に作業を進めます。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>チャットベースの応答を期待する: ダウンロード可能なファイルの管理能力は現在制限されているため、チャットインターフェースでの応答に対応できるよう準備します。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>大規模なタスクを分割する: 1,000のバックリンクや10,000ページのサイトなど、大規模なタスクは小さな塊に分割することで、過負荷を防ぎ、管理しやすい出力を得られます。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
          <li>主要な詳細を検証する: Deep Researchは正確さを目指しますが、完璧ではありません。その出力を優れた初稿として扱い、重要な指標は常に専門ツールで再確認することが重要です。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></li>
        </ul>
      </section>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">7. その他のAI研究ツールとの比較</h2>
        <p className="mb-2">Deep Researchは、構造化された出力、リアルタイムデータの深さ、複雑なタスクへの対応能力において他のAI研究ツールと比較しても際立っています。<a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[72]</a></p>
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200 border border-gray-300">
            <thead>
              <tr className="bg-gray-50">
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r">特徴</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r">ChatGPT Deep Research</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r">DeepSeek’s DeepThink</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Grok 3’s Deep Research</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {modelComparison.map((row, index) => (
                <tr key={index}>
                  <td className="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900 border-r">{row.feature}</td>
                  <td className="px-6 py-4 whitespace-normal text-sm text-gray-700 border-r">{row.chatgpt}</td>
                  <td className="px-6 py-4 whitespace-normal text-sm text-gray-700 border-r">{row.deepseek}</td>
                  <td className="px-6 py-4 whitespace-normal text-sm text-gray-700">{row.grok}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="text-xs text-gray-500 mt-1">出典: <a href="https://seranking.com/blog/chatgpt-deep-research-for-seo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">OpenAI's Deep Research for SEO: Use Cases and Insights - SE Ranking</a></p>
      </section>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">8. o3-deep-researchモデルの主要スペックと料金 (2024年後半時点)</h2>
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200 border border-gray-300">
            <thead>
              <tr className="bg-gray-50">
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r">項目</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">詳細</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {o3ModelSpecs.map((row, index) => (
                <tr key={index}>
                  <td className="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900 border-r">{row.item}</td>
                  <td className="px-6 py-4 whitespace-normal text-sm text-gray-700">{row.detail}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="text-xs text-gray-500 mt-1">出典: <a href="https://apidog.com/blog/openai-deep-research-api/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">A Developer's Guide to the OpenAI Deep Research API - Apidog</a></p>
      </section>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-3">9. 開発ロードマップと今後の展望</h2>
        <ul className="list-disc list-inside ml-4">
          <li>OpenAIのDeepResearchはまだ初期段階にあり、不正確な事実や誤った推論を生成する可能性がありますが、継続的な改善が期待されています。<a href="https://www.datacamp.com/blog/deep-research-openai" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[0]</a></li>
          <li>将来的には、より専門的なデータソース（サブスクリプションベースや内部リソースなど）への接続が可能になり、出力の堅牢性とパーソナライズ性がさらに向上する予定です。<a href="https://openai.com/index/introducing-deep-research/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[17]</a></li>
          <li>DeepResearchと、現実世界のアクションを実行できるOperatorの組み合わせにより、ChatGPTはさらに高度なタスクを非同期で実行できるようになることが構想されています。<a href="https://openai.com/index/introducing-deep-research/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[17]</a></li>
        </ul>
      </section>
    </div>
  );
};

export default App;