[ユーザー] → [フロントエンド] → [Express サーバー] → [Claude API]
                                                          ↓
[ユーザー] ← [フロントエンド] ← [Express サーバー] ← [Claude 応答]

> チャットボットWebアプリの技術スタックを提案して。
  要件:
  - 初心者でも理解しやすいシンプルな構成
  - フロントエンドはフレームワークなし（HTML/CSS/JS）
  - バックエンドはNode.js
  - Claude APIを使用
  それぞれの理由も説明して

> チャットボットのプロジェクトフォルダ構成を作って。
  - フロントエンドは public/ フォルダ
  - バックエンドは server/ フォルダ
  - 設定ファイルはルート直下
  必要なファイルもすべてリストアップして

chatbot-app/
├── public/                  # フロントエンド
│   ├── index.html           # メインページ
│   ├── css/
│   │   └── style.css        # スタイルシート
│   └── js/
│       └── app.js           # クライアントサイドJS
├── server/                  # バックエンド
│   └── index.js             # Expressサーバー
├── .env                     # 環境変数（APIキー）
├── .gitignore               # Git除外設定
├── package.json             # 依存パッケージ管理
└── README.md                # プロジェクト説明

> chatbot-app というフォルダを作って、npm init でpackage.jsonを生成して。
  必要なパッケージもインストールして。
  パッケージ: express, cors, dotenv, @anthropic-ai/sdk
  開発用: nodemon

mkdir -p chatbot-app/{public/{css,js},server}
cd chatbot-app
npm init -y
npm install express cors dotenv @anthropic-ai/sdk
npm install --save-dev nodemon

> .gitignore を作って。node_modules と .env を除外して

node_modules/
.env
.DS_Store

> package.json の scripts に以下を追加して:
  - "start": "node server/index.js"
  - "dev": "nodemon server/index.js"

{
  "scripts": {
    "start": "node server/index.js",
    "dev": "nodemon server/index.js"
  }
}

> .env ファイルを作って、ANTHROPIC_API_KEY を設定する形式にして。
  コメントで説明も入れて。
  .gitignore に .env が含まれているか確認して

# Anthropic API Key
# https://console.anthropic.com/ で取得
ANTHROPIC_API_KEY=sk-ant-api03-ここにあなたのAPIキーを貼り付け

# サーバー設定
PORT=3000

> .gitignore の内容を見せて。.env が含まれているか確認して

> Node.js で Anthropic SDK を使って Claude API にメッセージを送るサンプルコードを書いて。
  - dotenv で .env からAPIキーを読み込む
  - claude-3-5-sonnet モデルを使う
  - 日本語で「こんにちは」と送る
  - 応答をコンソールに表示する

// test-api.js - Claude API 動作確認用スクリプト
require('dotenv').config();
const Anthropic = require('@anthropic-ai/sdk');

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

async function main() {
  const message = await client.messages.create({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 1024,
    messages: [
      {
        role: 'user',
        content: 'こんにちは！あなたは誰ですか？'
      }
    ],
  });

  console.log('Claude の応答:');
  console.log(message.content[0].text);
  console.log('\n--- メタデータ ---');
  console.log('モデル:', message.model);
  console.log('入力トークン:', message.usage.input_tokens);
  console.log('出力トークン:', message.usage.output_tokens);
  console.log('終了理由:', message.stop_reason);
}

main().catch(console.error);

node test-api.js

> Claude API の messages パラメータの形式を詳しく説明して。
  role の種類と、マルチターン会話の例も見せて

const messages = [
  { role: 'user', content: 'JavaScriptとは何ですか？' },
  { role: 'assistant', content: 'JavaScriptは、Webブラウザ上で動作するプログラミング言語です...' },
  { role: 'user', content: 'どうやって学べますか？' },
];

const response = await client.messages.create({
  model: 'claude-sonnet-4-20250514',  // 使用するモデル
  max_tokens: 1024,              // 最大出力トークン数
  system: 'あなたは親切なアシスタントです',  // システムプロンプト
  messages: messages,            // 会話履歴
  temperature: 0.7,              // ランダム性（0〜1）
});

> Claude API のエラーハンドリングのベストプラクティスを教えて。
  よくあるエラーコードとその対処法もリストアップして

async function callClaude(messages) {
  try {
    const response = await client.messages.create({
      model: 'claude-sonnet-4-20250514',
      max_tokens: 1024,
      messages: messages,
    });
    return response;
  } catch (error) {
    if (error.status === 401) {
      console.error('認証エラー: APIキーが無効です');
    } else if (error.status === 429) {
      console.error('レート制限: リクエストが多すぎます。少し待ってから再試行してください');
    } else if (error.status === 500) {
      console.error('サーバーエラー: Anthropic側の問題です。しばらく待ってから再試行してください');
    } else {
      console.error('予期しないエラー:', error.message);
    }
    throw error;
  }
}

> Express.jsでClaude APIと通信するバックエンドを作って。
  server/index.js に書いて。
  要件:
  - dotenv で環境変数を読み込む
  - CORS を有効にする
  - public/ フォルダを静的ファイルとして配信する
  - ポート3000で起動する
  - 起動時にコンソールにURLを表示する

// server/index.js
require('dotenv').config();
const express = require('express');
const cors = require('cors');
const path = require('path');
const Anthropic = require('@anthropic-ai/sdk');

const app = express();
const PORT = process.env.PORT || 3000;

// ミドルウェア設定
app.use(cors());
app.use(express.json());
app.use(express.static(path.join(__dirname, '..', 'public')));

// Anthropic クライアント初期化
const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

// ルートページ
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '..', 'public', 'index.html'));
});

// サーバー起動
app.listen(PORT, () => {
  console.log(`サーバー起動: http://localhost:${PORT}`);
  console.log('Ctrl+C で停止');
});

> /api/chat エンドポイントを追加して。
  POSTリクエストで messages 配列を受け取り、
  Claude API にメッセージを送信して結果を返す。
  エラーハンドリングもしっかり入れて

// チャット API エンドポイント
app.post('/api/chat', async (req, res) => {
  try {
    const { messages, system } = req.body;

    // 入力バリデーション
    if (!messages || !Array.isArray(messages) || messages.length === 0) {
      return res.status(400).json({
        error: 'messages は空でない配列である必要があります',
      });
    }

    // メッセージ形式のバリデーション
    for (const msg of messages) {
      if (!msg.role || !msg.content) {
        return res.status(400).json({
          error: '各メッセージには role と content が必要です',
        });
      }
      if (!['user', 'assistant'].includes(msg.role)) {
        return res.status(400).json({
          error: 'role は "user" または "assistant" である必要があります',
        });
      }
    }

    // Claude API にリクエスト送信
    const response = await anthropic.messages.create({
      model: 'claude-sonnet-4-20250514',
      max_tokens: 2048,
      system: system || 'あなたは親切で知識豊富なアシスタントです。日本語で回答してください。',
      messages: messages,
    });

    // 応答を返す
    res.json({
      content: response.content[0].text,
      usage: response.usage,
      model: response.model,
    });
  } catch (error) {
    console.error('Claude API エラー:', error.message);

    if (error.status === 401) {
      return res.status(401).json({ error: 'APIキーが無効です' });
    }
    if (error.status === 429) {
      return res.status(429).json({ error: 'リクエスト制限に達しました。少し待ってから再試行してください' });
    }
    if (error.status === 400) {
      return res.status(400).json({ error: 'リクエスト形式が不正です: ' + error.message });
    }

    res.status(500).json({ error: 'サーバー内部エラーが発生しました' });
  }
});

> CORS の設定を詳細にして。
  開発環境では全許可、本番環境では特定のオリジンだけ許可する設定にして

// CORS 詳細設定
const corsOptions = {
  origin: process.env.NODE_ENV === 'production'
    ? process.env.ALLOWED_ORIGIN || 'https://yourdomain.com'
    : '*',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type'],
  maxAge: 86400, // プリフライトリクエストのキャッシュ（24時間）
};

app.use(cors(corsOptions));

> /api/chat エンドポイントをテストする curl コマンドを書いて。
  日本語で「こんにちは」と送るテスト

# サーバーを起動
npm run dev

# 別のターミナルで curl テスト
curl -X POST http://localhost:3000/api/chat \
  -H "Content-Type: application/json" \
  -d '{
    "messages": [
      { "role": "user", "content": "こんにちは！自己紹介してください。" }
    ]
  }'

{
  "content": "こんにちは！私はClaude、Anthropic社が開発したAIアシスタントです...",
  "usage": {
    "input_tokens": 24,
    "output_tokens": 150
  },
  "model": "claude-sonnet-4-20250514"
}

# 空のメッセージ配列（400エラーが返るはず）
curl -X POST http://localhost:3000/api/chat \
  -H "Content-Type: application/json" \
  -d '{ "messages": [] }'

# 不正な形式（400エラーが返るはず）
curl -X POST http://localhost:3000/api/chat \
  -H "Content-Type: application/json" \
  -d '{ "messages": [{ "role": "invalid" }] }'

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const path = require('path');
const Anthropic = require('@anthropic-ai/sdk');

const app = express();
const PORT = process.env.PORT || 3000;

// Anthropic クライアント
const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

// ミドルウェア
app.use(cors());
app.use(express.json());
app.use(express.static(path.join(__dirname, '..', 'public')));

// チャット API
app.post('/api/chat', async (req, res) => {
  try {
    const { messages, system } = req.body;
    if (!messages || !Array.isArray(messages) || messages.length === 0) {
      return res.status(400).json({ error: 'messages が必要です' });
    }
    const response = await anthropic.messages.create({
      model: 'claude-sonnet-4-20250514',
      max_tokens: 2048,
      system: system || 'あなたは親切なアシスタントです。日本語で回答してください。',
      messages,
    });
    res.json({
      content: response.content[0].text,
      usage: response.usage,
    });
  } catch (error) {
    console.error('API Error:', error.message);
    res.status(error.status || 500).json({ error: error.message });
  }
});

app.listen(PORT, () => {
  console.log(`サーバー起動: http://localhost:${PORT}`);
});

> public/index.html にチャットボットのUIを作って。
  要件:
  - ヘッダーにアプリ名「Claude Chat」を表示
  - メッセージ表示エリア（スクロール可能）
  - 入力エリア（テキスト入力 + 送信ボタン）
  - レスポンシブ対応
  - CSSとJSは外部ファイルとして読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Claude Chat</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="app">
    <!-- ヘッダー -->
    <header class="header">
      <h1 class="header__title">Claude Chat</h1>
      <span class="header__status" id="status">オンライン</span>
    </header>

    <!-- メッセージ表示エリア -->
    <main class="chat-area" id="chatArea">
      <div class="messages" id="messages">
        <!-- ウェルカムメッセージ -->
        <div class="message message--assistant">
          <div class="message__avatar">AI</div>
          <div class="message__content">
            <p>こんにちは！何でも聞いてください。</p>
          </div>
        </div>
      </div>
    </main>

    <!-- 入力エリア -->
    <footer class="input-area">
      <form class="input-form" id="chatForm">
        <textarea
          class="input-form__textarea"
          id="messageInput"
          placeholder="メッセージを入力..."
          rows="1"
          maxlength="4000"
        ></textarea>
        <button
          class="input-form__button"
          type="submit"
          id="sendButton"
          title="送信"
        >
          送信
        </button>
      </form>
    </footer>
  </div>

  <script src="js/app.js"></script>
</body>
</html>

> public/css/style.css にチャットUIのスタイルを書いて。
  要件:
  - ダークテーマ
  - メッセージは吹き出し形式（ユーザーは右、AIは左）
  - アバターアイコン付き
  - スクロール可能なメッセージエリア
  - 入力エリアは画面下に固定
  - モバイル対応
  - アニメーション（メッセージのフェードイン）

/* リセット */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-bg: #1a1a2e;
  --color-bg-secondary: #16213e;
  --color-surface: #0f3460;
  --color-accent: #e94560;
  --color-text: #eee;
  --color-text-muted: #aaa;
  --color-user-bubble: #0f3460;
  --color-assistant-bubble: #16213e;
  --color-input-bg: #16213e;
  --color-border: #333;
  --font-main: 'Segoe UI', 'Noto Sans JP', sans-serif;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  height: 100vh;
  overflow: hidden;
}

/* アプリコンテナ */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 800px;
  margin: 0 auto;
}

/* ヘッダー */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.header__title {
  font-size: 1.2rem;
  font-weight: 600;
}

.header__status {
  font-size: 0.8rem;
  color: #4ade80;
}

/* チャットエリア */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scroll-behavior: smooth;
}

/* メッセージ */
.message {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  animation: fadeIn 0.3s ease-in;
}

.message--user {
  flex-direction: row-reverse;
}

.message__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  flex-shrink: 0;
  background: var(--color-accent);
}

.message--user .message__avatar {
  background: var(--color-surface);
}

.message__content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 16px;
  line-height: 1.6;
  font-size: 0.95rem;
}

.message--assistant .message__content {
  background: var(--color-assistant-bubble);
  border-bottom-left-radius: 4px;
}

.message--user .message__content {
  background: var(--color-user-bubble);
  border-bottom-right-radius: 4px;
}

/* 入力エリア */
.input-area {
  padding: 16px 20px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

.input-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.input-form__textarea {
  flex: 1;
  padding: 12px 16px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: var(--font-main);
  resize: none;
  outline: none;
  max-height: 120px;
  line-height: 1.5;
}

.input-form__textarea:focus {
  border-color: var(--color-accent);
}

.input-form__button {
  padding: 12px 24px;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.input-form__button:hover {
  background: #d63851;
}

.input-form__button:disabled {
  background: #666;
  cursor: not-allowed;
}

/* ローディング表示 */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--color-text-muted);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

/* アニメーション */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* レスポンシブ */
@media (max-width: 600px) {
  .message__content {
    max-width: 85%;
  }
  .header__title {
    font-size: 1rem;
  }
}

> チャットエリアに新しいメッセージが追加されたとき、
  自動的に一番下までスムーズスクロールする関数を書いて

function scrollToBottom() {
  const chatArea = document.getElementById('chatArea');
  chatArea.scrollTo({
    top: chatArea.scrollHeight,
    behavior: 'smooth',
  });
}

> textarea の内容に合わせて高さが自動調整される関数を書いて。
  最大4行まで拡大、それ以上はスクロールにする

const textarea = document.getElementById('messageInput');
textarea.addEventListener('input', function () {
  this.style.height = 'auto';
  this.style.height = Math.min(this.scrollHeight, 120) + 'px';
});

> public/js/app.js にチャットのメインロジックを書いて。
  要件:
  - フォーム送信でメッセージを送る
  - fetch API で /api/chat にPOSTリクエスト
  - ユーザーメッセージとAI応答を画面に表示
  - 送信中はボタンを無効化してローディング表示
  - Enter キーで送信（Shift+Enter は改行）

// public/js/app.js

// DOM要素の取得
const chatForm = document.getElementById('chatForm');
const messageInput = document.getElementById('messageInput');
const messagesContainer = document.getElementById('messages');
const sendButton = document.getElementById('sendButton');
const chatArea = document.getElementById('chatArea');

// 送信中フラグ
let isLoading = false;

// フォーム送信イベント
chatForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  const text = messageInput.value.trim();
  if (!text || isLoading) return;

  // ユーザーメッセージを表示
  appendMessage('user', text);
  messageInput.value = '';
  messageInput.style.height = 'auto';

  // ローディング開始
  setLoading(true);

  try {
    // バックエンドにリクエスト送信
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        messages: [{ role: 'user', content: text }],
      }),
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.error || 'サーバーエラーが発生しました');
    }

    const data = await response.json();
    appendMessage('assistant', data.content);
  } catch (error) {
    appendMessage('assistant', `エラー: ${error.message}`);
  } finally {
    setLoading(false);
  }
});

// Enter キーで送信（Shift+Enter は改行）
messageInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    chatForm.dispatchEvent(new Event('submit'));
  }
});

// textarea 自動リサイズ
messageInput.addEventListener('input', function () {
  this.style.height = 'auto';
  this.style.height = Math.min(this.scrollHeight, 120) + 'px';
});

> メッセージを吹き出しとして画面に追加する関数を書いて。
  - role（'user' or 'assistant'）でスタイルを切り替え
  - アバター付き
  - フェードインアニメーション
  - 追加後に自動スクロール

// メッセージを画面に追加
function appendMessage(role, content) {
  const messageDiv = document.createElement('div');
  messageDiv.className = `message message--${role}`;

  const avatarDiv = document.createElement('div');
  avatarDiv.className = 'message__avatar';
  avatarDiv.textContent = role === 'user' ? 'You' : 'AI';

  const contentDiv = document.createElement('div');
  contentDiv.className = 'message__content';

  // テキストを段落に分割して表示
  const paragraphs = content.split('\n').filter(line => line.trim());
  paragraphs.forEach(paragraph => {
    const p = document.createElement('p');
    p.textContent = paragraph;
    p.style.marginBottom = '8px';
    contentDiv.appendChild(p);
  });

  messageDiv.appendChild(avatarDiv);
  messageDiv.appendChild(contentDiv);
  messagesContainer.appendChild(messageDiv);

  scrollToBottom();
}

// 自動スクロール
function scrollToBottom() {
  chatArea.scrollTo({
    top: chatArea.scrollHeight,
    behavior: 'smooth',
  });
}

> ローディング状態を管理する関数を書いて。
  - 送信ボタンを無効化
  - タイピングインジケーター（点が跳ねるアニメーション）を表示
  - 入力欄をフォーカス

// ローディング状態の切り替え
function setLoading(loading) {
  isLoading = loading;
  sendButton.disabled = loading;

  if (loading) {
    // タイピングインジケーターを追加
    const indicator = document.createElement('div');
    indicator.className = 'message message--assistant';
    indicator.id = 'typingIndicator';

    const avatar = document.createElement('div');
    avatar.className = 'message__avatar';
    avatar.textContent = 'AI';

    const content = document.createElement('div');
    content.className = 'message__content';

    const typing = document.createElement('div');
    typing.className = 'typing-indicator';
    typing.innerHTML = '<span></span><span></span><span></span>';

    content.appendChild(typing);
    indicator.appendChild(avatar);
    indicator.appendChild(content);
    messagesContainer.appendChild(indicator);
    scrollToBottom();
  } else {
    // タイピングインジケーターを削除
    const indicator = document.getElementById('typingIndicator');
    if (indicator) indicator.remove();
    messageInput.focus();
  }
}

> fetch API のエラーハンドリングのベストプラクティスを教えて。
  ネットワークエラーとHTTPエラーの両方に対応して

async function sendMessage(messages) {
  try {
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ messages }),
    });

    // HTTPステータスコードのチェック
    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      if (response.status === 429) {
        throw new Error('リクエスト制限に達しました。少し待ってから再試行してください。');
      }
      if (response.status === 401) {
        throw new Error('認証エラー。APIキーを確認してください。');
      }
      throw new Error(errorData.error || `HTTPエラー: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    // ネットワークエラー（サーバーに到達できない場合）
    if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
      throw new Error('サーバーに接続できません。サーバーが起動しているか確認してください。');
    }
    throw error;
  }
}

# サーバーを起動
npm run dev

# ブラウザで http://localhost:3000 を開く

【通常のリクエスト】
クライアント → リクエスト → サーバー
クライアント ← ────── 応答（一括）← サーバー

【ストリーミング】
クライアント → リクエスト → サーバー
クライアント ← チャンク1 ← サーバー
クライアント ← チャンク2 ← サーバー
クライアント ← チャンク3 ← サーバー
クライアント ← ...      ← サーバー
クライアント ← 完了     ← サーバー

> /api/chat/stream というストリーミング対応エンドポイントを server/index.js に追加して。
  要件:
  - Claude API の stream: true を使用
  - Server-Sent Events (SSE) 形式でレスポンスを返す
  - テキストチャンクを content_block_delta イベントで検出
  - ストリーム終了時に [DONE] を送信
  - エラーハンドリングも含める

// ストリーミングチャット API
app.post('/api/chat/stream', async (req, res) => {
  try {
    const { messages, system } = req.body;

    if (!messages || !Array.isArray(messages) || messages.length === 0) {
      return res.status(400).json({ error: 'messages が必要です' });
    }

    // SSE ヘッダー設定
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    // Claude API にストリーミングリクエスト
    const stream = anthropic.messages.stream({
      model: 'claude-sonnet-4-20250514',
      max_tokens: 2048,
      system: system || 'あなたは親切なアシスタントです。日本語で回答してください。',
      messages: messages,
    });

    // テキストチャンクを受信するたびにクライアントに送信
    stream.on('text', (text) => {
      res.write(`data: ${JSON.stringify({ type: 'text', content: text })}\n\n`);
    });

    // ストリーム完了時
    stream.on('finalMessage', (message) => {
      res.write(`data: ${JSON.stringify({
        type: 'done',
        usage: message.usage,
      })}\n\n`);
      res.end();
    });

    // エラー処理
    stream.on('error', (error) => {
      console.error('ストリームエラー:', error.message);
      res.write(`data: ${JSON.stringify({ type: 'error', message: error.message })}\n\n`);
      res.end();
    });

    // クライアント切断時
    req.on('close', () => {
      stream.abort();
    });

  } catch (error) {
    console.error('ストリーム初期化エラー:', error.message);
    if (!res.headersSent) {
      res.status(500).json({ error: error.message });
    }
  }
});

> public/js/app.js のメッセージ送信処理をストリーミング対応に書き換えて。
  要件:
  - fetch API で /api/chat/stream にPOST
  - ReadableStream でチャンクを受信
  - 受信した文字を逐次的に画面に追加
  - 完了後にローディングを解除

// ストリーミング対応のメッセージ送信
async function sendMessageStream(text) {
  appendMessage('user', text);
  setLoading(true);

  // 空のAI吹き出しを先に作成
  const messageDiv = createEmptyAssistantMessage();
  const contentDiv = messageDiv.querySelector('.message__content');
  let fullContent = '';

  try {
    const response = await fetch('/api/chat/stream', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        messages: [{ role: 'user', content: text }],
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value, { stream: true });
      const lines = chunk.split('\n');

      for (const line of lines) {
        if (!line.startsWith('data: ')) continue;

        try {
          const data = JSON.parse(line.slice(6));

          if (data.type === 'text') {
            fullContent += data.content;
            contentDiv.textContent = fullContent;
            scrollToBottom();
          } else if (data.type === 'done') {
            console.log('トークン使用量:', data.usage);
          } else if (data.type === 'error') {
            contentDiv.textContent = `エラー: ${data.message}`;
          }
        } catch (e) {
          // JSON パースエラーは無視（不完全なチャンクの場合）
        }
      }
    }
  } catch (error) {
    contentDiv.textContent = `エラー: ${error.message}`;
  } finally {
    setLoading(false);
  }
}

// 空のAI吹き出しを作成
function createEmptyAssistantMessage() {
  // ローディングインジケーターを削除
  const indicator = document.getElementById('typingIndicator');
  if (indicator) indicator.remove();

  const messageDiv = document.createElement('div');
  messageDiv.className = 'message message--assistant';

  const avatar = document.createElement('div');
  avatar.className = 'message__avatar';
  avatar.textContent = 'AI';

  const content = document.createElement('div');
  content.className = 'message__content';

  messageDiv.appendChild(avatar);
  messageDiv.appendChild(content);
  messagesContainer.appendChild(messageDiv);

  return messageDiv;
}

> SSE (Server-Sent Events) のプロトコル仕様を説明して。
  WebSocket との違いも教えて

// フォーム送信を更新
chatForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  const text = messageInput.value.trim();
  if (!text || isLoading) return;

  messageInput.value = '';
  messageInput.style.height = 'auto';

  // ストリーミング版で送信
  await sendMessageStream(text);
});

【履歴なしの場合】
リクエスト1: "JavaScriptとは何ですか？"     → 回答あり
リクエスト2: "それの使い方を教えて"          → 「それ」が何かわからない

【履歴ありの場合】
リクエスト1: [
  {user: "JavaScriptとは何ですか？"}
]
→ 回答あり

リクエスト2: [
  {user: "JavaScriptとは何ですか？"},
  {assistant: "JavaScriptは...（前の回答）"},
  {user: "それの使い方を教えて"}
]
→ 文脈を理解して回答

> チャットの会話履歴を管理する仕組みを作って。
  要件:
  - messages 配列でユーザーとAIの全メッセージを保持
  - 新しいメッセージを追加する関数
  - API送信時に全履歴を含める
  - 最大20ターンで古いメッセージを削除

// public/js/app.js に追加

// 会話履歴
let conversationHistory = [];

// 最大ターン数（ユーザー+AIで1ターン）
const MAX_TURNS = 20;

// 会話履歴にメッセージを追加
function addToHistory(role, content) {
  conversationHistory.push({ role, content });

  // 最大ターン数を超えたら古いメッセージを削除
  // 2メッセージ（user + assistant）で1ターン
  const maxMessages = MAX_TURNS * 2;
  if (conversationHistory.length > maxMessages) {
    // 最も古い1ターン（2メッセージ）を削除
    conversationHistory = conversationHistory.slice(2);
  }
}

// 会話履歴を取得（API送信用）
function getHistory() {
  return [...conversationHistory];
}

// 会話履歴をリセット
function clearHistory() {
  conversationHistory = [];
  saveToLocalStorage();
}

> sendMessageStream 関数を会話履歴対応に書き換えて。
  送信時に全履歴を含め、応答も履歴に追加して

// 会話履歴対応のストリーミング送信
async function sendMessageStream(text) {
  // ユーザーメッセージを履歴に追加
  addToHistory('user', text);
  appendMessage('user', text);
  setLoading(true);

  const messageDiv = createEmptyAssistantMessage();
  const contentDiv = messageDiv.querySelector('.message__content');
  let fullContent = '';

  try {
    const response = await fetch('/api/chat/stream', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        messages: getHistory(),  // 全履歴を送信
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value, { stream: true });
      const lines = chunk.split('\n');

      for (const line of lines) {
        if (!line.startsWith('data: ')) continue;
        try {
          const data = JSON.parse(line.slice(6));
          if (data.type === 'text') {
            fullContent += data.content;
            contentDiv.textContent = fullContent;
            scrollToBottom();
          }
        } catch (e) { /* 不完全なチャンク */ }
      }
    }

    // AI応答を履歴に追加
    addToHistory('assistant', fullContent);
    saveToLocalStorage();

  } catch (error) {
    contentDiv.textContent = `エラー: ${error.message}`;
    // エラー時は最後のユーザーメッセージを履歴から削除
    conversationHistory.pop();
  } finally {
    setLoading(false);
  }
}

> 会話履歴を localStorage に保存・復元する機能を追加して。
  - ページ読み込み時に復元
  - メッセージ追加時に自動保存
  - 保存容量が上限に近い場合の処理も入れて

const STORAGE_KEY = 'claude-chat-history';

// localStorage に保存
function saveToLocalStorage() {
  try {
    const data = JSON.stringify({
      messages: conversationHistory,
      savedAt: new Date().toISOString(),
    });
    localStorage.setItem(STORAGE_KEY, data);
  } catch (error) {
    if (error.name === 'QuotaExceededError') {
      console.warn('localStorage の容量上限に達しました。古い履歴を削除します。');
      conversationHistory = conversationHistory.slice(
        Math.floor(conversationHistory.length / 2)
      );
      saveToLocalStorage();
    }
  }
}

// localStorage から復元
function loadFromLocalStorage() {
  try {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (!stored) return;

    const data = JSON.parse(stored);
    if (!data.messages || !Array.isArray(data.messages)) return;

    conversationHistory = data.messages;

    // 保存されたメッセージを画面に表示
    conversationHistory.forEach(msg => {
      appendMessage(msg.role, msg.content);
    });

    console.log(`${conversationHistory.length} 件のメッセージを復元しました`);
  } catch (error) {
    console.error('履歴の復元に失敗:', error);
    localStorage.removeItem(STORAGE_KEY);
  }
}

// ページ読み込み時に復元
document.addEventListener('DOMContentLoaded', () => {
  loadFromLocalStorage();
});

> ヘッダーに「新規チャット」ボタンを追加して。
  クリックすると会話履歴をクリアして画面もリセットする

<header class="header">
  <h1 class="header__title">Claude Chat</h1>
  <button class="header__clear-btn" id="clearButton">新規チャット</button>
</header>

.header__clear-btn {
  padding: 6px 16px;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.header__clear-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

// クリアボタン
document.getElementById('clearButton').addEventListener('click', () => {
  if (conversationHistory.length === 0) return;
  if (!confirm('会話履歴をすべて削除しますか？')) return;

  clearHistory();
  messagesContainer.innerHTML = '';

  // ウェルカムメッセージを再表示
  appendMessage('assistant', 'こんにちは！何でも聞いてください。');
});

> 現在の会話のトークン使用量を概算で表示する機能を追加して。
  ヘッダーの下に小さく表示する

// トークン概算（日本語は1文字 ≈ 1-2トークン）
function estimateTokens() {
  const totalChars = conversationHistory.reduce(
    (sum, msg) => sum + msg.content.length, 0
  );
  return Math.ceil(totalChars * 1.5); // 日本語の概算倍率
}

const response = await anthropic.messages.create({
  model: 'claude-sonnet-4-20250514',
  max_tokens: 2048,
  system: 'あなたは親切な日本語教師です。初心者にもわかりやすく丁寧に説明してください。',
  messages: [
    { role: 'user', content: '「食べる」の活用形を教えて' }
  ],
});

> チャットボット用のシステムプロンプトを3種類作って。
  1. 親切な汎用アシスタント
  2. プログラミング講師
  3. 英会話練習パートナー
  それぞれ具体的な指示と制約を含めて

あなたは「クロード」という名前の親切なAIアシスタントです。

## 基本方針
- 常に丁寧で親しみやすい口調で回答してください
- 質問の意図を正確に理解し、的確に回答してください
- わからないことは正直に「わかりません」と伝えてください
- 回答は簡潔にまとめつつ、必要に応じて詳しく説明してください

## 回答のフォーマット
- 長い説明には見出しや箇条書きを使ってください
- コード例を含む場合はプログラミング言語を明記してください
- 重要なポイントは太字で強調してください

## 制約
- 有害なコンテンツは生成しないでください
- 医療・法律・金融の専門的なアドバイスは避け、専門家への相談を勧めてください

あなたはプログラミング講師「コード先生」です。

## 教育方針
- 初心者でも理解できるように、専門用語は必ず説明を添えてください
- 具体的なコード例を必ず含めてください
- 「なぜそうするのか」の理由を必ず説明してください
- 一度に多くの概念を詰め込まず、段階的に教えてください

## 回答スタイル
- まず概念を簡単に説明し、次にコード例を示し、最後にポイントをまとめる
- エラーメッセージの読み方も教えてください
- 「やってみましょう」「試してみてください」など、実践を促す言葉を使ってください

## 得意分野
- JavaScript, Python, HTML/CSS が主な対応言語です
- Web開発全般の質問に回答できます

あなたは英会話の練習パートナー「Alex」です。

## 会話ルール
- ユーザーが英語で話しかけたら英語で返してください
- ユーザーが日本語で話しかけたら、英語の表現を教えてから英語で会話を続けてください
- 文法ミスがあれば、自然な形で正しい表現を教えてください
- 会話のレベルはユーザーに合わせて調整してください

## 教育スタイル
- 間違いを指摘する際は「Great try! A more natural way to say that would be...」のように励ましてから訂正
- 新しい表現を教えるときは例文を2-3個添えてください
- 会話が途切れたら、質問を投げかけて会話を続けてください

## 話題
- 日常会話、旅行、仕事、趣味など幅広いトピックに対応
- ユーザーの興味に合わせて話題を展開してください

> /api/chat/stream エンドポイントで system パラメータを受け取れるようにして。
  デフォルトのシステムプロンプトも用意して

// server/index.js のストリーミングエンドポイント（更新）
app.post('/api/chat/stream', async (req, res) => {
  const { messages, system } = req.body;

  const defaultSystem = 'あなたは親切で知識豊富なアシスタントです。日本語で回答してください。';

  const stream = anthropic.messages.stream({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 2048,
    system: system || defaultSystem,
    messages: messages,
  });

  // ... ストリーミング処理 ...
});

> ヘッダーにペルソナ選択のドロップダウンメニューを追加して。
  選択肢: 汎用アシスタント、プログラミング講師、英会話パートナー
  選択を変えたら会話をリセットする

<header class="header">
  <h1 class="header__title">Claude Chat</h1>
  <div class="header__controls">
    <select class="header__select" id="personaSelect">
      <option value="general">汎用アシスタント</option>
      <option value="coding">プログラミング講師</option>
      <option value="english">英会話パートナー</option>
    </select>
    <button class="header__clear-btn" id="clearButton">新規チャット</button>
  </div>
</header>

.header__controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.header__select {
  padding: 6px 12px;
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  outline: none;
}

.header__select:focus {
  border-color: var(--color-accent);
}

// ペルソナ定義
const PERSONAS = {
  general: {
    name: '汎用アシスタント',
    system: `あなたは「クロード」という名前の親切なAIアシスタントです。
常に丁寧で親しみやすい口調で回答してください。
わからないことは正直に「わかりません」と伝えてください。
回答は簡潔にまとめつつ、必要に応じて詳しく説明してください。`,
    greeting: 'こんにちは！何でも聞いてください。',
  },
  coding: {
    name: 'プログラミング講師',
    system: `あなたはプログラミング講師「コード先生」です。
初心者でも理解できるように、専門用語は必ず説明を添えてください。
具体的なコード例を必ず含めてください。
「なぜそうするのか」の理由を必ず説明してください。`,
    greeting: 'こんにちは！プログラミングについて何でも聞いてください。コード例を交えて説明しますよ。',
  },
  english: {
    name: '英会話パートナー',
    system: `あなたは英会話の練習パートナー「Alex」です。
ユーザーが英語で話しかけたら英語で返してください。
ユーザーが日本語で話しかけたら、英語の表現を教えてから英語で会話を続けてください。
文法ミスがあれば、自然な形で正しい表現を教えてください。`,
    greeting: 'Hi! I\'m Alex, your English conversation partner. Feel free to talk to me in English or Japanese!',
  },
};

let currentPersona = 'general';

// ペルソナ変更イベント
document.getElementById('personaSelect').addEventListener('change', (e) => {
  const newPersona = e.target.value;
  if (newPersona === currentPersona) return;

  currentPersona = newPersona;
  clearHistory();
  messagesContainer.innerHTML = '';

  // 新しいペルソナのあいさつを表示
  const persona = PERSONAS[currentPersona];
  appendMessage('assistant', persona.greeting);
});

// sendMessageStream のリクエストボディを更新
body: JSON.stringify({
  messages: getHistory(),
  system: PERSONAS[currentPersona].system,
}),

> ペルソナ選択にカスタムオプションを追加して。
  選択すると、テキストエリアが表示されて
  ユーザーが自分でシステムプロンプトを入力できるようにして

// カスタムペルソナの追加
PERSONAS.custom = {
  name: 'カスタム',
  system: '',
  greeting: 'カスタムペルソナが設定されました。話しかけてください。',
};

// ペルソナ変更時にカスタム入力欄を表示/非表示
document.getElementById('personaSelect').addEventListener('change', (e) => {
  const customArea = document.getElementById('customPromptArea');
  if (e.target.value === 'custom') {
    customArea.style.display = 'block';
  } else {
    customArea.style.display = 'none';
  }
  // ... 既存のペルソナ変更処理 ...
});

> marked.js をCDNから読み込んで、Claude の応答をMarkdownとしてレンダリングして。
  要件:
  - CDN から marked.js を読み込む
  - AIの応答のみMarkdownレンダリング（ユーザーのメッセージはプレーンテキスト）
  - XSS対策としてサニタイズする
  - コードブロック、テーブル、リストに対応

<!-- public/index.html の </body> の前に追加 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
<script src="js/app.js"></script>

// public/js/app.js の先頭に追加

// marked.js の設定
marked.setOptions({
  breaks: true,       // 改行を <br> に変換
  gfm: true,          // GitHub Flavored Markdown を有効化
  headerIds: false,    // 見出しに自動IDを付けない
});

// Markdown をHTMLに変換（サニタイズ付き）
function renderMarkdown(text) {
  const html = marked.parse(text);
  return DOMPurify.sanitize(html);
}

> appendMessage 関数を更新して、AIの応答はMarkdownレンダリング、
  ユーザーのメッセージはプレーンテキストで表示するようにして

// 更新版 appendMessage
function appendMessage(role, content) {
  const messageDiv = document.createElement('div');
  messageDiv.className = `message message--${role}`;

  const avatarDiv = document.createElement('div');
  avatarDiv.className = 'message__avatar';
  avatarDiv.textContent = role === 'user' ? 'You' : 'AI';

  const contentDiv = document.createElement('div');
  contentDiv.className = 'message__content';

  if (role === 'assistant') {
    // AIの応答はMarkdownレンダリング
    contentDiv.innerHTML = renderMarkdown(content);
  } else {
    // ユーザーのメッセージはプレーンテキスト
    contentDiv.textContent = content;
  }

  messageDiv.appendChild(avatarDiv);
  messageDiv.appendChild(contentDiv);
  messagesContainer.appendChild(messageDiv);

  // コードブロックにコピーボタンを追加
  if (role === 'assistant') {
    addCopyButtons(contentDiv);
  }

  scrollToBottom();
}

// ストリーミング中のMarkdownレンダリング
// sendMessageStream 関数内を更新

if (data.type === 'text') {
  fullContent += data.content;
  // ストリーミング中もMarkdownレンダリング
  contentDiv.innerHTML = renderMarkdown(fullContent);
  scrollToBottom();
}

> highlight.js をCDNから読み込んで、コードブロックにシンタックスハイライトを適用して。
  ダークテーマを使って

<!-- highlight.js のCSS（ダークテーマ） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/atom-one-dark.min.css">
<!-- highlight.js のJS -->
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/highlight.min.js"></script>

// marked.js のカスタムレンダラー
const renderer = new marked.Renderer();

renderer.code = function (code, language) {
  const validLanguage = language && hljs.getLanguage(language) ? language : 'plaintext';
  const highlighted = hljs.highlight(code, { language: validLanguage }).value;

  return `<div class="code-block">
    <div class="code-block__header">
      <span class="code-block__language">${validLanguage}</span>
      <button class="code-block__copy" onclick="copyCode(this)">コピー</button>
    </div>
    <pre><code class="hljs language-${validLanguage}">${highlighted}</code></pre>
  </div>`;
};

marked.setOptions({
  renderer: renderer,
  breaks: true,
  gfm: true,
});

/* コードブロック */
.code-block {
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #282c34;
}

.code-block__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #21252b;
  font-size: 0.75rem;
}

.code-block__language {
  color: #abb2bf;
  text-transform: uppercase;
}

.code-block__copy {
  padding: 2px 10px;
  background: transparent;
  color: #abb2bf;
  border: 1px solid #abb2bf;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
}

.code-block__copy:hover {
  color: #fff;
  border-color: #fff;
}

.code-block pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
}

.code-block code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
}

> コードブロックの「コピー」ボタンとメッセージ全体をコピーするボタンを実装して。
  コピー成功時にボタンのテキストを一時的に「コピー済み」に変更して

// コードブロックのコピー
function copyCode(button) {
  const codeBlock = button.closest('.code-block');
  const code = codeBlock.querySelector('code').textContent;

  navigator.clipboard.writeText(code).then(() => {
    const originalText = button.textContent;
    button.textContent = 'コピー済み';
    button.style.color = '#4ade80';
    button.style.borderColor = '#4ade80';

    setTimeout(() => {
      button.textContent = originalText;
      button.style.color = '';
      button.style.borderColor = '';
    }, 2000);
  }).catch(err => {
    console.error('コピー失敗:', err);
  });
}

// メッセージ全体にコピーボタンを追加
function addCopyButtons(contentDiv) {
  // メッセージ全文コピーボタン
  const copyBtn = document.createElement('button');
  copyBtn.className = 'message__copy-btn';
  copyBtn.textContent = 'コピー';
  copyBtn.addEventListener('click', () => {
    const text = contentDiv.textContent;
    navigator.clipboard.writeText(text).then(() => {
      copyBtn.textContent = 'コピー済み';
      setTimeout(() => { copyBtn.textContent = 'コピー'; }, 2000);
    });
  });
  contentDiv.appendChild(copyBtn);
}