到目前為止，我們的 AI 投資展示館已經能幫你 看圖表、理解市場情緒、聽到語音快訊，但這些功能還停留在「資訊」層面。
今天我們要再跨出一步，讓 AI 不只幫你「看懂市場」，還能直接幫你 整理出投資待辦清單 —— 把洞察轉換成行動！

AI 報告 → 投資待辦清單

先在 Node.js 端新增一個 API，讓 AI 幫我們把分析內容轉換成待辦清單。

js
// routes/todo.js
import express from "express";
import { GoogleGenerativeAI } from "@google/generative-ai";

const router = express.Router();
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

router.post("/generate", async (req, res) => {
  const { report } = req.body;
  const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash" });

  const prompt = `
  以下是一份股市分析報告，請幫我轉換成待辦清單格式，每個待辦事項簡短明確：
  報告：
  ${report}
  回傳 JSON 格式，例如：
  [
    {"task": "關注 AAPL 財報公布", "status": "pending"},
    {"task": "考慮減碼 TSLA 持股", "status": "pending"}
  ]
  `;

  const result = await model.generateContent(prompt);
  res.json(JSON.parse(result.response.text()));
});

export default router;

這樣就能把一段報告自動轉換成清單項目。

前端顯示待辦清單

在 React 網頁上，新增一個 TodoList 元件：

jsx
import { useState } from "react";

function TodoList({ initialTodos }) {
  const [todos, setTodos] = useState(initialTodos);

  const toggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].status =
      newTodos[index].status === "pending" ? "done" : "pending";
    setTodos(newTodos);
  };

  const deleteTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div className="p-4 bg-white rounded-2xl shadow-md">
      <h2 className="text-xl font-bold mb-3">投資待辦清單</h2>
      <ul>
        {todos.map((todo, i) => (
          <li
            key={i}
            className="flex items-center justify-between p-2 border-b"
          >
            <span
              onClick={() => toggleTodo(i)}
              className={`cursor-pointer ${
                todo.status === "done" ? "line-through text-gray-400" : ""
              }`}
            >
              {todo.task}
            </span>
            <button
              onClick={() => deleteTodo(i)}
              className="text-red-500 hover:underline"
            >
              刪除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Demo 整合：AI 報告直接生成待辦

最後，當使用者產生股市分析報告後，可以點擊「產生待辦清單」按鈕，讓 AI 自動生成清單並顯示：

jsx
import { useState } from "react";
import TodoList from "./TodoList";

function ReportToTodoDemo() {
  const [report, setReport] = useState("");
  const [todos, setTodos] = useState([]);

  const generateTodos = async () => {
    const res = await fetch("/api/todo/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ report }),
    });
    const data = await res.json();
    setTodos(data);
  };

  return (
    <div className="p-4">
      <textarea
        className="w-full border rounded p-2"
        rows="4"
        placeholder="貼上 AI 產生的股市分析報告..."
        value={report}
        onChange={(e) => setReport(e.target.value)}
      />
      <button
        onClick={generateTodos}
        className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
      >
        產生待辦清單
      </button>
      {todos.length > 0 && <TodoList initialTodos={todos} />}
    </div>
  );
}

export default ReportToTodoDemo;

執行結果

結語

今天我們把「看懂報告」升級為「做出行動」，已經能讓 AI 將分析報告自動轉成具體的投資待辦清單（JSON 格式）、在前端做新增/勾選/刪除，並能把它串回推播系統或存到 localStorage。這一步把洞察真正轉成可執行的任務，對長期投資紀律與風險控管有很大幫助 — AI 不只是告訴你發生了什麼，還能提醒你該做什麼。
👉 明天（Day 27），我們會把「待辦 / 異動提醒 / 每日快訊」推到手機，示範 LINE Notify / Telegram Bot 的實作與範例。