Todo MCP Server

// app/todo-client.tsx "use client"; import { useState } from "react"; import { Todo } from "../../lib/todos"; export default function TodoClient({ initialTodos }: { initialTodos: Todo[] }) { const [todos, setTodos] = useState<Todo[]>(initialTodos); const [title, setTitle] = useState(""); async function refresh() { const r = await fetch("/api/todos", { cache: "no-store" }); setTodos(await r.json()); } async function add(e: React.FormEvent) { e.preventDefault(); const trimmed = title.trim(); if (!trimmed) return; const r = await fetch("/api/todos", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ title: trimmed }) }); if (r.ok) { setTitle(""); await refresh(); } } async function toggle(id: string, done: boolean) { await fetch(`/api/todos/${id}?done=${!done}`, { method: "PATCH" }); await refresh(); } async function remove(id: string) { await fetch(`/api/todos/${id}`, { method: "DELETE" }); await refresh(); } return ( <main style={{ maxWidth: 600, margin: "2rem auto", padding: "1rem" }}> <h1>✅ MCP Todo</h1> <form onSubmit={add} style={{ display: "flex", gap: 8, margin: "1rem 0" }}> <input placeholder="Add a task…" value={title} onChange={e => setTitle(e.target.value)} style={{ flex: 1, padding: "0.5rem" }} /> <button type="submit">Add</button> </form> <ul style={{ listStyle: "none", padding: 0, display: "grid", gap: 8 }}> {todos.map(t => ( <li key={t.id} style={{ border: "1px solid #ddd", borderRadius: 6, padding: "0.5rem 0.75rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}> <label style={{ display: "flex", gap: 8, alignItems: "center" }}> <input type="checkbox" checked={t.done} onChange={() => toggle(t.id, t.done)} /> <span style={{ textDecoration: t.done ? "line-through" : "none", color: t.done ? "#888" : "inherit" }}> {t.title} </span> </label> <button onClick={() => remove(t.id)} style={{ fontSize: 12 }}>Delete</button> </li> ))} </ul> </main> ); }